WordPressのブログにFacebookのLike(いいね)ボタンを付ける方法。


まだまだ日本での知名度はそこまででもありませんが、世界的にはダントツのシェアを誇るSNS「Facebook」。その機能の中に「Like(いいね)」という、Twitterでの「Favorite(通称:ふぁぼ)」のようなものがあります。

自分も最近Facebookを利用し始めたこともあって、のらりくらり.comにもこの「Likeボタン」を付けることにしました。
まずはサイトにアクセス
Like Button – Facebook Developers

Facebookは、開発者向けにソースを自動生成してくれるシステムを用意してくれています。上記のサイトにアクセスしましょう。こちらに、以下のようなフォームがありますので、解説を参考に入力してください。


1.URL to Like
LikeするサイトのURLを入力します。WordPressの場合、各記事のURLを自動生成するには以下のタグを使います。

<?php the_permalink() ?>

ただし、これをフォームに直接入力すると自動的にURLエンコードされてしまいます。

<iframe src="http://www.facebook.com/plugins/like.php?
href=%3C%3Fphp+the_permalink%28%29+%3F%3E
&amp;layout=standard&amp;(続く)

「<?」「%3C%3F」に置き換わってしまっていますよね。このままだと正しく動作しません。対策として、ソースを入手した後に直接上記のタグを入力するという方法を取りましょう。

<iframe src="http://www.facebook.com/plugins/like.php?
href=<?php the_permalink() ?>&amp;layout=standard&amp;(続く)

こう書き換えればOKです。
2.Layout Style
ここでは表示形式を決めます。

standard

button_count

お好みの方をお選びください。
3.Show Faces
Show Facesをオンにすると、Likeしたユーザーのアイコンが下部に表示されるようになります。


こんな感じですね。

Show Facesをオンにしてもアイコンが表示されない場合は、入手したソースの中の「height」の値をチェックしてみてください。縦幅の指定が小さすぎて、アイコンが表示されない場合があります。
4.Width
横幅を設定します。自分のブログの、本文カラムに収まる数値を指定しましょう。
5.Verb to display
ボタンの中の文章を、「Like」もしくは「Recommend」から選択します。Likeボタンは日本語に対応しているようで、日本語のサイトに設置すると自動的に前者は「いいね」後者は「おすすめ」になります。
6.Font
ボタンと、横に表示される文章の文字フォントを選びます。今のところ、arial、lucida grande、segoe ui、tahoma、trebuchet ms、verdanaの6種から選べます。
7.Color Scheme
ボタンの色を「light」もしくは「dark」から選択します。明るさが変わりますね。
ソースを入手しましょう
最後に「Get Code」をクリックすると、ソースが入手できます。僕の場合は以下の通りです。(「1.URL to Like」の書き換え作業が完了した状態です。)

<iframe src="http://www.facebook.com/plugins/like.php?href=
<?php the_permalink() ?>&amp;layout=standard
&amp;show_faces=false&amp;width=450
&amp;action=like&amp;font=verdana
&amp;colorscheme=light&amp;height=35"
scrolling="no" frameborder="0" style="border:none;
overflow:hidden; width:450px; height:35px;"
allowTransparency="true"></iframe>

これを、ダッシュボードの「外観 > テーマ編集」から任意のphpファイルに貼り付ければ、Likeボタンを設置することができます。

ここは使用しているテーマによって違うんですが、僕の場合は「home.php」と「index.php」にソースを貼り付けました。単一記事の表示に、「single.php」を使用しているテーマもあるようです。また、個別ページにも設置したい場合は「page.php」にソースを貼りましょう。

これで完了です。Facebookはこれから日本でもユーザーが増えそうですし、ちょっと先取りして「Likeボタン」を設置してみてはいかがでしょうか。

WordPressのブログにFacebookのLike(いいね)ボタンを付ける方法。 - のらりくらり.com Share on Tumblr

関連記事