昨年、自分のサイトにFacebookの「いいね！」ボタンを追加した。人々にコメントやシェアを求めるのはやりすぎだと感じた。シンプルな「いいね！」ボタンの方が簡単だった。
最初は無料のプラグインを試したが、レイアウトが崩れてしまった。その後、フェイスブックからの埋め込みコードをいじってみた。試行錯誤の末、うまくいった。
結局、SeedProdを使った。5分もかからなかったし、コードに触れる必要もなかった。
このガイドでは、両方の方法を紹介するので、自分のセットアップに合った方法を選んでほしい。
TL;DR：Facebookの「いいね！」ボタンを追加する方法
- SeedProdを使おう：Facebookの「いいね！」ボタンをドラッグ＆ドロップするだけで、あなたのサイトのどこにでもコードなしで設置できます。
- 手動の方法：Facebookの開発者ツールからコードを使用して、「いいね！」ボタンを埋め込む。
- どちらの方法も、訪問者があなたのコンテンツに「いいね！」を押すのを容易にし、Facebookページを成長させる。
なぜWordPressにFacebookの「いいね！」ボタンを追加するのか？
WordPressサイトに「いいね！」ボタンを追加することで、Facebookページのエンゲージメントを高めることができます。また、ユーザーがあなたのコンテンツをFacebookのニュースフィードでシェアすることを促すことができ、新しいユーザーをあなたのウェブサイトに呼び込むことができます。
さらに、Facebookの「いいね！」ボタンをウェブページに埋め込むことで、ソーシャルメディアのフォロワーを増やし、最も人気のあるソーシャルネットワーク上でオンラインコミュニティを構築することができます。その結果、商品やサービスの認知度を高め、最終的にコンバージョンを増やすことができます。
現在のところ、WordPressにはFacebookの「いいね！」ボタンを追加するビルトイン・ソリューションがないため、WordPressプラグインをインストールするか、手動でFacebookの「いいね！」ボタンのコードを追加する必要があります。そのため、WordPressプラグインをインストールするか、手動でFacebookの「いいね！」ボタンのコードを追加する必要があります。
SeedProdを使ってWordPressにFacebookの「いいね！」ボタンを追加する方法
🔹 これは、あなたのWordPressサイトにFacebookの「いいね！」ボタンを追加する最も簡単な方法です。SeedProdのドラッグ＆ドロップビルダーを使って、コーディングなしで、どこにでも設置できます。
まず、WordPressのプラグインを使って、サイトにFacebookの「いいね！」ボタンを追加します。ここでは、WordPressのウェブサイトとページ作成に最適なプラグイン、SeedProdを使用します。
SeedProdは、カスタムランディングページ、ホームページ、サイドバー、ヘッダー、フッターなど、WordPressで柔軟なページデザインを超簡単に作成できます。ドラッグ＆ドロップビルダーと多数のWordPressブロックが付属しており、コードやCSSなしで簡単にサイトをカスタマイズできます。
完全にカスタマイズされたランディングページを構築することができるほか、SeedProdでは完全なWordPressテーマをゼロから作成することができます。
この方法では、SeedProdのFacebook「いいね！」ブロック・ウィジェットを使って、WordPressサイトのほぼどこにでも「いいね！」ボタンを表示する方法を紹介します。
SeedProdのインストールとアクティベーション
開始するには、WordPressウェブサイトにSeedProdプラグインをインストールし、有効化してください。
SeedProdのインストール方法については、こちらをご覧ください。このガイドでは、プラグインのインストールとライセンスキーの有効化について説明します。
注：SeedProdには、コードなしで簡単なランディングページを作成できる無料版があります。このガイドでは、SeedProd ProのPro WordPressブロックを使用します。
次に、あなたのウェブサイトでSeedProdをどのように使用するかを決定する必要があります。個々のWordPressページを作成したり、現在のウェブサイトデザインを置き換えるために全く新しいWordPressテーマを作成するために使用することができます。
このガイドでは、Facebookの「いいね！」ボタンをランディングページに追加する方法を紹介します。
テンプレートを選ぶ
このページでは、カミングスーン、メンテナンス、ログイン、または404など、SeedProdのプリメイドランディングページデザインのいずれかを選択することができます。
あるいは、ニーズに合わせてカスタマイズできるランディングページのテンプレートを使って、カスタムランディングページを作ることもできます。私たちはこのオプションを使用するので、先に進み、新しいランディングページを追加するボタンをクリックします。
次の画面では、SeedProdのドラッグ＆ドロップビルダーでカスタマイズできるプロフェッショナルなランディングページテンプレートのライブラリが表示されます。上部のタブをクリックすると、ページタイプ別にデザインを絞り込むことができます：
- 近日公開
- メンテナンス・モード
- 404ページ
- 売上高
- ウェビナー
- リード・スクイーズ
- ありがとう
- ログイン
気に入ったデザインが見つかったら、マウスカーソルを合わせてチェックマークアイコンをクリックします。このガイドでは、Tasty Squeeze Pageテンプレートを使用します。
次に、ページに名前を付けるポップアップが表示されます。SeedProdは自動的にページにURLを付けますが、後で変更することもできます。
詳細が決まったら、「保存してページの編集を開始する」ボタンをクリックします。
Facebookの「いいね！」ブロックを追加する
テンプレートを選択した後、SeedProdのビジュアルエディタに移動し、そこでランディングページのデザインをカスタマイズし始めることができます。左側にブロックとセクション、右側にライブプレビューがあり、使いやすいです。
プレビュー上の任意の要素をクリックするだけで、ニーズに合わせてコンテンツをカスタマイズできます。
例えば、任意のテキストや見出しブロックをクリックして、見出しや説明を変更することができます。
そうすると、左側に設定パネルが開き、内容、フォントサイズ、配置などを変更できる。
テンプレートの画像を入れ替えて、自分の画像に置き換えることもできます。これを行うには、任意の画像をクリックし、設定パネルのゴミ箱アイコンを選択して削除します。
そこから、コンピュータまたはWordPressのメディアライブラリから新しい画像をアップロードすることができます。
ページビルダーの基本的な使い方がわかったところで、ランディングページにFacebookの「いいね！」ボタンを追加する方法を見ていきましょう。
SeedProdには、ランディングページのデザインに追加できる数多くのWordPressブロックがあります。あなたのページをより魅力的にするだけでなく、リードやソーシャルメディアのフォロワーを生み出すのにも最適です。
例えば、SeedProdのFacebookブロックを使えば、Facebookページ、個々の投稿、コメント、そして「いいね！」ボタンまで埋め込むことができます。
Facebookいいね！ボタンブロックをページに追加するには、Advanced Blocksパネルからランディングページにドラッグするだけです。
そこから、ブロック設定パネルのドロップダウンメニューを使って、「いいね！」ボタンのデザインと外観を変更することができます。例えば、ボタンのレイアウトを変更して、ボタンの数を表示させたり、「いいね！」ボックスを表示させたりすることができます。
また、フォントサイズを変更したり、Facebookのシェアボタンを表示するかどうかを切り替えたりすることもできる。
さらに、現在のランディングページの代わりにカスタムURLをターゲットにしたり、パーマリンク形式をきれいなリンクに変更したりするオプションもある。
詳細設定タブでは、モバイルデバイスとデスクトップデバイスの「いいね！」ボタンの間隔と可視性をカスタマイズし、コードを書くことなくアニメーション化することができます。
注：SeedProd" 設定にアクセスして、FacebookアプリIDをSeedProdに入力することができます。
ランディングページのデザインは、すべてが満足のいく仕上がりになるまでカスタマイズを続けましょう。例えば、グローバル設定パネルでページの配色やタイポグラフィを編集することができます。
右上の「保存」ボタンをクリックして変更を保存することをお忘れなく。
ページ設定を行う
今回作成するページにはオプトインフォームが含まれているので、次にメールマーケティングサービスを接続する必要があります。これを行うには、上部にある接続タブをクリックし、リストの中からメールマーケティングプロバイダを探します。
そこから、画面の指示に従ってEメールリストに接続します。
また、上部にある「ページ設定」タブをクリックして、ランディングページの設定を微調整することもできます。この画面では、ランディングページの名前とURLを変更したり、検索エンジン向けのオンページSEO設定を行うことができます。
例えば、SEO設定のセクションでは、WordPressの最高のSEOプラグインであるAll in One SEOを使って、ページのオープングラフ設定を行うことができます。
このメタデータは、サムネイル画像、ページのタイトル、説明、作者など、Facebookがあなたのページに関する情報を収集するのに役立ちます。
さらに、ページ設定では、FacebookピクセルやGoogleアナリティクスのトラッキングコードなどのカスタムスクリプトを追加することもできます。
詳しくは、ランディングページ設定のドキュメントをご覧ください。
変更を公開する
ページが思い通りに表示されたら、WordPressサイトで公開する準備ができました。これを行うには、保存ボタンのドロップダウン矢印をクリックし、公開を選択します。
これで、ランディングページにアクセスして、Facebookの「いいね！」ボタンが動いているのを見ることができます。
Facebookの「いいね！」ボタンをコードを使って手動で追加する方法
🔹 プラグインを使いたくない場合は、Facebookの「いいね！」ボタンのコードをWordPressに直接コピー＆ペーストする方法を紹介します。少し手順が増えますが、どのサイトでも使えます。
WordPressサイトにFacebookの「いいね！」ボタンを追加するもう一つの方法は、カスタムコードを使うことです。ただし、この方法はHTMLコードをWordPressに直接コピー＆ペーストする必要があるので、コードの編集に慣れている人にのみお勧めします。
とはいえ、WordPressにカスタムコードを簡単に追加できるWPCodeプラグインを使うことにしよう。
まず、Meta for Developersウェブサイト（developers.facebook.com）の「Like Button」ページに行き、「Like Button Configurator」セクションまでスクロールダウンする必要があります。
次に、「いいね！するURL」フィールドにFacebookページのURLを入力します。これは、Facebookの「いいね！」ボタンと接続したいページでなければなりません。
その後、設定を調整して、「いいね！」ボタンのレイアウトとサイズを選択するだけです。いいね！ボタンのプレビューも表示されます。
プレビューに満足したら、「コードを取得」ボタンをクリックします。
2つのコード・スニペットと、JavaScript SDKとiFrameという2つの異なるタブがポップアップで表示されます。JavaScriptオプションをクリックします。
これは、「いいね！」ボタンを表示するために、WordPressウェブサイトに追加する必要があるものです。
これらのコード・スニペットをWordPressテーマに直接追加すると、ウェブサイトが壊れてしまう可能性があります。さらに、テーマを更新すると、コードスニペットが上書きされる可能性もあります。
このコードを追加する簡単な方法は、WPCodeプラグインを使用することです。このプラグインを使えば、テーマファイルを直接編集することなく、コードスニペットをウェブサイトに貼り付けて管理することができます。
まず、WPCodeプラグインをインストールし、有効化する必要があります。
プラグインを有効化した後、WordPressダッシュボードからCode Snippets " Header and Footerに移動します。
Now, copy the first code snippet from Facebook and add it to your WordPress theme’s header.php file after the <body> tag.
コードをコピーして「Body」セクションに入力し、「Save Changes」ボタンをクリックするだけです。
次に、2番目のコード・スニペットをコピーして、WordPressサイトに貼り付け、Facebookの「いいね！」ボタンを表示させます。
これを行うには、WordPressの管理画面からCode Snippets " + Add Snippetに移動するか、Add Newボタンをクリックします。
次の画面では、あらかじめ組み込まれたライブラリからスニペットを選択するか、新しいカスタムコードを追加することができます。
カスタムコードを追加（新規スニペット）」オプションをクリックし、「スニペットを使用」ボタンを選択します。
そこから、カスタムコードに名前を付け、Facebookからの2番目のコードスニペットを「コードプレビュー」セクションに入力する。
Code Type'ドロップダウンメニューをクリックし、'HTML Snippet'を選択してください。
次に、「挿入」セクションまでスクロールダウンし、Facebookの「いいね！」ボタンを表示する場所を選択します。例えば、ブログ記事のコンテンツの前に表示させます。
これを行うには、「Location」ドロップダウンメニューをクリックし、「Page-Specific」セクションの「Insert Before Content」オプションを選択します。
最後に、Save Snippetボタンをクリックし、トグルをInactiveからActiveに切り替えます。
これで、どのブログ記事にも、投稿内容の前にFacebookの「いいね！」ボタンが表示されるようになりました。
Facebookの「いいね！」ボタンの追加に関するFAQ
この記事が、あなたのサイトにフェイスブックの「いいね！」ボタンを追加する方法のお役に立てば幸いです。WordPressにFacebookのイベントを埋め込む方法については、こちらのチュートリアルもお勧めです。
お読みいただきありがとうございました！あなたのご意見をぜひお聞かせください。YouTube、X、Facebookで、あなたのビジネスを成長させるために役立つアドバイスやコンテンツを提供していますので、お気軽に会話にご参加ください。
