【Facebook】いいね！ボタンを設置してウェブサイトの情報をみんなに広げる : Mac・iPhone・iPad を使い倒したい

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

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

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

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

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

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

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

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

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

URL to Like

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

Send Button

Send Button (「送信」ボタン) は、特定の友達にこのページの情報を送ることができるボタンを設置します。

「いいね！」はクリックしたユーザーの友達全員に通知しますが、「送信」ボタンは特定のユーザーにのみ情報を送ることができます。

Layout Style

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

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 であれば「おすすめ」と表示されます。

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

Color Scheme

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

Font

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

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

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

表示されていない場合は、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タグの設置をします。ちょっと長くなってしまったので、この確認は以下の別記事で。