WPBeginner - 初心者向けWordPressチュートリアル

最も必要とされている時に、信頼できるWordPressチュートリアルを。
WordPress入門ガイド
WPBカップ
2500万人以上
当社のプラグインを使用しているウェブサイト
16+
WordPress経験年数
3000+
専門家によるWordPressチュートリアル

WordPressにFacebookいいね！ボタンを追加する方法

編集スタッフ | | 読者への開示

共有数 2k ChatGPT Perplexity X LinkedIn WhatsApp

WordPressサイトが成功するための簡単な真実の1つ：訪問者があなたのコンテンツに簡単にエンゲージできるようにすることが成長の鍵です。しかし、多くのサイト所有者は、Facebookの「いいね！」ボタンを追加するという簡単なことを見落としています。

小さな追加機能のように思えるかもしれませんが、リーチを拡大するための最も強力なツールの1つです。いいねが増えれば、より多くの人に知られるようになり、それがしばしばより多くのトラフィックと潜在的な顧客につながります。

幸いなことに、WordPressサイトに1つ追加するのは、思っているよりも簡単です！さまざまなFacebook統合方法を試しましたが、非常にうまく機能するものがいくつか見つかりました。

このチュートリアルでは、WordPressにFacebookいいねボタンを追加する方法を説明します。テスト済みの最良の方法を共有するので、ソーシャルエンゲージメントを活用してWordPressサイトを成長させることができます。📈

WordPressにFacebookいいね！ボタンを追加する方法

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アカウントのパスワードを入力し、「送信」ボタンをクリックしてください。

Facebookのパスワードを再入力してください

その後、アプリダッシュボードが表示されます。

ここから、左側のメニューから 設定 » 基本 に進むことができます。

基本設定ページに移動

「設定」ドロップダウンを展開し、「基本」をクリックします。

ここで、「アプリID」と「アプリシークレット」が表示されます。

「いいね！」＆共有プラグインの設定にこの情報を入力できるようになりました。

アプリ ID とシークレットをコピーする

Facebookいいねボタンのカスタマイズを完了する

まず、「App ID」をコピーして、Like & Share » Settingsページを開いているタブまたはウィンドウに戻ります。次に、「App ID」を該当するフィールドに入力するだけです。

次に、Meta for Developersページから「アプリシークレット」データをコピーし、いいね！＆共有プラグインの設定に貼り付ける手順を繰り返します。

Facebookいいね！ボタンをカスタマイズする

それが完了したら、プロフィールURLと共有ボタンと一緒にFacebookのいいね！ボタンを表示するかどうかを選択できます。

Facebook の「いいね！」ボタンのサイズ、コンテンツの前または後の位置、配置を編集する設定もあります。

その他のカスタマイズオプション

プロフィールURLボタンを有効にしている場合は、「プロフィールURLボタン」セクションまでスクロールダウンし、Facebookのユーザー名またはIDを入力できます。

完了したら、変更を保存することを忘れないでください。

これで、プラグインは自動的にFacebookのいいね！ボタンをWordPressウェブサイトに追加し、設定に基づいて配置します。

[fb_button] ショートコードを使用して、サイトのどこにでも Facebook のいいね！ボタンを追加することもできます。

これで完了です！これでサイトにアクセスすると、各投稿に「いいね！」ボタンが表示されます。

Facebookいいねボタンのプレビュー

方法 2: WordPress に Facebook の「いいね！」ボタンを手動で追加する

Facebookのいいね！ボタンを追加するもう1つの方法は、カスタムコードを使用することです。ただし、この方法ではWordPressに直接コードを追加する必要があるため、コード編集に慣れている方のみにお勧めします。

このセクションでは、WPCodeプラグインを使用します。これにより、誰でも簡単にコードをWordPressブログに追加できます。

しかし、まず、Meta for Developersのウェブサイトにある「いいね！ボタン」ページにアクセスし、「いいね！ボタンコンフィギュレーター」セクションまでスクロールダウンする必要があります。

Facebook開発者サイトからコードを取得

次に、「いいね！」する URL フィールドに Facebook ページの URL を入力します。これにより、Facebook のいいねボタンがページに接続されます。

その後、設定を使用して「いいね！」ボタンのレイアウトとサイズを選択するだけです。「いいね！」ボタンのプレビューも表示されます。

