WP各記事にfacebookのいいねボタン

当ブログに「いいね」ボタンを設置しました。

WordPressで各投稿記事の下にいいねボタンを設置する方法を説明します。

まずはこちらのフェイスブック開発者ページでコードを取得します。

上記リンクで下へスクロールすると下記の画面が出てきます。

• 1．コードを取得した後に修正するので適当なURLを入れておきます。
• 2．送信ボタンを付けられるようです。今回はチェックを外します。
• 3．設置するボタンの形をstandard、button_count、box_countから選びます。

• 4．ボタンの幅をpxで入力します。後で変更できるのでそのままでもOKです。
• 5．コメントした人のアイコンなどを表示させるかどうかです。今回はチェックを外します。
• 6．ボタンに表示される文字を選びます。likeかrecommendedを選びます。ブラウザの言語に自動的に変換されるようです。日本語に変換されるといいねか推奨になります。
• 7．ボタンの色合いをlightかdarkで選びます。
• 8．フォントを選びます。選べるフォントが英語フォントしかないので今回は選んでません。
• 9．get codeをクリックします。

get codeをクリックすると下記のようにウインドウが出てきます。

IFRAMEを選んで表示されたコードをコピーします。

今回取得したコードは下記のコードです。

<iframe src="//www.facebook.com/plugins/like.php?href=
http%3A%2F%2Fri-mode.com%2Frainbow%2F
&amp;send=false&amp;layout=button_count&amp;
width=450
&amp;show_faces=false&amp;action=like&amp;
colorscheme=light&amp;font&amp;height=21&amp;
appId=あなたのアプリID" scrolling="no" frameborder="0" 
style="border:none; overflow:hidden; 
width:450px; height:21px;" allowTransparency="true"></iframe>

ハイライトした部分を変更します。
2行目は、適当に入力したURLなので、

<?php the_permalink();?>

と変更。
（これでいいねボタンを設置したURLを取得できます。）

4行目は幅です。自分のブログのレイアウトに合わせて変更できます。

高さも指定できるようですが今回は特に指定していません。

また9行目にも幅、高さを指定するところがありますが、そのままでもOKなようです。

そして今回は各投稿記事にいいねボタンを設置ということなので、変更したコードをテンプレートのsingle.phpの設置したい部分にペーストします。

7行目はフェイスブック開発者ページで取得したアプリIDが入っています。

すると↓表示されているかと思います。