みなさま、こんにちは。ただいま、Facebook について研究していますよー。結構いろいろわかってきました。


先日、[Facebookとブログ連携はじめの一歩!] ウェブページ・アプリケーションの作成 という記事を書きました。次は、この情報を使って ウェブサイトに「いいね!」ボタン (Like Button) を設置して表示させましょう!


「いいね!」ボタンをクリックすると、そのクリックしたユーザーの友達のニュースフィードにそのウェブページの情報が届きます。ユーザーの友達全員にその情報が拡がります。


また、さらにその友堕胎が「いいね!」をクリックすれば、さらにその友達が・・・ というように、どんどん情報を拡散させていくことができるわけです。いや〜、これでたくさんの人に見てもらえる可能性がでてきますねー。


fb_likebutton12

スポンサーリンク

では、早速「いいね!」ボタンを設置しましょう。


「いいね!」ボタンのコードを取得する

ウェブサイトに「いいね!」ボタンを設置するために、「いいね!」ボタンの HTMLコードを取得します。HTMLコードを取得後、そのコードを設置したいブログなどのウェブサイトにコピペします。

まずは、http://developers.facebook.com/docs/reference/plugins/like/ にアクセスします。


「Step 1 - Get Like Button Code」に項目を記入します。それぞれの項目の意味と設定の説明は以下です。


fb_likebutton01

  • URL to Like
  • 「いいね!」ボタンを設置する URL を記入します。
    例) http://example.com
    ブログなどで各記事に「いいね!」ボタンを設置したい場合、記入する URL は各ブログで設定方法が変わるので注意が必要です。


  • Send Button
  • Send Button (「送信」ボタン) は、特定の友達にこのページの情報を送ることができるボタンを設置します。
    fb_likebutton02
    「いいね!」はクリックしたユーザーの友達全員に通知しますが、「送信」ボタンは特定のユーザーにのみ情報を送ることができます。


  • Layout Style
  • "standard", "button_count", "box_count" の3つから選択できます。ボタンの存在をシンプルに示したいのであれば "button_count"、他のソーシャルボタンと並べるため横幅を制限したいのであれば "box_count" を選ぶのが良いですね。
    fb_likebutton03

    fb_likebutton04

    fb_likebutton05


  • Width
  • 配置するボタン全体の幅を指定します。 (単位 pxel)
    サイトのサイドバーに配置するなど、サイズの制限があれば、そのサイズを超えないようにします。また、"Send Button" を ON にするときは、ある程度幅がなければ十分な情報が表示されないので注意が必要です。
    "standard" レイアウトの場合は、まず 225 を設定し、実際に設置しながら決めましょう。"Send Button" を ON にするときは、450 あたりにして調整します。
    "button_count" レイアウトは 90、"box_count" は 55 にが良いでしょう。ここは、後からコードを直接編集して変えられるので、とりあえず入れておくで良いです。


  • Show Faces
  • ON にすると、ボタンの下にプロファイル写真が載ります。 (standard レイアウトのみ)


  • Verb to display
  • ボタンに表示されるメッセージを変えることができます。like であれば「いいね!」、recommend であれば「おすすめ」と表示されます。
    fb_likebutton06

    特に理由がなければ、みんなに広く認知されている like で良いでしょう。


  • Color Scheme
  • 背景色も含めた色合を決めます。"light" だと背景色白、"dark" だと黒です。
    fb_likebutton07 


  • Font
  • 表示される「いいね!」のフォントの種類を選択します。
    日本語表示はどれを選択しても表示にほとんど違いはないですが、数字の箇所は変わります。お好みのものを選びましょう。


項目を埋めたら、"Get Code" ボタンを押してウェブサイトに埋め込む HTMLコードを入手します。
ここで、コードの種類を3つから選択できます。


連携したい facebookページが表示されていることと、[Facebookとブログ連携はじめの一歩!] ウェブページ・アプリケーションの作成 で作成した "Display name" と "App ID" が表示されていることを確認してください。


fb_likebutton08

表示されていない場合は、facebook にログインしてない可能性があるので、ログインしてから作成します。



入手した HTMLコードをウェブサイトにコピペする

前のステップで "HTML5" を選択したとして、ウェブサイトにコードを貼ります。


1. のコードを ウェブサイトの <body> タグのすぐ後ろにコピペします。


<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=406XXXXXXXXXXXXX";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


次は、2. のコードを ウェブサイトの「いいね!」ボタンを配置したい場所にコピペします。


<div class="fb-like" data-href="http://c-through.blogto.jp" data-send="false" data-layout="button_count" data-width="225" data-show-faces="false" data-action="recommend"></div>

ここで、「data-width="225"」の 225 を変更することで、いいね!ボタンの幅のサイズを変更できます。実際に変更しながら、ウェブサイトにベストなサイズを探しましょう。



++++++++

これで終わりです! むーん ちょっと HTMLを知らない方にはちょっとハードル高いかもしれませんね〜。


このあとは、Step 2 の OGタグの設置をします。ちょっと長くなってしまったので、この確認は以下の別記事で。


[Facebook] OGPタグを設定しウェブページの情報をきちんとわかりやすく伝える | C-through zaMac


この記事が少しでもお役に立てれば幸いです。「参考になったな〜」と思った方は、以下の「いいね!」ボタンのクリックをお願いします!! (便乗 汗)

↓↓↓↓↓↓




ライブドアブログに Facebookパーツを設置する方法 | C-through the Mac



スポンサーリンク