プレビューに満足したら、「コードを取得」ボタンをクリックします。これにより、ポップアップウィンドウが表示され、「JavaScript SDK」タブの下に2つのコードスニペットが表示されます。

SDK コードをコピーする

これらのコードスニペットをWordPressテーマに直接追加すると、ウェブサイトが破損する可能性があることに注意してください。さらに、テーマを更新すると上書きされます。

そのため、WPCodeプラグインの使用をお勧めします。このプラグインを使用すると、コードスニペットをウェブサイトに貼り付けることができ、テーマファイルを編集せずにカスタムコードを簡単に管理できます。これにより、WordPressサイトが破損するリスクを回避できます。

WPCodeのホームページ

また、当社のブランドサイト全体でWPCodeを使用して、カスタマイズをスムーズかつ効率的に処理してきました。WPCodeに関する当社の経験の詳細については、WPCodeの完全レビューをご覧ください。

開始するには、WPCode無料プラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するガイドをご覧ください。

📝 注: WPCodeの無料バージョンではカスタムコードスニペットを追加できます。今回はこれを使用します。ただし、WPCode Proにアップグレードすると、完全な改訂履歴やコードのスケジュール設定機能など、追加機能が利用可能になります。

有効化したら、WordPress ダッシュボードから コードスニペット » ヘッダーとフッター に移動できます。

次に、最初のコードスニペットをコピーし、WordPressテーマのheader.phpファイルにある<body>タグの直後に追加する必要があります。コードをコピーして、「Body」セクションに入力するだけです。

このプロセスが完了したら、「変更を保存」ボタンをクリックすることを忘れないでください。

最初のコードをヘッダーセクションに追加

次に、Facebookの「いいね！」ボタンを表示するために、2番目のコードをコピーしてWordPressサイトに貼り付ける必要があります。

これを行うには、WordPress管理パネルから コードスニペット » スニペットを追加 に移動します。または、WPCodeダッシュボードの「新規追加」ボタンをクリックするだけです。

WPCodeで「新規スニペットを追加」をクリック

次の画面で、WPCodeはプリビルドライブラリからスニペットを選択するか、新しいカスタムコードを追加することを許可します。

「カスタムコードを追加（新規スニペット）」オプションを選択し、「スニペットを使用」ボタンをクリックします。

WPCode にカスタムコードを追加する

その後、カスタムコードに名前を付け、「コードプレビュー」セクションの下に2番目のコードスニペットを入力できます。

「コードの種類」ドロップダウンメニューをクリックし、コードの種類として「HTMLスニペット」を選択してください。

2番目のコードを入力し、コードタイプを選択してください

次に、「挿入」セクションまでスクロールダウンして、Facebookいいねボタンを表示したい場所を選択できます。

例えば、コンテンツの前に表示したいとします。

「場所」ドロップダウンメニューをクリックし、「ページ、投稿、カスタム投稿タイプ」の下にある「コンテンツの前に挿入」オプションを選択するだけです。

いいね！ボタンの場所を選択

完了したら、「スニペットを保存」ボタンをクリックできます。

トグルをクリックして、「非アクティブ」から「アクティブ」に切り替える必要もあります。

コードスニペットWPCodeを保存して有効化

これで完了です。コードを入力すると、Facebookの「いいね！」ボタンがウェブサイトに表示されます。

ボーナスのヒント：オープングラフメタデータとは何ですか？WordPressにどのように追加しますか？

Open Graphは、FacebookがWordPressサイトのページまたは投稿に関する情報を収集するのに役立つメタデータです。このデータには、サムネイル画像、投稿/ページタイトル、説明、作成者が含まれます。

Facebook はタイトルと説明フィールドをプルアップするのが非常に賢いです。ただし、投稿に画像が複数ある場合、共有時にサムネイルが正しく表示されないことがあります。

すでにAll in One SEO (AIOSEO)プラグインを使用している場合は、これを簡単に修正できます。

WPBeginnerでは、FacebookやXのOpenGraph設定の管理にAIOSEOプラグインを使用しており、その他のSEO対策も行っています。私たちはこれを高く評価しており、詳細についてはAIOSEOの詳細レビューをご覧ください。

これを行うには、まず**すべてのSEOツール » ソーシャルネットワーク**に移動し、Facebookタブに切り替えます。

