WordPressサイトが成功するための簡単な真実の1つ：訪問者があなたのコンテンツに簡単にエンゲージできるようにすることが成長の鍵です。しかし、多くのサイト所有者は、Facebookの「いいね！」ボタンを追加するという簡単なことを見落としています。
小さな追加機能のように思えるかもしれませんが、リーチを拡大するための最も強力なツールの1つです。いいねが増えれば、より多くの人に知られるようになり、それがしばしばより多くのトラフィックと潜在的な顧客につながります。
幸いなことに、WordPressサイトに1つ追加するのは、思っているよりも簡単です！さまざまなFacebook統合方法を試しましたが、非常にうまく機能するものがいくつか見つかりました。
このチュートリアルでは、WordPressにFacebookいいねボタンを追加する方法を説明します。テスト済みの最良の方法を共有するので、ソーシャルエンゲージメントを活用してWordPressサイトを成長させることができます。📈
WordPressにFacebookいいね！ボタンを追加する理由
Facebookは世界で最も人気のあるソーシャルメディアプラットフォームの1つです。多くの企業がFacebookを利用して顧客とつながり、製品を宣伝しています。
WordPressウェブサイトにFacebookの「いいね！」ボタンを追加すると、エンゲージメントを高めることができます。また、コンテンツをFacebookプロフィールで共有することを促し、サイトに新しいユーザーを引き付けることもできます。
Facebookのいいね！ボタンを使用して、ソーシャルフォロワーを増やし、コミュニティを構築できます。これにより、製品やサービスへの認知度が高まり、コンバージョン率が向上します。
これを踏まえ、WordPressウェブサイトにFacebookいいね！ボタンを追加する方法をご紹介します。このガイドで説明する主な方法を以下に示します。
- 方法1：プラグインを使用してWordPressにFacebookいいね！ボタンを追加する
- 方法 2: WordPress に Facebook の「いいね！」ボタンを手動で追加する
- ボーナスのヒント：オープングラフメタデータとは何ですか？WordPressにどのように追加しますか？
- 追加リソース：WordPress ウェブサイト向けのその他のソーシャルメディアガイド
準備はいいですか？プラグインまたはカスタムコードを使用して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アカウントのパスワードを入力して、「送信」ボタンをクリックしてください。
その後、アプリダッシュボードが表示されます。
ここから、左側のメニューから 設定 » 基本 に進むことができます。
「設定」ドロップダウンを展開し、「基本」をクリックします。
ここで、「アプリ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いいねボタンを追加する別の方法は、カスタムコードを使用することです。ただし、この方法ではコードをWordPressに直接追加する必要があるため、コード編集に慣れている方のみにお勧めします。
このセクションでは、WPCodeプラグインを使用します。これにより、誰でも簡単にコードをWordPressブログに追加できます。
まず、Meta for Developersのウェブサイトにある「いいね！」ボタンページにアクセスし、「いいね！」ボタンコンフィギュレーター」セクションまでスクロールしてください。
次に、「いいね！」する URL フィールドに Facebook ページの URL を入力します。これにより、Facebook のいいねボタンがページに接続されます。
その後、設定を使用して「いいね！」ボタンのレイアウトとサイズを選択するだけです。「いいね！」ボタンのプレビューも表示されます。
プレビューに満足したら、「コードを取得」ボタンをクリックします。これにより、ポップアップウィンドウが表示され、「JavaScript SDK」タブの下に2つのコードスニペットが表示されます。
これらのコードスニペットをWordPressテーマに直接追加すると、ウェブサイトが破損する可能性があることに注意してください。さらに、テーマを更新すると上書きされます。
そのため、WPCode プラグインの使用をお勧めします。このプラグインを使用すると、テーマファイルを編集することなく、コードスニペットをウェブサイトに貼り付け、カスタムコードを簡単に管理できます。これにより、WordPressサイトが破損するリスクを回避できます。
また、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などのOpen Graph設定を管理するために、他のSEO対策と並行してAIOSEOプラグインを使用しています。私たちはこのプラグインを非常に気に入っており、詳細については当社の詳細なAIOSEOレビューをご覧ください。
これを行うには、まず**すべてのSEOツール » ソーシャルネットワーク**に移動し、Facebookタブに切り替えます。
次に、「画像をアップロードまたは選択」ボタンをクリックして、記事にOpen Graph画像がない場合に「デフォルトの投稿Facebook画像」を設定します。
それに加えて、個々の投稿またはページごとにオープングラフ画像を設定することもできます。
投稿を編集する際は、コンテンツエディターのAIOSEO設定セクションまでスクロールダウンしてください。次に、「ソーシャル」タブに切り替えると、サムネイルのプレビューが表示されます。
次に、「画像のソース」オプションまでスクロールします。次に、投稿のオープングラフ画像を選択してください。
例えば、Open Graphのサムネイルとして使用する画像として、「添付画像」、「コンテンツ内の最初の画像」、または「カスタム画像」を選択できます。
詳細およびオープングラフメタデータを追加する代替方法については、WordPressテーマにFacebookオープングラフメタデータを追加する方法に関するガイドを参照してください。
追加リソース：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
管理者
Macdonald
こんにちは、皆さん。
Blog Bank Wordpressのテーマを使用していますが、Facebook、Twitter、Google+、LinkedInボタンがうまく組み込まれていますが、意図したとおりに機能させることができません（私の各ソーシャルサイトを参照してください）。方法があれば知りたいです。
私たち初心者にとって、継続的に素晴らしい仕事をしてくださっていることに感謝します。
WPBeginnerサポート
この問題については、テーマのサポートに問い合わせる必要があります。テーマ自体にエラーがあるのか、それとも問題を解決する方法なのかを教えてくれるはずです。
管理者
ステファン・ンゲメナ
管理者様、WordPressブログでヘッダーとフッタープラグインを使用しています。フッターにコードを追加したところ、ブログの末尾にいいねボタンが表示されています。各投稿の直後に表示されるようにするにはどうすればよいですか？ありがとうございます。
Mary
The WordPress plugin worked perfect. Thanks for tutorial.
soshail akash
I am unable to make the plugin work on Archives
It works perfectly fine on Single Posts.
ご協力いただけると大変助かります
Jonathan
「URLフィールドは空のままで構いません。URLはWordPressで動的に入力されます。」とおっしゃいました。
その後、記事に URL を動的に入力するためのコードを記載してくれることを期待していました。
data-hrefを空白のままにして、追加のアクションなしでURLは動的に入力されますか？
Vipin
投稿メタ情報にFacebookのいいね数を表示するにはどうすればよいですか。
このように：AdminがTechnologyに投稿しました 日付 | 2件のコメント | 5件のいいね
Sandeep kumar
Jetpackプラグインはいいねボタンも提供しています。
Ahmed
ボタンのサイズをもっと大きくしたいです
Toon
今のところ順調で、これは機能します。
しかし、ボタンを押した瞬間にそのポップアップウィンドウを削除するにはどうすればよいですか。
Len Vanderlinde
Wordpressを使用して、営利目的ではない個人のウェブサイト（ブログではなく）をセットアップしました。私の非常に限られたウェブ知識でそれができたことに非常に感銘を受けています。Facebookの「いいね！」ボタンを追加したいのですが、私のホームページではあなたの指示が機能しませんか？
Lenより
suzannah
ありがとうございます。これは見事に機能しました。投稿だけでなく、ページでもこれを実行する方法はありますか？ありがとうございます！！！このサイトが一番のお気に入りになりました！
Patrick
こんにちは、
このチュートリアルは私には中国語のように聞こえます。初心者にはない特定の知識を前提とした語彙を使用しています。
「まず、テーマのフォルダにあるsingle.phpファイルを「開きます。次に、投稿ループ内に次のコードを貼り付けます。」
それはどういう意味ですか？
投稿を短く保っていることは理解していますが、多くの場合、本当に短すぎます！
ありがとうございます
mark
こんにちは、
質問です。ここでやったように、FBいいねボタンをGoogle +1ボタンやその他のボタンとインラインで配置するにはどうすればよいですか？
ありがとうございます、
マーク