Facebookの「いいね」ボタンをWordPressで設定する方法
- 2012年 5月10日
- 投稿者 : admin
Facebookの「いいね」ボタンをWordPressで設定する方法。
ちょいと面倒です。
まず、
OPGの設定
Create New Appにて、APP IDの取得する。
App Name：サイト名
を入力し、続行をクリック。
OGPの設定については「Facebook の OGP 設定の有無による違い」で詳しく解説しています。
APP IDが表示されているのでメモ。
ウェブサイトにサイトURLを入力。
「変更を保存」する。
Admin Userのidを確認する。
http://graph.facebook.com/xxxxxx
xxxxxの部分に自分のfacebook usernameを入力しブラウザで開く。
（usernameがわからない場合、facebookにログインして自分の名前をクリックするとURLに表示されます。
取得していなければ、http://www.facebook.com/usernameで設定する。）
すると以下が表示される。
{
"id": "123456789",
"name": "name_ab",
"first_name": "name_a",
"last_name": "name_b",
"link": "http://www.facebook.com/xxxxx",
"username": "xxxxx",
"gender": "sex",
"locale": "ja_JP"
}
一番上のidをメモる。
WordPressに「Open Graph protocol」というプラグインをインストール
Open Graph protocolの設定画面にて
Admin User(s)：123456789
(http://graph.facebook.com/xxxxxxで確認したid)
Application ID：OPGの設定で取得したAPP IDを入力
「変更を保存」する。
すると、header部分に以下が記述される。
<meta property="og:title" content="" /> <meta property="og:type" content="blog" /> <meta property="og:url" content="" /> <meta property="og:image" content="" /> <meta property="og:site_name" content="" /> <meta property="fb:admins" content="youradmins" />
facebookのいいねボタン設定
facebook Like Button
以下を自分好みに変更する。
URL to Like：サイトURL
Send Button：Sendボタンの有無
Layout Style：ボタンのデザイン
Width：設置する幅
Show Faces：いいねボタンをクリックした人の写真
Verb to display：「いいね」か「おすすめ」の選択
Color Scheme：色の選択
Font：フォントの選択
をして、「Get Code」をクリックする。
すると、以下が表示される。
まず、以下をbodyの下にペーストする。
（HTML5の場合を表示。おそらくHTML5が無難かと・・・）
<div id="fb-root"></div>
<script type="text/javascript">// <![CDATA[
(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=428222087195989"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));
// ]]></script>
さらに、以下を「いいね」ボタンを設置したい場所に記述する。
WordPressの場合
<div class="fb-like" data-href="<?php the_permalink(); ?>" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false"></div>
（これは、ボタンの設定によって異なります。
data-href=の部分のURLを”“に変更すればOK）
これで、「いいね」ボタンとOGPの設定は終了。
最後に
OGPが正しく動作しているかどうか確認
facebook デバッガー
エラーがでなければOK。
![WordPress Free Theme [Berlin]](http://webit.smart-ness.net/wp-content/uploads/2010/10/Berlin-400x275.png "WordPress Free Theme [Berlin]")
![WordPress Free Theme [Monochrome Pro]](http://webit.smart-ness.net/wp-content/uploads/2010/10/Monochrome-Pro-400x275.jpg "WordPress Free Theme [Monochrome Pro]")
![WordPress Free Theme [F8 Lite]](http://webit.smart-ness.net/wp-content/uploads/2010/10/F8-Lite-400x285.png "WordPress Free Theme [F8 Lite]")