次に、「画像をアップロードまたは選択」ボタンをクリックして、記事にOpen Graph画像がない場合に「デフォルトの投稿Facebook画像」を設定します。

デフォルトのFacebook画像をアップロード

それに加えて、個々の投稿またはページごとにオープングラフ画像を設定することもできます。

投稿を編集する際に、コンテンツエディターのAIOSEO設定セクションまでスクロールダウンします。次に、「ソーシャル」タブに切り替えて、サムネイルのプレビューを確認できます。

AIOSEOソーシャルタブ

次に、「画像のソース」オプションまでスクロールします。次に、投稿のオープングラフ画像を選択してください。

例えば、Open Graphのサムネイルとして使用する画像として、「添付画像」、「コンテンツ内の最初の画像」、または「カスタム画像」を選択できます。

オープングラフの画像ソース

詳細およびOpen Graphメタデータを追加するその他の方法については、WordPressにFacebook Open Graphメタデータを追加する方法に関するガイドをご覧ください。

追加リソース：WordPress ウェブサイト向けのその他のソーシャルメディアガイド

この記事が WordPress に Facebook のいいねボタンを追加する方法を学ぶのに役立ったことを願っています。次に、次のガイドも参照してください。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。

WPBeginnerで現在人気があります！

開示: 当社のコンテンツは読者によってサポートされています。これは、一部のリンクをクリックすると、手数料が発生する可能性があることを意味します。WPBeginnerがどのように資金調達されているか、なぜそれが重要なのか、そしてどのように私たちをサポートできるかを確認してください。こちらが当社の編集プロセスです。

究極のWordPressツールキット

無料のツールキットにアクセスしましょう - すべてのプロフェッショナルが持つべきWordPress関連の製品とリソースのコレクションです！

今すぐダウンロード

読者とのインタラクション

