facebook いいねボタンを表示する †
基本的なコード †
facebookのいいねボタンは「Like Button - Facebook開発者」でコードを取得できます。
取得できるコードはiframeとXFBMLがあります。
Sendボタンなし、レイアウトスタイルがbox_count、Color Schemeをlightにした時（上の画像）のiframeのコードは以下のようなものです。
<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>
|
同じくXFBMLのコードは以下のようなものです。
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="false" width="450" show_faces="false" action="like" font=""></fb:like>
|
XFBMLを使う場合はJavaScript SDKを使う必要があり、アプリケーションIDが必要ということになっていますが、そうしなくても表示できます。
色々なオプション †
Layout Styleを「button_count」にすると、カウント数が横に表示されます。
Layout Styleを「standard」にすると、カウント数が横にテキストで表示されます。
Color Schemeをdarkにすると、色が暗くなります。
「Send Button」にチェックを入れてSendボタン（送るボタン）を表示するようにした時は、XFBMLのコードのみが表示されます。iframeではSendボタンを表示できません。なおSendボタンは「Send Button - Facebook開発者」で作成することもできます。
Widthで横幅を指定できます。ただしXFBMLでは、あまりに小さい横幅は無視されるようです。
Show facesを有効にすると、ボタンの下にプロファイルピクチャーが表示されます。
日本語、あるいは英語で表示する †
XFBMLのコードを使うと英語で表示されます。これを日本語にするには、以下のようにen_USをja_JPに書き換えます。
<div id="fb-root"></div><script src="http://connect.facebook.net/ja_JP/all.js#xfbml=1"></script><fb:like href="" send="true" width="450" show_faces="false" action="like" font=""></fb:like>
|
iframeのコードを使った時に言語を英語に固定するには、"locale=en_US"というパラメータを追加します。
<iframe src="http://www.facebook.com/plugins/like.php?locale=en_US&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>
|
Login Buttonなど †
Login Buttonなどプラグインのコードは、「Social Plugins - Facebook開発者」にあります。
(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で<fb:like>を追加します。
<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]-->
|
コメント †
