| ブログトップ | API関連 | CMS関連 | SNS関連 |

いいね!ボタンを設置する方法(facebook)

メモ。

mixiチェックの設置方法と違い、こちらは超簡単!

1.まずこちらへアクセスします。

http://developers.facebook.com/docs/reference/plugins/like 
(facebook DEVELOPERSサイトの Social plugins > Like Buttonページ)

 

2.設定を行います。

  • URL to Like:静的なHTMLなら各ページのURLをひとつひとつ「URL to Like」へ入力する必要がありますがCMSを使用している場合は、とりあえず未入力。
  • Layout Style:ボタンのレイアウトを選択します。(3パターン)
  • Show Faces:チェックを入れておくと、ユーザがボタンを押したときに、そのユーザがfacebookに登録しているプロフィール画像が表示されます。
  • width:幅
  • verb to display:like(いいね)かrecommend(おすすめ)を選択します。
  • Font:フォントのタイプ
  • Color Scheme:色のタイプ

 

3.コードを出力

以上の設定を行ったのち、「Get Code」ボタンを押してください。以下のようなコードが出力されます。

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fexample.com%2Fpage%2Fto%2Flike&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>

これを張り付けるわけですが、CMSの場合は各ページごとにそのページのURLを設定する必要があります。

  

4.記事ページごとにURLを設定する。

3.で記述したコードの赤文字の部分に該当ページのURLが入るように設定してください。
※ただし、URLはurlencodeする必要があります。

例)wordpressの場合は「get_permalink();」を利用します。

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

※追記:echo を付け忘れていました。申し訳ございません;(2010/12/15)

このコードをボタンを設置する部分に張り付けてください。

以上です。

日々の生活にhappyをプラスする|ハピタス

このエントリーをはてなブックマークに追加

LINEで送る

nandani | 2010年12月07日 | コメント(0) | トラックバック(1) | API関連 | CMS関連 | SNS関連

トラックバック

トラックバックURL

トラックバック一覧

[...] < いいね!ボタンを設置する方法(facebook) | ブログトップ | API関連 | [...]

コメントする

※メールアドレスが公開されることはありません。

名前 *
メール*
URL
Copyright(c) 2010 - 2017 ダリの雑記