177 コメント返信する

  1. @artist74 正確なポイントはありません。なぜなら、それは変動するからです。正確なポイントは、コードを表示したい場所によって決まります（例えば、投稿の前/投稿の後/投稿内など）。それを決定したら、CSSでさらにスタイリングすることもできます！

    返信する

  4. XFBML バージョンについて何かアドバイスはありますか？Facebook 開発者ページからコードをそのままコピーしましたが、何かする必要はありますか？

    返信する

  7. wordpress.com を利用しています。Facebookの「いいね！」ボタンの追加方法が全く分かりません。single.pnp オプションを探そうとしていますが、どこにあるのか、どこから始めれば良いのか、ヒントが必要です。Appearance（外観）からTheme（テーマ）に進んだのですが、その後どうすれば良いのでしょうか？アドバイスをいただけますでしょうか？

    返信する

  9. 投稿の上部と下部のどちらにFacebookいいねボタンを追加するか迷っているので、両方の場所に設置しました。1つの投稿に2つのいいねボタンがあると問題が発生する可能性があることを誰か知っていますか？

    返信する

  10. こんにちは、指示通りにコードを single.php ファイル内のループ内に配置しました。「いいね！」をすると、すべて正しく機能しますが、FBのウォール上の投稿のタイトルが問題です。

    例えば、MyWebiste.comで、MyPostというタイトルの投稿にいいね！しました。

    FBのウォールには、「MyWebisteのMyWebiste.com」と表示され、「MyWebiste.comのMyPost」とは表示されません。

    ただし、「MyWebsite」のリンクは、それぞれの記事「MyPost」に正しくリンクしています。

    私にとっては、コードはうまく機能し、正しい記事を取得していることを意味しますが、記事のタイトルではなく、FBウォールに投稿のタイトルを表示するために他に何かする必要があるのか、それとも正しいリンクだけが表示されるのかを調べています。

    何か提案があれば幸いです。
    ありがとうございます。

    返信する

    • それは奇妙ですね。ページのタイトルが表示されるはずなのに。しかし、この問題をオーバーライドして修正するために、この記事にあるリソースリンクを参照してください。og:title メタタグを追加する必要があります。

      返信する

      管理者

  11. こんにちは。
    私はサイトのオーナーで、各投稿の「いいね！」ボタンをクリックした人が誰なのかを知りたいと思っています。単なる人数ではなく。それは可能ですか？

    返信する

  12. ガイドをありがとうございます！個々のページに「いいね！」ボタンを追加することには成功しましたが、すべての投稿を集約するメインサイトに追加するのにまだ問題があります。どのページに追加すればよいか、どこに追加すればよいか分かりますか？

    再度感謝します。
    アーロン

    返信する

  13. やあ！

    私の問題は、自分のサイト（kukkold.huという名前です）で投稿に「いいね！」をすると、Facebookのプロフィールページに、kukkold.huというサイトのkukkold.huリンクに「いいね！」したと表示されることです。これはすべての投稿で発生するため、投稿のリンクや名前ではなく、常にサイトのメインページに「いいね！」してしまいます。何が問題なのでしょうか？様々な「いいね！」プラグインを試しましたが、コードを直接ループに挿入しましたが、問題は常に同じで、本当に迷惑です。テストのために、ID)); ?>ブロックのスペースに特定のパーマリンクを書き込みましたが、問題は再び同じでした。
    いいね！カウンターは正常に機能しているので、どの投稿が何回「いいね！」されたかは認識しています。
    どうすればよいですか？助けてください！

    ありがとうございます！

    返信する

  14. wordpress.com を使用していますが、ブログに Facebook のいいね！ボックスを追加しようとしていますが、機能しません。フォーラムで、wordpress.com は iframe コードを読み込めないと言っているのを見ました。それは本当ですか？何か解決策はありますか？

    返信する

  15. あなたがおっしゃったようにループにコードを追加しましたが…何も起こりません!! ループのさまざまな部分で何度も試しましたが…うまくいきません!! 何か提案はありますか？ありがとう

    返信する

  16. これは素晴らしいですが、不具合に遭遇しています。コードは正常に機能していますが、いいねを押すと、特定の投稿を「いいね」する代わりに、親ホームページを「いいね」してしまいます。Facebookフィードにもホームページだけが表示されます。この問題に遭遇したことはありますか、そしてどのように修正できますか？

    ありがとうございます！

    返信する

  17. 本当にありがとうございます。

    iframe を使用していますか？（single.php 内で、header.php のメタタグと共に）

    FacebookのメタタグにあるURLが、ここで提供されている編集済みいいねボタンの使用を妨げているのではないかと疑問に思っています。

    本当にありがとうございます、

    ウィル

    返信する

  18. この素晴らしいリソースをありがとうございます！いくつかのプラグインを試しましたが、うまくいきませんでした。その後、あなたのチュートリアルを見つけ、コードを編集しただけで、うまくいきました！成功です！

    ありがとうございます！

    返信する

  19. Facebookボタンのレイアウトについて質問があります。
    友人がブログのコーディングを依頼してきて、この写真を見せて、このようなカスタムいいねボタンを作成できるか尋ねられました。http://www.andreaskoutsoukos.com/images/others/facebook_like.jpg。
    可能でしょうか、またどのようにすればよいですか？

    もし誰か知っている人がいれば。

    返信する

  21. こんにちは！

    このコードをありがとうございます。しかし、うまくいかないことがあります…
    例えば、投稿にアクセスすると、「いいねボタンと最初の〜メッセージ」と表示されます。OK。いいですね！今のところ誰も「いいね」していませんが、問題ありません。私が最初になります…なのでクリックして「いいね！」と。そして！わあ！実際には178人がこれを「いいね」しているのに、私が最初に「いいね」するまで見えませんでした。わかりますか？私の英語はあまり得意ではありませんが、私が何を話しているのか理解していただけると嬉しいです…

    私のページにアクセスする時間があれば、そして任意の単一の投稿で、あなたは「いいね！」ボタンと「最初の一人になろう…」というメッセージを見つけるでしょう。しかし、もしあなたがそれを気に入ったなら、あなたが最初ではなかったことを発見するでしょう！ :)

    返信する

  22. こんにちは、

    いいねボタンは表示されるのですが、クリックしても何も起こりません？？

    これについてアドバイスをいただけますか…
    Facebookの「いいね！」プラグインをインストールしましたが、全く同じ問題が発生しました。

    ありがとう

    返信する

      • OK！もういいです！IEでは何かを貼り付けるたびにジャンプするので、「the-content」の部分をどこかで2重にしてしまったのだと思います。

        古い single.php を置き換え、あなたのコードを再度貼り付けました（“the-content”の前と後ろの両方で、どちらでもうまく機能します！

        コードに感謝します！

        返信する

  26. 本当にありがとうございます。WordPressを学び始めたばかりで、初心者にとってあなたのサイトは非常に役立つことが分かりました。頑張ってください。

    返信する

  31. コードにボタンを追加しましたが、ブログ記事に表示されます。しかし、それをクリックしても、私のFacebookプロフィールに私がそれを好きになったことが反映されません？何か間違っていますか？フィードで私がそれを好きになったことが表示されるはずですよね？

    返信する

  34. single.php にコードを追加しましたが、すべての投稿にボタンが表示されません。
    すべての投稿にコードを追加すると (HTML タブから)、ボタンは表示されますが、問題が発生しました。
    なぜこうなるのですか？テーマに依存しますか？

    返信する

    • すべての単一投稿ページに表示されます。カテゴリページやインデックスページなど、すべてのページに表示したいという意味であれば、投稿ループ内のindex.phpにコードを貼り付ける必要があります。

      返信する

      管理者

      • いいえ、投稿には表示されず、ページには表示されないということです。あるいは、single.phpの間違った場所に配置したのかもしれません。single.phpのどこにでもコードを貼り付けることは可能ですか？
        ありがとうございます。

        返信する

  35. これは愚かな質問かもしれませんが、あなたが与えた指示は、この投稿の上部にある小さな「サムズアップ」グラフィックとテキスト（184人がこれを気に入りました。友達の中で最初にクリックしましょう）に関連していますか？それとも、投稿の左側に表示される大きな正方形のグラフィック（tweetmemeボタンの下に表示され、45シェアと書かれているもの）用ですか？

    ブログに大きな正方形のグラフィックを配置し、Tweetmemeボタンの横に表示したいのですが、どうすればよいですか？チュートリアルがあれば教えていただけますか？

    何かアドバイスがあれば、本当にありがとうございます！

    返信する

  38. コードを追加しましたが、個別の投稿にアクセスすると、Facebookの「いいね！」ボタンのみが表示され、閲覧者は実際の投稿に移動しません。そのため、閲覧者が投稿にアクセスすると、それが失われてしまいます。何か提案はありますか？

    返信する

  39. 皆さん、こんにちは。

    「最初の1人になりましょう…」というフレーズなしで、ボタンと「いいね！」した人の数のみを使用するブログが増えているのを見かけます。

    どうして可能なのでしょうか？

    ありがとう

    返信する

  43. 多くのサイトでページのトップにボタンが追加されているのを見かけました。しかし、読者が記事を読み終えた後にスクロールアップせずにクリックできるように、ページの最下部にボタンを配置する方が良いアイデアではありませんか？

    返信する

      • Re: Atahaulpa – Heatherと同じ問題を抱えていました。解決策：ダッシュボードで、外観 – Atahaulpaテーマオプション – スタイルに移動し、中央の列を編集します。「The LOOP」セクションに貼り付けます。見事に機能します！

        返信する

  46. 最近、ますます多くのサイトでこのFacebookの「いいね！」ボタンが表示されるのに気づき、素晴らしいアイデアだと思います。今、実装できるかどうか見てみましょう…ブログを完全に破壊することなく（コードをいじり始めると、何度かどれだけ危なかったか驚くでしょう – プログラマーの失敗）。

    返信する

  48. 記事は素晴らしいのですが、いくつか問題が発生しました。single.phpファイルがどこにあるのか分かりません lol。教えていただけますか？WordPress.comを使用していますが、それが違いを生むかどうかは分かりません。

    ありがとうございます！

    返信する

返信する

コメントいただきありがとうございます。すべてのコメントは、コメントポリシーに従ってモデレーションされ、メールアドレスは公開されません。名前フィールドにキーワードを使用しないでください。個人的で意味のある会話をしましょう。

Copyright © 2009 - 2026 WPBeginner LLC. All Rights Reserved. WPBeginner® は登録商標です。

管理元：Awesome Motive | SiteGroundによるWordPressホスティング

WordPress® の商標は WordPress Foundation の知的財産です。このウェブサイトでの WordPress® およびその名称の使用は、識別目的のみであり、WordPress Foundation による承認を意味するものではありません。WPBeginner は WordPress Foundation によって承認、所有、または提携されていません。

私は…について助けが必要です

人気の検索:

ブログの始め方 WordPress SEO WordPressのパフォーマンス WordPressのエラー WordPressセキュリティ オンラインストアの構築