エンゲージメントを簡単に高めたかったので、昨年サイトにFacebookいいねボタンを追加しました。コメントや共有を求めるのはやりすぎだと感じました。シンプルな「いいね」ボタンの方が簡単でした。
最初は無料のプラグインを試しましたが、レイアウトが崩れてしまいました。次にFacebookの埋め込みコードをいじってみました。試行錯誤の末、なんとか機能しました。
最終的にSeedProdを使用しました。5分もかからず、コードに触れる必要もありませんでした。
このガイドでは、両方の方法を紹介するので、ご自身の環境に合った方を選んでください。
要約：Facebookいいねボタンの追加方法
- SeedProdを使用する：コード不要で、ドラッグ＆ドロップでFacebookいいねボタンをサイトの好きな場所に配置できます。
- 手動の方法：Facebookの開発者ツールからコードを埋め込んでいいねボタンを実装します。
- どちらの方法でも、訪問者がコンテンツに「いいね！」しやすくなり、Facebookページを成長させることができます。
WordPressにFacebookいいねボタンを追加する理由
WordPressサイトに「いいね！」ボタンを追加すると、Facebookページのエンゲージメントを高めるのに役立ちます。また、ユーザーがFacebookのニュースフィードでコンテンツを共有することを奨励する素晴らしい方法であり、新しい人々をあなたのウェブサイトに引き付けるのに役立ちます。
さらに、ウェブページにFacebookいいねボタンを埋め込むことで、ソーシャルメディアのフォロワーを増やし、最も人気のあるソーシャルネットワークでオンラインコミュニティを構築することができます。その結果、製品やサービスに関する認知度を高め、最終的にはコンバージョンを増やすことができます。
現在、WordPressにはいいね用のFacebookボタンを追加するための組み込みソリューションがないため、WordPressプラグインをインストールするか、手動でFacebookいいねボタンのコードを追加する必要があります。これを念頭に置いて、以下に両方の方法を示します。
SeedProdを使用してWordPressでFacebookいいねボタンを追加する方法
🔹これは、WordPressサイトにFacebookいいねボタンを追加する最も簡単な方法です。SeedProdのドラッグ＆ドロップビルダーを使用して、コーディングなしでどこにでも配置できます。
まず、WordPressプラグインを使用してサイトにFacebookいいねボタンを追加します。SeedProd、最高のWordPressウェブサイトおよびページビルダープラグインを使用します。
SeedProdを使用すると、カスタムランディングページ、ホームページ、サイドバー、ヘッダー、フッターなどを含む、柔軟なページデザインをWordPressで簡単に作成できます。ドラッグ＆ドロップビルダーと多数のWordPressブロックが付属しており、コードやCSSなしでサイトを簡単にカスタマイズできます。
完全にカスタマイズされたランディングページを作成できるだけでなく、SeedProdを使用すると、完全なWordPressテーマをスクラッチから作成でき、WordPressテーマファイルを一切変更する必要がありません。
この方法では、SeedProdのFacebookいいねブロックウィジェットを使用して、WordPressサイトのほぼどこにでもいいねボタンを表示する方法を示します。
SeedProdのインストールと有効化
まず、WordPressウェブサイトにSeedProdプラグインをインストールして有効化します。
これについてヘルプが必要な場合は、SeedProdのインストール方法に関するドキュメントをご覧ください。このガイドでは、プラグインのインストールとライセンスキーの有効化について説明します。
注意: SeedProdには無料版があり、コードなしでシンプルなランディングページを作成できます。このガイドでは、Pro WordPressブロックを使用するためにSeedProd Proを使用します。
次に、ウェブサイトでSeedProdをどのように使用するかを決定する必要があります。個別のWordPressページを作成するために使用することも、現在のウェブサイトデザインを置き換えるためにまったく新しいWordPressテーマを作成するために使用することもできます。
このガイドでは、ランディングページにFacebookいいねボタンを追加する方法を説明します。そのため、開始するには、WordPressダッシュボードから SeedProd » Landing Pages に移動してください。
既成テンプレートを選択する
このページでは、Coming Soon、メンテナンス、ログイン、または404などのSeedProdの既成ランディングページデザインのいずれかを選択できます。
または、ニーズに合わせてカスタマイズできるランディングページテンプレートを使用して、カスタムランディングページを構築することができます。このオプションを使用しますので、 Add New Landing Page ボタンをクリックしてください。
次の画面では、SeedProdのドラッグアンドドロップビルダーでカスタマイズできるプロフェッショナルなランディングページテンプレートのライブラリが表示されます。上部にあるタブをクリックして、ページタイプごとにデザインをフィルタリングします。これには以下が含まれます:
- 近日公開
- メンテナンスモード
- 404ページ
- セールス
- ウェビナー
- リード獲得
- ありがとうございます
- ログイン
好みのデザインを見つけたら、マウスカーソルを合わせてチェックマークアイコンをクリックします。このガイドでは、Tasty Squeeze Pageテンプレートを使用します。
次に、ページに名前を付けることができるポップアップが表示されます。SeedProdは自動的にページにURLを付けますが、後で必要に応じて変更できます。
詳細に満足したら、 Save and Start Editing the Page ボタンをクリックしてください。
Facebookいいねブロックを追加する
テンプレートを選択した後、SeedProdのビジュアルエディターに移動し、ランディングページのデザインのカスタマイズを開始できます。ブロックとセクションが左側に、ライブプレビューが右側にあるため、使いやすいです。
プレビューのいずれかの要素をクリックするだけで、ニーズに合わせてコンテンツをカスタマイズできます。
たとえば、テキストまたは見出しブロックをクリックして、見出しと説明を変更できます。
そうすると、左側に設定パネルが開き、コンテンツ、フォントサイズ、配置などを変更できます。
テンプレートの画像も入れ替えて、独自の画像に置き換えることができます。これを行うには、いずれかの画像をクリックし、設定パネルのゴミ箱アイコンを選択して削除します。
そこから、コンピューターまたはWordPressメディアライブラリから新しい画像をアップロードできます。
これでページビルダーの基本操作がわかりました。次に、ランディングページにFacebookいいねボタンを追加する方法を見てみましょう。
SeedProdには、ランディングページのВнешний видのデザインに追加できる多数のWordPressブロックがあります。これらはページをより魅力的にするだけでなく、リードの獲得やソーシャルメディアのフォロワー獲得にも役立ちます。
たとえば、SeedProdのFacebookブロックを使用すると、Facebookページ、個々の投稿、コメント、さらには「いいね！」ボタンを埋め込むことができます。
Facebookの「いいね！」ボタンブロックをページに追加するには、[高度なブロック]パネルからランディングページにドラッグアンドドロップするだけです。
そこから、ブロック設定パネルのドロップダウンメニューを使用して、「いいね！」ボタンのデザインと外観を変更できます。たとえば、ボタンのレイアウトを変更して、いいね数、いいねボックスなどを表示できます。
フォントサイズを変更したり、Facebookのシェアボタンを一緒に表示するオプションを切り替えたりすることもできます。
さらに、現在のランディングページではなくカスタムURLをターゲットにするオプションや、パーマリンク形式をきれいなリンクに変更するオプションもあります。
[高度な]設定タブでは、「いいね！」ボタンの間隔と、モバイルおよびデスクトップデバイスでの表示をカスタマイズしたり、コードを書かずにアニメーション化したりできます。
注意: [SeedProd » 設定]に移動して、FacebookアプリIDをSeedProdに入力できます。
すべてが希望どおりの外観になるまで、ランディングページのВнешний видのデザインのカスタマイズを続行してください。たとえば、グローバル設定パネルでページの配色とタイポグラフィを編集できます。
変更を保存するには、右上隅にある[保存]ボタンをクリックすることを忘れないでください。
ページ設定の構成
作成しているページにはオプトインフォームが含まれているため、次にメールマーケティングサービスを接続する必要があります。これを行うには、上部にある[接続]タブをクリックし、リストからメールマーケティングプロバイダーを見つけます。
そこから、画面の指示に従ってメールリストを接続します。
上部にある[ページ設定]タブをクリックして、ランディングページの設定を調整することもできます。この画面では、ランディングページの名前とURLを変更したり、検索エンジンのためのオンページSEO設定を構成したりできます。
たとえば、SEO設定セクションでは、All in One SEO、つまり最高のWordPress SEOプラグインを使用して、ページのOpen Graph設定を構成できます。
このメタデータは、Facebookがサムネイル画像、ページタイトル、説明、作成者など、ページに関する情報を収集するのに役立ちます。
さらに、ページ設定では、FacebookピクセルやGoogle Analyticsのトラッキングコードなどのカスタムスクリプトを追加することもできます。
詳細については、ランディングページ設定ドキュメントを参照してください。
変更の公開
ページが希望どおりの外観になったら、WordPressサイトで公開する準備が整います。これを行うには、[保存]ボタンのドロップダウン矢印をクリックし、[公開]を選択します。
これで、ランディングページにアクセスして、Facebookの「いいね！」ボタンが機能していることを確認できます。
コードを使ってFacebookのいいね！ボタンを手動で追加する方法
🔹 プラグインを使いたくない場合は、この方法でFacebookのいいね！ボタンのコードをWordPressに直接コピー＆ペーストする方法を紹介します。少し手間はかかりますが、どのサイトでも機能します。
WordPressサイトにFacebookのいいね！ボタンを追加する別の方法は、カスタムコードを使用することです。ただし、この方法ではHTMLコードをWordPressに直接コピー＆ペーストする必要があるため、コードの編集に慣れている方のみにお勧めします。
とはいえ、カスタムコードをWordPressに追加する作業を簡単にするために、WPCodeプラグインを使用します。
まず、Meta for Developersのウェブサイト（developers.facebook.com）にある「いいね！ボタン」ページに移動し、「いいね！ボタン設定ツール」セクションまでスクロールします。
次に、「いいね！」するURL」フィールドにFacebookページのURLを入力します。これは、Facebookのいいね！ボタンで接続したいページである必要があります。
その後、設定を調整して、いいね！ボタンのレイアウトとサイズを選択します。いいね！ボタンのプレビューも表示されます。
プレビューに満足したら、「コードを取得」ボタンをクリックします。
これで、2つのコードスニペットと、JavaScript SDKとiFrameという2つの異なるタブが表示されるポップアップが表示されます。JavaScriptオプションをクリックします。
これが、いいね！ボタンを表示するためにWordPressウェブサイトに追加する必要があるものです。
これらのコードスニペットをWordPressテーマに直接追加すると、ウェブサイトが破損する可能性があります。さらに、テーマを更新すると、コードスニペットが上書きされる可能性があります。
このコードを追加する簡単な方法は、WPCodeプラグインを使用することです。これにより、コードスニペットをウェブサイトに貼り付け、テーマファイルを直接編集することなく管理できます。
まず、WPCodeプラグインをインストールして有効化する必要があります。
プラグインを有効化した後、WordPressダッシュボードから「コードスニペット」>「ヘッダーとフッター」に移動します。
次に、Facebookから最初のコードスニペットをコピーし、WordPressテーマのheader.phpファイルの<body>タグの後に貼り付けます。
コードをコピーして「本文」セクションに入力し、「変更を保存」ボタンをクリックするだけです。
次に、2番目のコードスニペットをコピーし、WordPressサイトに貼り付けてFacebookのいいね！ボタンを表示する必要があります。
これを行うには、WordPress管理画面から「コードスニペット」>「+スニペットを追加」に移動するか、「新規追加」ボタンをクリックします。
次の画面で、事前作成済みのライブラリからスニペットを選択するか、新しいカスタムコードを追加できます。
「カスタムコードを追加（新規スニペット）」オプションをクリックし、「スニペットを使用」ボタンを選択してください。
そこから、カスタムコードに名前を付け、Facebookからの2番目のコードスニペットを「コードプレビュー」セクションに入力します。
「コードタイプ」ドロップダウンメニューをクリックして、「HTMLスニペット」を選択してください。
次に、「挿入」セクションまでスクロールダウンし、Facebookいいね！ボタンを表示する場所を選択します。たとえば、ブログ記事のコンテンツの前に表示させることができます。
これを行うには、「場所」ドロップダウンメニューをクリックし、「ページ固有」セクションの下にある「コンテンツの前に挿入」オプションを選択します。
最後に、「スニペットを保存」ボタンをクリックし、トグルを非アクティブからアクティブに切り替えます。
これで、任意のブログ記事にアクセスして、記事コンテンツの前にFacebookいいね！ボタンが表示されていることを確認できます。
Facebookいいね！ボタンの追加に関するFAQ
この記事が、サイトにFacebookいいね！ボタンを追加する方法を学ぶのに役立ったことを願っています。また、WordPressにFacebookイベントを埋め込む方法に関するチュートリアルも気に入るかもしれません。
お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。
