WordPressにfacebookのイイネ（like）ボタンとshareボタンをつける方法

facebookにはshareボタンとイイネ（like）ボタンがあって、bookmarkletやそのサイトに設置されているボタンを押すことで、自分のfacebookのウォール（掲示板）にリンクが投稿されます。それはフレンドのウォールにも表示されるので、自分がどんな記事が気になっているのかが簡単に伝えることが出来ます。

shareボタンとイイネボタンはどちらも、wordpressのpluginがありますが、pluginだと設置場所を指定することが出来ないため、私はコードをそのまま任意の場所にはりつけて表示させています。

Facebookのいいねボタン

いいねボタン＝likeボタンの設置に関しては非常に簡単。Like Button – Facebook開発者のページに行って、項目を埋めてwordpressのthemeフォルダの中にあるsingle.phpの表示させたい場所にペーストするのみ。

そうすると、この記事の最後にあるように、イイネボタンと「○人が「いいね！」と言っています。「いいね！」をクリックして、友達に知らせましょう。」と表示されます。

気をつけたいのが、Wordpressの個別記事の場合は、URL to Likeのところに、

 
<?php echo urlencode(get_permalink($post->ID)); ?>

と記述しておくこと。そうしないと、個別記事のURLになりません。

<!-- facebookボタン-->
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&layout=standard&show_faces=true&width=450&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:30px;"></iframe>
<br />

このブログに設置したイイネボタンのコードは上の通り。これを押すと、

こういう風にウォールに表示されます。

Facebookのshareボタン

Shareボタンの場合ですが、以前はshareボタンの場合、記事のサムネイルと記事内容、そして自分のコメントがつけられたのですが、現在はイイネボタンでもサムネイルと記事内容、そしてコメントもつけられるのでほとんど違いはないようです。

参考）Facebook、「Like」ボタンの機能を強化–「Share」ボタンの機能を統合 – CNET Japan

これを設置した後で気づいたのですが、likeボタンでもそういえばコメント追加できたのですね。。

<!-- facebook share ボタン-->
<div style="float:left;padding-right:15px; margin-bottom:3px">
<a name="fb_share" type="button_count" share_url="<?php echo urlencode(get_permalink($post->ID)); ?>" href="http://www.facebook.com/sharer.php">Share</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>

コードはこの通り。位置は div styleで調整します。

こういう感じですね。

最近、ちょっとfacebookが面白くなってきました。