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

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 管理画面の「いいね!&共有」設定ページを開く必要があるからです。

ここから、アプリの種類を選択する必要があります。「ビジネス」をアプリの種類として選択し、「次へ」ボタンをクリックしてください。

アプリの種類を選択

次に、アプリに関する基本的な情報を提供する必要があります。

アプリの表示名を入力でき、[App contact email]フィールドに正しいメールアドレスが表示されることを確認してください。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いいねボタンを追加する別の方法は、カスタムコードを使用することです。ただし、この方法ではコードをWordPressに直接追加する必要があるため、コード編集に慣れている方のみにお勧めします。

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

まず、Meta for Developersのウェブサイトにある「いいね!」ボタンページにアクセスし、「いいね!」ボタンコンフィギュレーター」セクションまでスクロールしてください。

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

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

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

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

SDK コードをコピーする

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

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

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などのOpen Graph設定を管理するために、他のSEO対策と並行してAIOSEOプラグインを使用しています。私たちはこのプラグインを非常に気に入っており、詳細については当社の詳細なAIOSEOレビューをご覧ください。

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

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

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

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

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

AIOSEOソーシャルタブ

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

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

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

詳細およびオープングラフメタデータを追加する代替方法については、WordPressテーマにFacebookオープングラフメタデータを追加する方法に関するガイドを参照してください。

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

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

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterFacebookでもフォローできます。

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

究極のWordPressツールキット

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

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

177 CommentsLeave a Reply

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

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

  3. 素晴らしい投稿ですね…
    wordpress.comにFacebookいいねボタンを追加するにはどうすればいいですか?
    ありがとうございます。

    私のブログをご覧ください。^_^

  4. こんにちは、

    WordPressブログのコメントにいいねボタンを追加する方法はありますか?

    ありがとう

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

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

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

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

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

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

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

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

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

      管理者

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

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

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

  10. やあ!

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

    ありがとうございます!

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

    • はい、その通りです。WordPress.comサイトでは非常に制限があります。解決策は、セルフホスト型に移行することです。当社の無料セットアップサービスをご利用ください。

      管理者

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

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

    ありがとうございます!

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

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

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

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

    Wil

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

    ありがとうございます!

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

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

  17. こんにちは!

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

    If you find a time to go on my page, and then on any single post, you will see Like button and message Be the first… but if you like it, than you’ll find out, that you weren’t the first! :)

  18. こんにちは、

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

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

    ありがとう

    • 私たちのサイトではこのコードを使用しているので、何がエラーの原因になっているのか分かりません。どのようなエラーか具体的に教えていただけますか?

      管理者

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

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

        コードに感謝します!

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

  20. サイドバーにFacebookで最もいいね!されている投稿を表示する方法はありますか?最も頻繁に共有されているものを確認できると便利だと思います。

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

  22. シェアしてくれてありがとうございます。リツイートとFacebookのシェアボタンをブログに常に表示させるにはどうしましたか?

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

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

      管理者

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

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

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

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

    • このチュートリアルはいいねボタンに関するものです。このサイトの検索ボタンを使用して、Facebook共有ボタンを探してください。それに関するチュートリアルが見つかるはずです。

      管理者

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

    • 何を言っているのか全く分かりません。お問い合わせフォームをご利用いただき、あなたのサイトへのリンクを添えて、何について話しているのか教えてください。

      管理者

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

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

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

    ありがとう

  27. こんにちは、

    投稿タイトルの後にサイトのURLを追加するのはどうですか?例えば、次のようなものです:XがZ.comでYを気に入っています

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

  29. 残念ながら、私のAtahualpaテーマにはsingle.phpファイルがありません。コードを他にどこに置けばよいか分かりません。何かアイデアはありますか?

    • Atahualpaテーマについてはあまりよく知りません。彼らのサポートフォーラムで質問するか、メールでお問い合わせいただければ、お客様のサイトを詳しく確認できます。

      管理者

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

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

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

    ありがとうございます!

  32. このチュートリアルをありがとうございます。
    実装方法をずっと探していて、ここで答えを見つけました。

    素晴らしい!

返信する

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