facebook いいねボタンを表示する †
基本的なコード †
facebookのいいねボタンは「いいね！ボタン - ソーシャルプラグイン」でコードを取得できます。
取得できるコードはJavaScript SDK（XFBML）とiframeがあります。
「いいね！」するURLを「http://dobon.net/」、Widthを「400」、レイアウトを「standard」、アクションタイプを「like」、ボタンサイズを「small」、友達の顔を表示するを有効、シェアボタンを追加を有効にした時のifameのコードは、以下のようなものです。
<iframe src="https://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fdobon.net%2F&width=400&layout=standard&action=like&size=small&show_faces=true&share=true&height=80&appId" width="400" height="80" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
|
同じ条件で、JavaScript SDKのコードは次のようになります。コードは2つあり、はじめのコードは<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/sdk.js#xfbml=1&version=v2.8";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
|
もう一つのコードは、ボタンを表示する箇所に記述します。
<div class="fb-like" data-href="http://dobon.net/" data-width="400" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>
|
色々なオプション †
レイアウト †
レイアウトを「button_count」にすると、いいねボタン内の右側にカウント数が表示されます。
レイアウトを「standard」にすると、いいねボタン（あるいは、シェアボタン）の右にカウント数がテキストで表示されます。
レイアウトを「box_count」にすると、いいねボタンの上にカウント数が表示されます。
レイアウトを「button」にすると、カウント数が表示されなくなります。
アクションタイプ †
アクションタイプを「like」にすると、日本語では、ボタンに「いいね！」と表示されます。「recommend」にすると、「おすすめ」と表示されます。
ボタンサイズ †
ボタンサイズを「small」にすると小さなボタン、「large」にすると大きなボタンになります。
シェアボタンを追加 †
「シェアボタンを追加」にチェックを入れると、いいねボタンの右にシェアボタンが表示されます。
Width †
レイアウトがstandardの時、幅をpx単位で指定します。最小値は225で、デフォルトは450のようです。
友達の顔を表示する †
「友達の顔を表示する」にチェックを入れると、レイアウトがstandardの時、ボタンの下にプロフィール写真を表示します。子供向けサイトではこの設定を有効にしないでくださいということです。
他の言語で表示する †
JavaScript SDKのコードで、「connect.facebook.net/ja_JP/sdk.js」の「ja_JP」の部分を変更することで、言語を変更できます。例えば、米国英語の場合は、「en_US」となります。
iframeのコードを使った時に言語を英語に固定するには、"locale=en_US"というパラメータを追加します。
<iframe src="https://www.facebook.com/plugins/like.php?locale=en_US&href=http%3A%2F%2Fdobon.net%2F&width=400&layout=standard&action=like&size=small&show_faces=true&share=true&height=80&appId" width="400" height="80" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
|
フォロー、保存、送信、シェアボタンなど †
フォローボタン、保存ボタン、送信ボタン、シェアボタンなどプラグインのコードは、「ソーシャルプラグイン」にあります。
(X)HTML validにする †
ここで紹介しているコードは、古いコードです。
facebookのいいねボタンのコードをvalidにする方法は、「Facebook Like Button - W3C Valid」や「New Facebook like button HTML validation」、「Stopping Facebook Plugins (XFBML) from breaking XHTML compliance」などで紹介されています。
XFBMLのコードの場合は、JavaScriptでタグを追加します。
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1" type="text/javascript"></script>
<div id="facebook_like_button">
<script type="text/javascript">
(function(){
var fb = document.createElement("fb:like");
fb.setAttribute("href","");
fb.setAttribute("layout","button_count");
fb.setAttribute("send","false");
fb.setAttribute("width","120");
fb.setAttribute("show_faces","false");
fb.setAttribute("action","like");
fb.setAttribute("font","");
document.getElementById("facebook_like_button").appendChild(fb);
})();
</script>
</div>
|
iframeのコードの場合は、iframeの代わりにobjectを使用します。
<object data="http://www.facebook.com/plugins/like.php?href&send=false&layout=standard&width=450&show_faces=false&action=like&colorscheme=light&font&height=35" style="border:none;overflow:hidden; width:450px; height:35px;" type="text/html"></object>
|
ただしIEでは正しく表示されませんので、IEではiframeを使うように、以下のようにコードを書き換えます。
<!--[if IE]>
<iframe src="http://www.facebook.com/plugins/like.php?href&send=false&layout=standard&width=450&show_faces=false&action=like&colorscheme=light&font&height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe>
<![endif]-->
<!--[if !IE]><-->
<object data="http://www.facebook.com/plugins/like.php?href&send=false&layout=standard&width=450&show_faces=false&action=like&colorscheme=light&font&height=35" style="border:none;overflow:hidden; width:450px; height:35px;" type="text/html"></object>
<!--><![endif]-->
|
コメント †
