ShareButton/FacebookLike のバックアップ差分(No.2)

バックアップ一覧
現在との差分を表示
ソースを表示
バックアップを表示
ShareButton/FacebookLike へ行く。
- 1 (2011-09-04 (日) 03:10:22)
- 2 (2011-09-05 (月) 01:26:16)
追加された行はこの色です。
削除された行はこの色です。
#title(facebook いいねボタンを表示する)

#contents

-[[「様々なシェア、ブックマークボタン（Google+1、twitter、facebook、はてななど）を表示する」に戻る>../]]

*facebook いいねボタンを表示する [#rc542230]

#ref(../facebook3.png)

**基本的なコード [#i22579ce]

facebookのいいねボタンは「[[Like Button - Facebook開発者>http://developers.facebook.com/docs/reference/plugins/like/]]」でコードを取得できます。

取得できるコードはiframeとXFBMLがあります。

Sendボタンなし、レイアウトスタイルがbox_count、Color Schemeをlightにした時（上の画像）のiframeのコードは以下のようなものです。

#prescroll(wrap=true){{
<iframe src="http://www.facebook.com/plugins/like.php?href&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe>
}}

同じくXFBMLのコードは以下のようなものです。

#prescroll(wrap=true){{
<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>http://developers.facebook.com/docs/reference/javascript/]]を使う必要があり、アプリケーションIDが必要ということになっていますが、そうしなくても表示できます。

**色々なオプション [#x7c52fa0]

Layout Styleを「button_count」にすると、カウント数が横に表示されます。

#ref(../facebook2.png)

Layout Styleを「standard」にすると、カウント数が横にテキストで表示されます。

#ref(../facebook1.png)

Color Schemeをdarkにすると、色が暗くなります。

#ref(../facebook4.png)

「Send Button」にチェックを入れてSendボタン（送るボタン）を表示するようにした時は、XFBMLのコードのみが表示されます。iframeではSendボタンを表示できません。なおSendボタンは「[[Send Button - Facebook開発者>http://developers.facebook.com/docs/reference/plugins/send/]]」で作成することもできます。

#ref(../facebook5.png)

Widthで横幅を指定できます。ただしXFBMLでは、あまりに小さい横幅は無視されるようです。

Show facesを有効にすると、ボタンの下にプロファイルピクチャーが表示されます。

**日本語、あるいは英語で表示する [#x99aba7f]

XFBMLのコードを使うと英語で表示されます。これを日本語にするには、以下のようにen_USをja_JPに書き換えます。

#prescroll(wrap=true){{
<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>
}}

#ref(../facebook6.png)

iframeのコードを使った時に言語を英語に固定するには、"locale=en_US"というパラメータを追加します。

#prescroll(wrap=true){{
<iframe src="http://www.facebook.com/plugins/like.php?locale=en_US&amp;href&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe>
}}

**Login Buttonなど [#n83fe026]

Login Buttonなどプラグインのコードは、「[[Social Plugins - Facebook開発者>http://developers.facebook.com/docs/plugins/]]」にあります。

**(X)HTML validにする [#d9d43047]

facebookのいいねボタンのコードをvalidにする方法は、「[[Facebook Like Button - W3C Valid>http://www.jnorton.co.uk/blog/facebook-button-w3c-valid]]」や「[[New Facebook like button HTML validation>http://stackoverflow.com/questions/2761622/new-facebook-like-button-html-validation]]」、「[[Stopping Facebook Plugins (XFBML) from breaking XHTML compliance>http://community.seoworkers.com/threads/48-Stopping-Facebook-Plugins-%28XFBML%29-from-breaking-XHTML-compliance]]」などで紹介されています。

XFBMLのコードの場合は、JavaScriptで<fb:like>を追加します。

#prescroll(wrap=true){{
<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を使用します。

#prescroll(wrap=true){{
<object data="http://www.facebook.com/plugins/like.php?href&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=35" style="border:none;overflow:hidden; width:450px; height:35px;" type="text/html"></object>
}}

ただしIEでは正しく表示されませんので、IEではiframeを使うように、以下のようにコードを書き換えます。

#prescroll(wrap=true){{
<!--[if IE]>
<iframe src="http://www.facebook.com/plugins/like.php?href&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;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&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=35" style="border:none;overflow:hidden; width:450px; height:35px;" type="text/html"></object>
<!--><![endif]-->
}}

**コメント [#cbe95f9f]

#comment

//これより下は編集しないでください
#pageinfo([[:Category/インターネット]],2011-08-31 (水) 03:45:56,DOBON!,2011-09-04 (日) 03:10:22,DOBON!)
#pageinfo([[:Category/インターネット]],2011-08-31 (水) 03:45:56,DOBON!,2011-09-05 (月) 01:26:15,DOBON!)
▲ ▼
DoboWiki
