#title(facebook いいねボタンを表示する) #contents -[[「様々なシェア、ブックマークボタン（Google+1、twitter、facebook、はてななど）を表示する」に戻る>../]] *facebook いいねボタンを表示する [#rc542230] #ref(../facebook3.png) #ref(../facebook7.png) **基本的なコード [#i22579ce] facebookのいいねボタンは「[[Like Button - Facebook開発者>http://developers.facebook.com/docs/reference/plugins/like/]]」でコードを取得できます。 facebookのいいねボタンは「[[いいね！ボタン - ソーシャルプラグイン>https://developers.facebook.com/docs/plugins/like-button]]」でコードを取得できます。 取得できるコードはiframeとXFBMLがあります。 取得できるコードはJavaScript SDK（XFBML）とiframeがあります。 Sendボタンなし、レイアウトスタイルがbox_count、Color Schemeをlightにした時（上の画像）のiframeのコードは以下のようなものです。 「いいね！」するURLを「http://dobon.net/」、Widthを「400」、レイアウトを「standard」、アクションタイプを「like」、ボタンサイズを「small」、友達の顔を表示するを有効、シェアボタンを追加を有効にした時のifameのコードは、以下のようなものです。 #prescroll(wrap=true){{ <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> <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> }} 同じくXFBMLのコードは以下のようなものです。 同じ条件で、JavaScript SDKのコードは次のようになります。コードは2つあり、はじめのコードは<body>タグの後で一度だけ記述します。 #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> <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> }} XFBMLを使う場合は[[JavaScript SDK>http://developers.facebook.com/docs/reference/javascript/]]を使う必要があり、アプリケーションIDが必要ということになっていますが、そうしなくても表示できます。 もう一つのコードは、ボタンを表示する箇所に記述します。 #prescroll(wrap=true){{ <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> }} **色々なオプション [#x7c52fa0] Layout Styleを「button_count」にすると、カウント数が横に表示されます。 ***レイアウト [#o09e118a] #ref(../facebook2.png) レイアウトを「button_count」にすると、いいねボタン内の右側にカウント数が表示されます。 Layout Styleを「standard」にすると、カウント数が横にテキストで表示されます。 レイアウトを「standard」にすると、いいねボタン（あるいは、シェアボタン）の右にカウント数がテキストで表示されます。 #ref(../facebook1.png) レイアウトを「box_count」にすると、いいねボタンの上にカウント数が表示されます。 Color Schemeをdarkにすると、色が暗くなります。 レイアウトを「button」にすると、カウント数が表示されなくなります。 #ref(../facebook4.png) ***アクションタイプ [#w6a67958] 「Send Button」にチェックを入れてSendボタン（送るボタン）を表示するようにした時は、XFBMLのコードのみが表示されます。iframeではSendボタンを表示できません。なおSendボタンは「[[Send Button - Facebook開発者>http://developers.facebook.com/docs/reference/plugins/send/]]」で作成することもできます。 アクションタイプを「like」にすると、日本語では、ボタンに「いいね！」と表示されます。「recommend」にすると、「おすすめ」と表示されます。 #ref(../facebook5.png) ***ボタンサイズ [#ocf21b48] Widthで横幅を指定できます。ただしXFBMLでは、あまりに小さい横幅は無視されるようです。 ボタンサイズを「small」にすると小さなボタン、「large」にすると大きなボタンになります。 Show facesを有効にすると、ボタンの下にプロファイルピクチャーが表示されます。 ***シェアボタンを追加 [#c75f198a] **日本語、あるいは英語で表示する [#x99aba7f] 「シェアボタンを追加」にチェックを入れると、いいねボタンの右にシェアボタンが表示されます。 XFBMLのコードを使うと英語で表示されます。これを日本語にするには、以下のようにen_USをja_JPに書き換えます。 ***Width [#r7cb85ba] #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> }} レイアウトがstandardの時、幅をpx単位で指定します。最小値は225で、デフォルトは450のようです。 #ref(../facebook6.png) ***友達の顔を表示する [#w75e2851] 「友達の顔を表示する」にチェックを入れると、レイアウトがstandardの時、ボタンの下にプロフィール写真を表示します。子供向けサイトではこの設定を有効にしないでくださいということです。 **他の言語で表示する [#x99aba7f] JavaScript SDKのコードで、「connect.facebook.net/ja_JP/sdk.js」の「ja_JP」の部分を変更することで、言語を変更できます。例えば、米国英語の場合は、「en_US」となります。 iframeのコードを使った時に言語を英語に固定するには、"locale=en_US"というパラメータを追加します。 #prescroll(wrap=true){{ <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> <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> }} **Login Buttonなど [#n83fe026] **フォロー、保存、送信、シェアボタンなど [#n83fe026] Login Buttonなどプラグインのコードは、「[[Social Plugins - Facebook開発者>http://developers.facebook.com/docs/plugins/]]」にあります。 フォローボタン、保存ボタン、送信ボタン、シェアボタンなどプラグインのコードは、「[[ソーシャルプラグイン>https://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>を追加します。 XFBMLのコードの場合は、JavaScriptでタグを追加します。 #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&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を使うように、以下のようにコードを書き換えます。 #prescroll(wrap=true){{ <!--[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]--> }} **コメント [#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!,2017-01-26 (木) 01:44:36,DOBON!) |
Site admin: DOBON!
PukiWiki 1.5.0 Copyright © 2001-2006 PukiWiki Developers Team. License is GPL.
Based on "PukiWiki" 1.3 by yu-ji. Powered by PHP 5.6.40. HTML convert time: 0.010 sec.