2012.09.21
WP各記事にfacebookのいいねボタン
FB ・ WPテクニック ・ WPテーマ作成当ブログに「いいね」ボタンを設置しました。
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 &send=false&layout=button_count& width=450 &show_faces=false&action=like& colorscheme=light&font&height=21& 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が入っています。
すると↓表示されているかと思います。