WordPressにFacebookの「いいね！」ボタンを追加したいですか？
WordPressサイトにFacebookの「いいね！」ボタンを設置することで、ユーザーがシンプルかつ簡単にあなたのコンテンツに「いいね！」や「シェア」をすることができます。これにより、エンゲージメントを高め、より多くのフォロワーを獲得することができます。
この投稿では、WordPressにFacebookの「いいね！」ボタンを追加する方法を紹介します。
なぜWordPressにFacebookの「いいね！」ボタンを設置するのか？
Facebookは、世界で最も人気のあるソーシャルメディア・プラットフォームのひとつです。多くの企業がFacebookを利用して、カスタマイザーとつながり、商品を宣伝しています。
WordPressサイトにFacebookの「いいね！」ボタンを追加することで、エンゲージメントを高めることができます。また、自分のFacebookのプロフィールでコンテンツをシェアしてもらい、サイトに新しいユーザーを呼び込むこともできます。
Facebookの「いいね！」ボタンを使って、ソーシャルフォロワーを増やし、コミュニティを構築することができます。商品やサービスの認知度を高め、コンバージョンを高めることができます。
このガイドでは、WordPressサイトにFacebookの「いいね！」ボタンを追加する方法を紹介します。このガイドで取り上げる方法を簡単に説明します：
準備はいいですか？プラグインやカスタムコードを使って、WordPressにFacebookの「いいね！」ボタンを追加する方法を見てみましょう。
方法1：プラグインを使ってWordPressにFacebookの「いいね！」ボタンを追加する
この方法では、WordPressのプラグインを使ってFacebookの「いいね！」ボタンを追加します。この方法はとても簡単なので、初心者の方におすすめです。
まず最初にBestWebSoftのLike & Shareプラグインをインストールして有効化します。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
有効化した後、WordPressの管理画面から「いいね！＆シェア ” 設定」にアクセスできます。
次に、Facebookの「App ID」と「App Secret」を追加する必要があります。これらの情報をお持ちでない場合は、以下の手順に従ってください。
FacebookのアプリIDとアプリシークレットの作り方
設定」パネルで、Like & Shareプラグインの「App ID」または「App Secret」フィールドの下にある「新規作成」リンクをクリックします。
Meta for Developersのサイトに移動します。アプリIDとシークレットを入力するために、WordPressダッシュボードのいいね！＆シェア設定ページを開く必要がありますので、新しいタブまたはウィンドウでサイトを開くことをお勧めします。
ここから、アプリの種類を選択する必要があります。アプリのタイプとして「ビジネス」を選択し、「次へ」ボタンをクリックします。
次に、アプリの基本情報を提供する必要があります。
アプリの表示名を入力し、「App contact email」フィールドに正しいメールアドレスが表示されていることを確認してください。Facebookは、あなたが現在ログイン中のアカウントのメールアドレスを自動的に選択します。
ビジネスアカウントを選択するオプションもあります。ビジネスマネージャー・アカウントを選択しない」のまま、「アプリを作成」ボタンをクリックします。
すると、ポップアップウィンドウが外観表示されます。ここでFacebookがパスワードの再入力を求めてきます。
これは、アカウント上での悪意ある活動を防ぐためのセキュリティ対策です。Facebookアカウントのパスワードを入力し、「送信」ボタンをクリックしてください。
その後、アプリのダッシュボードが表示されます。
ここから、左側のメニューから「設定 ” 基本」に進むことができます。
ここで、「設定」ドロップダウンを展開し、「基本」をクリックします。ここで、「App ID」と「App Secret」が表示されます。
いいね！＆シェア」プラグインの設定で、この情報を入力できるようになりました。
Facebookの「いいね！」ボタンのカスタマイゼーションを終了する
まず、「アプリID」をコピーし、「いいね！＆シェア」の設定 ページを開いているタブまたはウィンドウに戻ります。そして、「アプリID」をそれぞれのフィールドに入力します。
ここで、開発者向けメタ情報のページから「アプリの秘密」データをコピー＆ペーストして、「いいね！＆シェア」プラグインの設定に貼り付けるステップを繰り返します。
そうしたら、Facebookの「いいね！」ボタンをプロフィールURLとシェアボタンと一緒に表示するかどうかを選択できます。
Facebookの「いいね！」ボタンのサイズ、コンテンツの前後の位置、配置を編集する設定もあります。
プロフィールURLボタンを有効化している場合は、「プロフィールURLボタン」セクションまでスクロールダウンし、Facebookのユーザー名またはIDを入力します。
終わったら、変更を保存するのを忘れないでください。
これで、プラグインが自動的にWordPressサイトにFacebookいいね！ボタンを追加し、設定に基づいて配置します。
また、[fb_button]ショートコードを使って、サイト上の任意の場所にFacebookいいね！ボタンを追加することもできます。
これですべてです！これで、あなたのサイトにアクセスすると、各投稿日に「いいね！」ボタンが表示されます。
方法2：WordPressにFacebookの「いいね！」ボタンを手動で追加する
カスタマイザーボタンを追加するもう一つの方法は、カスタムコードを使うことです。しかし、この方法はWordPressに直接コードを追加する必要があるので、コードの編集に慣れている人にのみお勧めします。
このセクションでは、誰でも簡単にWordPressブログにコードを追加できるWPCodeプラグインを使用します。
その前に、開発者向けサイトの「いいね！ボタン」ページにアクセスし、「いいね！ボタン設定」セクションまでスクロールダウンする必要がある。
次に、「いいね！するURL」フィールドにあなたのFacebookページのURLを入力します。これでFacebookの「いいね！」ボタンがあなたのページに接続されます。
その後、設定を使って「いいね！」ボタンのレイアウトとサイズを選択するだけです。いいね！ボタンのプレビューも表示されます。
プレビューに満足したら、「Get Code」ボタンをクリックしてください。ポップアップ・ウィンドウが表示され、「JavaScript SDK」タブの下に2つのコード・スニペットが表示されます。
これらのコード・スニペットをWordPressテーマに直接追加すると、サイトが壊れてしまう可能性がありますのでご注意ください。また、テーマを更新すると上書きされます。
そのため、WPCodeプラグインの使用をお勧めします。このプラグインを使用すると、コードスニペットをサイトに貼り付けることができ、テーマファイルを直接編集することなくカスタマイザーコードを簡単に管理できます。
開始するには、WPCode無料プラグインをインストールし、有効化する必要があります。詳しくは、WordPressプラグインのインストール方法をご覧ください。
有効化した後、WordPressダッシュボードからCode Snippets ” Header and Footerにアクセスできます。
次に、最初のコード・スニペットをコピーして、WordPressテーマのheader.phpファイルの<body>タグの直後に追加します。コードをコピーして、「Body」セクションに入力するだけです。
このプロセスが完了したら、忘れずに「変更を保存」ボタンをクリックしてください。
次に、2つ目のコードをコピー＆ペーストして、WordPressサイトにFacebookの「いいね！」ボタンを表示させます。
これを行うには、WordPress管理画面からCode Snippets ” + Add Snippetに移動します。または、WPCodeダッシュボードの「新規追加」ボタンをクリックしてください。
次の画面で、WPCodeはビルトインライブラリからスニペットを選択するか、新しいカスタマイザーコードを追加します。
カスタムコードを追加（新規スニペット）」オプションを設定し、「スニペットを使用」ボタンをクリックします。
その後、カスタムコードに名前を付け、「コードプレビュー」セクションに2つ目のコードスニペットを入力します。
コードタイプ」ドロップダウンメニューをクリックし、コードタイプとして「HTMLスニペット」を選択してください。
次に、「インサーター」セクションまでスクロールダウンし、Facebookいいね！ボタンを表示させたい場所を選択します。例えば、コンテンツの前に表示させたいとします。
場所」ドロップダウンメニューをクリックし、「ページ、投稿、カスタム投稿タイプ」の「コンテンツの前に挿入」オプションを選択するだけです。
完了したら、「スニペットを保存」ボタンをクリックします。
また、トグルをクリックして「非アクティブ」から「有効化」に切り替える必要がある。
これだけです。コードを入力すると、あなたのサイトにFacebookいいね！ボタンが表示されます。
オープングラフメタデータとWordPressへの追加方法とは？
オープングラフは、FacebookがWordPressサイトのページや投稿に関する 情報を収集するのに役立つメタデータです。このデータには、投稿サムネイル画像、投稿/ページのタイトル、説明、投稿者が含まれます。
Facebookは、タイトルと説明のフィールドをかなりスマートに表示します。しかし、投稿に複数の画像がある場合、シェアされたときに間違ったサムネイルが表示されることがあります。
すでにAll In One SEO (AIOSEO)プラグインを使用している場合、All In One SEO ” ソーシャルネットワークにアクセスし、Facebookタブをクリックすることで簡単に修正できます。
次に、投稿記事にオープングラフ画像がない場合は、「Upload or Select Image」ボタンをクリックして、「Default Post Facebook Image」を設定します。
そのほか、投稿やページごとにオープングラフ画像を設定することもできる。
投稿を編集する際、コンテンツエディターでAIOSEO設定セクションまでスクロールするだけです。次に、「ソーシャル」タブに切り替えると、サムネイルのプレビューを見ることができます。
次に、「Image Source（画像ソース）」設定までスクロールダウンします。そして、投稿用のオープングラフ画像を選択します。
例えば、オープングラフのサムネイルとして使用する「添付ファイル」、「コンテンツ内の最初の画像」、「カスタマイザー画像」を選択することができます。
オープングラフメタデータの詳細と別の追加方法については、WordPressでFacebookオープングラフメタデータを追加する方法をご覧ください。
この投稿が、WordPressにFacebookの「いいね！」ボタンを追加する方法のお役に立てば幸いです。次は、WordPressでFacebookページのレビューを表示 する方法や、WordPressで使えるソーシャルメディアプラグインをご紹介します。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Earl Jones
I’ve added the wp-like-button to my blog pages and configured it according to directions. The like counter goes up, so I know that readers are clicking the button, but where do I find the names of these readers so that I can follow-up with them?
WPBeginner Support
At this time the plugin does not track that information.
管理者
Michel
Hi Wp Beginner
Just wanna say thank you for all the great articles!
They allready have helped me a lot, easy to understand…..Love it!
Cheers guys, keep on doing like you do
WPBeginner Support
You’re welcome, glad our articles have been helpful
管理者
Macdonald
Hi, all.
I am using Blog Bank Wordpress theme which has nicely built Facebook, Twitter, Google+ and LinkedIn buttons but I cannot seem to make them work as intended (refer to my respective social sites). I would like to know if there is a way to do it.
Thank you for the continual great work you are doing for us, beginners.
WPBeginner Support
You would want to reach out to your theme’s support for this issue and they should be able to let you know if it is an error with the theme itself or a method to resolve the issue.
管理者
stephen Mgbemena
Please admin, I’m using the header and footer plugin on my wordpress blog. I added the code on the footer and it’s showing the like button on the down end of my blog. Please how can I add it so it can show right after every single post. Thanks
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.
Your help would mean a lot
Jonathan
You said “You can leave the URL field empty, as we will dynamically fill in the URL in WordPress.”
I was expecting to article to then say what code to put in in order to dynamically fill the URL.
Does the URL fill dynamically if we leave the data-href blank, with no further action needed?
Vipin
How do I show facebook like counts in the post meta.
Like this: Posted by Admin in Technology on Date | 2 comments | 5 Likes
Sandeep kumar
Jetpack plugin also offers like button.
Ahmed
i want change size of button to be more big
Toon
So far so good, this works.
But how can I get rid of that popup window as soon as you hit the button.
Len Vanderlinde
Have set up a personal web site (not for profit) rather then a blog using Wordpress. Very impressed that I was able to do it with my very limited web knowledge. Would like to add a Facebook like button but your instructions do not work for my home page?
Thanks Len
suzannah
THANK YOU. This worked like a charm. Any ideas how to do this on a page instead of just a post? Thanks!!! This is my new favorite site!
Patrick
Hi,
This tutorial sounds like chinese to me. You use vocabulary which assumes certain knowledge that beginners do not have.
” First open your single.php file in your theme’s folder. Then paste the following code inside your post loop:”
What does that mean?
I understand that you keep your posts short, but very often they are really too short !
Thanks
mark
Hi,
question, how do i inline FB like with Google +1 and other buttons, pretty much as you did here?
Thank you,
Mark