2010.10.13

Facebookの「Like(いいね!)」ボタンをブログに設置する方法

                    


最近、日本でも流行り始めている「ソーシャルボタン」

「mixi チェック」や「GREE(social feedback)」もそのひとつ!

今回は、「ソーシャルボタン」の元祖とも言える
Facebookの「Like(いいね!)」ボタンを
自分のブログやサイトに簡単に設置する方法を
お教えいたします!

Facebook 「Like(いいね!)」ボタンとは?

世界No1と言われている
SNS(ソーシャルネットワーキングサービス)のFacebook。

そのFacebookでは、友達のステータスやアップロードされた写真に「Like(いいね!)」とすることができます。

その機能がFacebookの外に飛び出してきたのが、このボタンです!

ユーザーが好きなサイトや記事を「Like(いいね!)」することで、
友達に自分が好きなサイトや面白かった記事を簡単に共有することができます。

まずは、Facebookのディベロッパーサイトへアクセス!

Facebookのディベロッパーサイト内の
Likeボタンを作るページ(英語)にアクセスしましょう!

Likeボタン作成ツールに、パラメーターを設定!

左側のボックスで、パラメータを設定します。
右側でどのようなボタンが作れるかを確認できます。

  1. 「URL to Like」
      指定しないと、見ているページをLikeしてくれます
  2. 「Layout Style」
      3種類からスタイルを選択します
  3. 「Show Faces」
      ボタンの下にプロフィール画像を表示するか選択します
  4. 「Width」
      横幅を指定します(ボタン全体の大きさ)
  5. 「Verb to display」
      ボタン内のテキストを選択します(like, recommend)
  6. 「Font」
      6種類から文字種(フォントファミリー)を選択できます
  7. 「Color Scheme」
      2種類からボタンの色を選択できます

「Get Code」でコードをゲットしよう!

「Get Code」ボタンをおすと下のようなボックスが出てきます。

好きな方のコードを、
自分のサイトの好きなところにコピペすれば、完成!

おまけ

ボタンがすぐに表示されないことがあります。

これは、Facebook側が、
「ボタンをどのように表示させればいいのかな?」
と考えているからです。

24時間程度で、表示できるようになるので、辛抱です!


ボタン内の言語を変えるには?

XFBML
'//connect.facebook.net/en_US/all.js';
‘en_US’(英語)を変えてください。

Iframe
src="http://www.facebook.com/widgets/like.php?locale=fr_FR&..."
‘fr_FR’(仏語)を変えてください。


コメントも出来るようにしたい!

できちゃいます!

XFBML形式を使っている場合には、いつでもOK!

Iframe形式の場合は、「Width」が少なくとも400ピクセルの”標準”レイアウトならOK!



自分のサイト(Likeボタン)のアクセス解析ができます!

facebook.com/insightsにアクセスしましょう!
ここで、自分のサイトを登録することで、アクセス解析ができちゃいます。

解析内容としては、
  • どのくらいの人が「Likeボタン」を押しているのか
  • 誰が「Likeボタン」を押しているのか(デモグラフィック表示)


もっと詳しく!!


このページ(英語)で確認しましょう!

Open Graphを使用する場合など、さらにmetaタグを入れる必要があったりします。詳しくは、Facebookのページで確認ください。
関連キーワード

関連記事