WordPressサイトが成功するための簡単な真実の1つ：訪問者があなたのコンテンツに簡単にエンゲージできるようにすることが成長の鍵です。しかし、多くのサイト所有者は、Facebookの「いいね！」ボタンを追加するという簡単なことを見落としています。
小さな追加機能のように思えるかもしれませんが、リーチを拡大するための最も強力なツールの1つです。いいねが増えれば、より多くの人に知られるようになり、それがしばしばより多くのトラフィックと潜在的な顧客につながります。
幸いなことに、WordPressサイトに1つ追加するのは、思っているよりも簡単です！さまざまなFacebook統合方法を試しましたが、非常にうまく機能するものがいくつか見つかりました。
このチュートリアルでは、WordPressにFacebookいいねボタンを追加する方法を説明します。テスト済みの最良の方法を共有するので、ソーシャルエンゲージメントを活用してWordPressサイトを成長させることができます。📈
WordPressにFacebookいいね！ボタンを追加する理由
Facebookは世界で最も人気のあるソーシャルメディアプラットフォームの1つです。多くの企業がFacebookを利用して顧客とつながり、製品を宣伝しています。
WordPressウェブサイトにFacebookのいいね！ボタンを追加すると、エンゲージメントを高めることができます。また、Facebookのプロフィールでコンテンツを共有するように促し、サイトへの新規ユーザーを引き付けることができます。
Facebookのいいね！ボタンを使用して、ソーシャルフォロワーを増やし、コミュニティを構築できます。製品やサービスの認知度を高め、コンバージョンを促進するのに役立ちます。
これを踏まえ、WordPressウェブサイトにFacebookいいね！ボタンを追加する方法をご紹介します。このガイドで説明する主な方法を以下に示します。
準備はいいですか？プラグインまたはカスタムコードを使用してWordPressにFacebookのいいね！ボタンを追加する方法を見てみましょう。
方法1：プラグインを使用してWordPressにFacebookいいね！ボタンを追加する
この方法では、WordPressプラグインを使用してFacebookのいいね！ボタンを追加します。この方法は非常に簡単で、初心者におすすめです。
最初に行う必要があるのは、BestWebSoftのLike & Shareをインストールして有効化することです。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。
有効化したら、WordPress管理画面から 「いいね！」＆「共有」 » 「設定」 に移動できます。
次に、Facebookの「アプリID」と「アプリシークレット」を追加する必要があります。この情報がない場合は、以下の手順に従ってください。
FacebookアプリIDとアプリシークレットの作成方法
「設定」パネルで、「いいね！＆共有」プラグインの「アプリID」または「アプリシークレット」フィールドの下にある「新規作成」リンクをクリックしてください。
これにより、Meta for Developersのウェブサイトに移動します。アプリIDとシークレットを入力するために、WordPress管理画面でいいね！＆共有設定ページを開く必要があるため、ウェブサイトを新しいタブまたはウィンドウで開くことをお勧めします。
ここから、アプリの種類を選択する必要があります。「ビジネス」をアプリの種類として選択し、「次へ」ボタンをクリックしてください。
次に、アプリに関する基本的な情報を提供する必要があります。
アプリの表示名を入力でき、「アプリの連絡先メールアドレス」フィールドに正しいメールアドレスが表示されていることを確認してください。Facebookは、現在ログインしているアカウントのメールアドレスを自動的に選択します。
ビジネスアカウントを選択するオプションもあります。「ビジネス マネージャー アカウントが選択されていません」のままにして、「アプリを作成」ボタンをクリックできます。
次に、ポップアップウィンドウが表示されます。ここで、Facebookはパスワードの再入力を求めます。
これは、アカウントでの悪意のあるアクティビティを防ぐためのセキュリティ対策です。Facebookアカウントのパスワードを入力し、「送信」ボタンをクリックしてください。
その後、アプリダッシュボードが表示されます。
ここから、左側のメニューから 設定 » 基本 に進むことができます。
「設定」ドロップダウンを展開し、「基本」をクリックします。
ここで、「アプリID」と「アプリシークレット」が表示されます。
「いいね！」＆共有プラグインの設定にこの情報を入力できるようになりました。
Facebookいいねボタンのカスタマイズを完了する
まず、「App ID」をコピーして、Like & Share » Settingsページを開いているタブまたはウィンドウに戻ります。次に、「App ID」を該当するフィールドに入力するだけです。
次に、Meta for Developersページから「アプリシークレット」データをコピーし、いいね！＆共有プラグインの設定に貼り付ける手順を繰り返します。
それが完了したら、プロフィールURLと共有ボタンと一緒にFacebookのいいね！ボタンを表示するかどうかを選択できます。
Facebook の「いいね！」ボタンのサイズ、コンテンツの前または後の位置、配置を編集する設定もあります。
プロフィールURLボタンを有効にしている場合は、「プロフィールURLボタン」セクションまでスクロールダウンし、Facebookのユーザー名またはIDを入力できます。
完了したら、変更を保存することを忘れないでください。
これで、プラグインは自動的にFacebookのいいね！ボタンをWordPressウェブサイトに追加し、設定に基づいて配置します。
[fb_button] ショートコードを使用して、サイトのどこにでも Facebook のいいね！ボタンを追加することもできます。
これで完了です！これでサイトにアクセスすると、各投稿に「いいね！」ボタンが表示されます。
方法 2: WordPress に Facebook の「いいね！」ボタンを手動で追加する
Facebookのいいね！ボタンを追加するもう1つの方法は、カスタムコードを使用することです。ただし、この方法ではWordPressに直接コードを追加する必要があるため、コード編集に慣れている方のみにお勧めします。
このセクションでは、WPCodeプラグインを使用します。これにより、誰でも簡単にコードをWordPressブログに追加できます。
しかし、まず、Meta for Developersのウェブサイトにある「いいね！ボタン」ページにアクセスし、「いいね！ボタンコンフィギュレーター」セクションまでスクロールダウンする必要があります。
次に、「いいね！」する URL フィールドに Facebook ページの URL を入力します。これにより、Facebook のいいねボタンがページに接続されます。
その後、設定を使用して「いいね！」ボタンのレイアウトとサイズを選択するだけです。「いいね！」ボタンのプレビューも表示されます。
プレビューに満足したら、「コードを取得」ボタンをクリックします。これにより、ポップアップウィンドウが表示され、「JavaScript SDK」タブの下に2つのコードスニペットが表示されます。
これらのコードスニペットをWordPressテーマに直接追加すると、ウェブサイトが破損する可能性があることに注意してください。さらに、テーマを更新すると上書きされます。
そのため、WPCodeプラグインの使用をお勧めします。このプラグインを使用すると、コードスニペットをウェブサイトに貼り付けることができ、テーマファイルを編集せずにカスタムコードを簡単に管理できます。これにより、WordPressサイトが破損するリスクを回避できます。
また、当社のブランドサイト全体でWPCodeを使用して、カスタマイズをスムーズかつ効率的に処理してきました。WPCodeに関する当社の経験の詳細については、WPCodeの完全レビューをご覧ください。
開始するには、WPCode無料プラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するガイドをご覧ください。
📝 注: WPCodeの無料バージョンではカスタムコードスニペットを追加できます。今回はこれを使用します。ただし、WPCode Proにアップグレードすると、完全な改訂履歴やコードのスケジュール設定機能など、追加機能が利用可能になります。
有効化したら、WordPress ダッシュボードから コードスニペット » ヘッダーとフッター に移動できます。
次に、最初のコードスニペットをコピーし、WordPressテーマのheader.phpファイルにある<body>タグの直後に追加する必要があります。コードをコピーして、「Body」セクションに入力するだけです。
このプロセスが完了したら、「変更を保存」ボタンをクリックすることを忘れないでください。
次に、Facebookの「いいね！」ボタンを表示するために、2番目のコードをコピーしてWordPressサイトに貼り付ける必要があります。
これを行うには、WordPress管理パネルから コードスニペット » スニペットを追加 に移動します。または、WPCodeダッシュボードの「新規追加」ボタンをクリックするだけです。
次の画面で、WPCodeはプリビルドライブラリからスニペットを選択するか、新しいカスタムコードを追加することを許可します。
「カスタムコードを追加（新規スニペット）」オプションを選択し、「スニペットを使用」ボタンをクリックします。
その後、カスタムコードに名前を付け、「コードプレビュー」セクションの下に2番目のコードスニペットを入力できます。
「コードの種類」ドロップダウンメニューをクリックし、コードの種類として「HTMLスニペット」を選択してください。
次に、「挿入」セクションまでスクロールダウンして、Facebookいいねボタンを表示したい場所を選択できます。
例えば、コンテンツの前に表示したいとします。
「場所」ドロップダウンメニューをクリックし、「ページ、投稿、カスタム投稿タイプ」の下にある「コンテンツの前に挿入」オプションを選択するだけです。
完了したら、「スニペットを保存」ボタンをクリックできます。
トグルをクリックして、「非アクティブ」から「アクティブ」に切り替える必要もあります。
これで完了です。コードを入力すると、Facebookの「いいね！」ボタンがウェブサイトに表示されます。
ボーナスのヒント：オープングラフメタデータとは何ですか？WordPressにどのように追加しますか？
Open Graphは、FacebookがWordPressサイトのページまたは投稿に関する情報を収集するのに役立つメタデータです。このデータには、サムネイル画像、投稿/ページタイトル、説明、作成者が含まれます。
Facebook はタイトルと説明フィールドをプルアップするのが非常に賢いです。ただし、投稿に画像が複数ある場合、共有時にサムネイルが正しく表示されないことがあります。
すでにAll in One SEO (AIOSEO)プラグインを使用している場合は、これを簡単に修正できます。
WPBeginnerでは、FacebookやXのOpenGraph設定の管理にAIOSEOプラグインを使用しており、その他のSEO対策も行っています。私たちはこれを高く評価しており、詳細についてはAIOSEOの詳細レビューをご覧ください。
これを行うには、まず**すべてのSEOツール » ソーシャルネットワーク**に移動し、Facebookタブに切り替えます。
次に、「画像をアップロードまたは選択」ボタンをクリックして、記事にOpen Graph画像がない場合に「デフォルトの投稿Facebook画像」を設定します。
それに加えて、個々の投稿またはページごとにオープングラフ画像を設定することもできます。
投稿を編集する際に、コンテンツエディターのAIOSEO設定セクションまでスクロールダウンします。次に、「ソーシャル」タブに切り替えて、サムネイルのプレビューを確認できます。
次に、「画像のソース」オプションまでスクロールします。次に、投稿のオープングラフ画像を選択してください。
例えば、Open Graphのサムネイルとして使用する画像として、「添付画像」、「コンテンツ内の最初の画像」、または「カスタム画像」を選択できます。
詳細およびOpen Graphメタデータを追加するその他の方法については、WordPressにFacebook Open Graphメタデータを追加する方法に関するガイドをご覧ください。
追加リソース：WordPress ウェブサイト向けのその他のソーシャルメディアガイド
この記事が WordPress に Facebook のいいねボタンを追加する方法を学ぶのに役立ったことを願っています。次に、次のガイドも参照してください。
- WordPressでFacebookページのレビューを表示する方法
- WordPress に Facebook アルバムを埋め込む方法
- WordPressユーザー向けの最高のFacebookヒントとチュートリアル
- ソーシャルメディアコンテストを実行してサイトを成長させる方法
- WordPressでソーシャルメディアを使用してメール購読者を増やす方法
- ブロガー、マーケター、ソーシャルメディア向けの最高のAIプロンプト
- WordPress向けソーシャルメディア完全チートシート
- WordPressに最適なソーシャルメディアプラグイン
この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。
kzain
WordPressサイトにFacebookいいねボタンを追加したいと思っていましたが、この記事のおかげで非常に簡単になりました。簡単なショートコードやより高度なプラグインアプローチなど、複数の方法を提供してくださったのが気に入っています。ステップバイステップの説明とスクリーンショットは非常に明確で、ボタンの外観をカスタマイズするための追加のヒントに感謝しています。ソーシャルエンゲージメントを高め、オーディエンスとつながるのを助けてくれてありがとう！
アール・ジョーンズ
wp-like-button をブログページに追加し、指示に従って設定しました。いいねカウンターは上昇しているので、読者がボタンをクリックしていることはわかりますが、フォローアップできるように、これらの読者の名前はどこで見つけられますか？
WPBeginnerサポート
現時点では、プラグインはその情報を追跡していません。
管理者
ミシェル
Hi Wp Beginner
素晴らしい記事をたくさん書いてくれて、本当にありがとう！
もうすでにとても役に立っています。分かりやすいです…。大好きです！
Cheers guys, keep on doing like you do
WPBeginnerサポート
You’re welcome, glad our articles have been helpful
管理者
マクドナルド
こんにちは、皆さん。
Blog Bank Wordpressのテーマを使用していますが、Facebook、Twitter、Google+、LinkedInボタンがうまく組み込まれていますが、意図したとおりに機能させることができません（私の各ソーシャルサイトを参照してください）。方法があれば知りたいです。
私たち初心者にとって、継続的に素晴らしい仕事をしてくださっていることに感謝します。
WPBeginnerサポート
この問題については、テーマのサポートに問い合わせる必要があります。テーマ自体にエラーがあるのか、それとも問題を解決する方法なのかを教えてくれるはずです。
管理者
ステファン・ンゲメナ
管理者様、WordPressブログでヘッダーとフッタープラグインを使用しています。フッターにコードを追加したところ、ブログの末尾にいいねボタンが表示されています。各投稿の直後に表示されるようにするにはどうすればよいですか？ありがとうございます。
メアリー
The WordPress plugin worked perfect. Thanks for tutorial.
ソシャイル・アカシュ
I am unable to make the plugin work on Archives
It works perfectly fine on Single Posts.
ご協力いただけると大変助かります
ジョナサン
「URLフィールドは空のままで構いません。URLはWordPressで動的に入力されます。」とおっしゃいました。
その後、記事に URL を動的に入力するためのコードを記載してくれることを期待していました。
data-hrefを空白のままにして、追加のアクションなしでURLは動的に入力されますか？
ヴィピン
投稿メタ情報にFacebookのいいね数を表示するにはどうすればよいですか。
このように：AdminがTechnologyに投稿しました 日付 | 2件のコメント | 5件のいいね
サンディープ・クマール
Jetpackプラグインはいいねボタンも提供しています。
アーメド
ボタンのサイズをもっと大きくしたいです
トゥーン
今のところ順調で、これは機能します。
しかし、ボタンを押した瞬間にそのポップアップウィンドウを削除するにはどうすればよいですか。
レン・ヴァンダーリンデ
Wordpressを使用して、営利目的ではない個人のウェブサイト（ブログではなく）をセットアップしました。私の非常に限られたウェブ知識でそれができたことに非常に感銘を受けています。Facebookの「いいね！」ボタンを追加したいのですが、私のホームページではあなたの指示が機能しませんか？
Lenより
スザンナ
ありがとうございます。これは見事に機能しました。投稿だけでなく、ページでもこれを実行する方法はありますか？ありがとうございます！！！このサイトが一番のお気に入りになりました！
パトリック
こんにちは、
このチュートリアルは私には中国語のように聞こえます。初心者にはない特定の知識を前提とした語彙を使用しています。
「まず、テーマのフォルダにあるsingle.phpファイルを「開きます。次に、投稿ループ内に次のコードを貼り付けます。」
それはどういう意味ですか？
投稿を短く保っていることは理解していますが、多くの場合、本当に短すぎます！
ありがとうございます
マーク
こんにちは、
質問です。ここでやったように、FBいいねボタンをGoogle +1ボタンやその他のボタンとインラインで配置するにはどうすればよいですか？
ありがとうございます、
マーク