• twitter
  • Facebook
  • はてなブックマーク
2012年03月18日(日)

facebookの「いいね!」ボタン設置方法

facebookページに「いいね」「友達にすすめる」ボタンを掲載するための方法です。iframe版、facebookJavascriptSDKをロードしたHTML5版、XFBML版(facebookが提供する独自タグ)の3種類の方法で設置できます。公式サイトでコードを取得して、指定されたソースコードエリアにタグをそのままコピー&ペーストするだけです。

facebookの「JavaScriptSDK」はfacebookに関する様々なアプリケーション機能を提供するもので、スクリプトが読み込まれた後、FB.initで初期化を行い、各API機能(ウォールへの投稿、ウォールデータの取得、ユーザーデータに関する情報の取得、ログイン情報の共有など)を利用する事が出来るようになります。全ての機能を利用するためには、facebookアプリとして登録したappIdが必要になりますが、ソーシャルプラグインの利用範囲であれば、アプリケーションIDは不要のようです。

JavaScriptSDKのロード

JavaScriptSDKは非同期によるロードが推奨されており、body内への<div id="fb-root></div>の記述が必要です。asyncでロードする事によって非同期による通信が実施され、クロスドメイン下での読み込みをスムーズに行う効果があります。

  1. // bodyタグ直後に記述
  2. <div id="fb-root"></div>
  3. <script>
  4. (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" fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));
  5. </script>

likeボタンの埋め込み

JavaScriptSDKを読み込んでlikeボタンの設置を行うためには、ボタンを出力したい箇所へ<div class="fb-like"></div>の記述(HTML5版)、または<fb:like></fb:like>(XFBML版)を記述します。また、XFBML版の場合は古いブラウザ(InternetExplorerなど)に対応するため、<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">を記述し、XFBMLタグに関する定義を明確にしておく必要があります。

  1. // likeボタンを表示するエリアに記述(HTML5版)
  2. <div class="fb-like" data-url="現在のページURL" data-layout="button_count" data-width="300">いいね!</div>
  3. // likeボタンを表示するエリアに記述(XFBML版)
  4. <fb:like url="現在のページURL" layout="button_count" width="300">いいね!</fb:like>

設置タグが正確に記述されていれば、ロードしたjavascriptSDKが、FB.XFBML.parse();メソッドで設置エリアをレンダリングしてボタン(iframe)を埋め込んでくれます。iframe版で設置した場合は、閲覧ページ内でjavascriptSDKのロードを行わないため、コメント投稿ダイアログの表示(FB.uiが未実装)がされないようです。

likeボタンに設定できるオプションパラメータ
(HTML5版の場合、data属性として記述。data-link="●●"や、data-send="●●")
キー 概要
url 現在のページのURL
send SendButton(友達にすすめる)ボタンを含めるかどうか(trueまたはfalse)
layout ‘standard’ ‘button_count’ ‘box_count’のいずれか※下記図を参照
show_faces layout=’standard’の場合のみ。likeした人のプロフ写真を表示するかどうか
width いいね!ボタンの横幅。レイアウトによって最小値が異なります。
action likeボタンを押した時のアクション(‘like’ または ‘recommend’)
font 利用されるフォント名。(‘arial’ ‘lucida grande’ ‘segoe ui’ ‘tahoma’ ‘trebuchet ms’ ‘verdana’)
colorscheme ‘lite’(薄い水色ベース) ‘dark’(黒ベース)のどちらか
ref 参照元の追跡用ラベル。半角英数字と「+/=-.:_」の組み合わせ(50文字以内)。これを元にfb_refとfb_sourceという新しいパラメータが追加されます。

1.standardレイアウト

likebutton_standard

2.button_countレイアウト

likebutton_button_count

3.box_countレイアウト

likebutton_box_count

likeボタンクリック後の動作

いいね!ボタンがクリックされると、facebookにログインした状態かどうかを判定して、ログイン中ならコメントを記述するためのフォームが出力、そうでなければログイン画面(アカウント登録画面)が出力されます。また、閲覧中のページデータが自動解析され、ウォール投稿のための記事がプレビューされます。

ウォール投稿のためのタイトルやサムネイル画像は、OpenGraphProtocolを使ったmetaタグが優先的に解析されます。OG設定がされていなければ、ウォールに投稿される際の詳細は表示されず、facebookが自動で解析したページ内の記事と画像が利用されるようになります。

aタグ等で独自画像を使用したfacebookボタンの設置を行う場合は、FB.getLoginStatusメソッドなどでログインチェックを行い、facebookログイン状態に応じたコールバック関数などを定義する必要があります。詳細はfacebookAPIリファレンスを参照して下さい。

関連投稿記事

Comment: