2012.09.21
facebook

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

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

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

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

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

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

  • 4.ボタンの幅をpxで入力します。後で変更できるのでそのままでもOKです。
  • 5.コメントした人のアイコンなどを表示させるかどうかです。今回はチェックを外します。
  • 6.ボタンに表示される文字を選びます。likerecommendedを選びます。ブラウザの言語に自動的に変換されるようです。日本語に変換されるといいね推奨になります。
  • 7.ボタンの色合いをlightdarkで選びます。
  • 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が入っています。

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

関連する記事

コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP