Facebook いいねボタンを設置

| By 2011-01-09T03:10:00+09:00
　 　 　
　

海外では大人気で、最近ではGoogleよりもサイトを広める効果があると言われている「Facebook」の「いいねボタン」を設置しました。

実はこれまでFacebookを利用したことはなかったのですが、ボタンが欲しいという理由だけでアカウントを作っちゃいましたw そもそも「いいねボタンとは？」というのが分かっていない私のような方はこちらもどうぞ。

「Facebook いいねボタンとは」

今回はいいねボタンの設置方法についてご紹介します。（Bloggerの設置サンプルもあります)


Facebookアカウントの作成
Evernote、Twitter、はてなブックマークなどのボタンと違い、Facebookボタンのソース生成を行う場合は、Facebookアカウントが必要です。
「facebook.com」でアカウントを作成してください。（実名登録が必要らしいです。ハンドルネームのemmettとしたいところでしたが、実名で登録しました）
HTMLソースの生成
  1. 「Facebook Developer - Like Button」にアクセスします。
  2. URL to Like に「いいね」の対象URLを入力しますが、とりあえずダミーで良いです。
  3. Layout Styleでボタン形式を指定します。設置幅に余裕がある場合はStandard、ボタン横にカウンタを表示する場合はbutton_count、ボタン上にカウンタ表示する場合はbox_countを選択します。私はbutton_countとしました。
  4. Show Faceをチェックすると、「いいね」を押した時にボタン下に顔写真が出てきます。私は不要なためチェックを外しました。
  5. Widthで幅を指定します。button_countの場合は100pxもあれば大丈夫だと思います。
  6. Verb to displayでボタン名を変更できます。「like（いいね!）」「recommend（おすすめ）」のどちらか
  7. Fontの指定は特にいらないと思いますが、必要な人は指定してください。
  8. Color Schemeでボタン色合いの「明るい／暗い」を選べます。私はlightを選択しました。
  9. 右側に出力されているサンプルで問題がなければ「Get Code」ボタンを押して、生成されたソースをコピーします。
  10. ダミーとしておいたURLを本物に入れ替えながらサイトに挿入します。URLの入れ替え場所は「like.php?」の後から「&layout」の間です。（Bloggerの場合は以下を参照）
Bloggerへの設置
生成したソースコードをBloggerへ導入した例をご紹介します。
（以下、「HTML編集」＋「ウィジェットテンプレートを展開」で行います）

<div class='post-header-line-1'>の下あたりに以下を埋め込みます
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:120px; height:21px;'/>

大事な部分は「like.php?」の後から「&amp;layout」の間で、投稿記事に対して「いいね」とリアクションできるように設定します。他のstyleなどは自由にカスタマイズするのが良いかと思います。

Facebook連携を検討している方は、ぜひ参考にしてみてください。

関連記事

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)