Social Plugins

Plugins

Like Button (いいね！ボタン)
Send Button
Subscribe Button
Comments
Activity Feed
Recommendations
Facebook Page
Login Button
Registration
Facepile
Live Stream

Like Button (いいね！ボタン)

Like Buttonのコードは、Like Button for Webで取得できます。

実行例

Like Buttonの実行例は、ページ下部で確認できます。

コードの解説

これは過去のコードです。最新のそれはLike Button for Webで確認してください。

既定の設定によるHTML5のコードは、次のようなものです。コードは2つに分かれていて、最初はJavaScript SDKを読み込むコードです。このコードはbody要素の直後に配置するのが理想です。

<div id="fb-root"></div>
<script>
( function( d, s, id )
{
    var js;
    var fjs = d.getElementsByTagName( s )[ 0 ];

    if( d.getElementById( id ) ) return;

    js = d.createElement( s );
    js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";

    fjs.parentNode.insertBefore( js, fjs );

}( document, 'script', 'facebook-jssdk' ) );

まわりくどいことをしていますが、つまりは一度だけスクリプトを読み込むようになっています。それから1行目の<div id="fb-root">は、スクリプトを読み込むときのプレースホルダーとなります。The fb-root tag - Getting Started with the Facebook SDK for JavaScript | Facebook Developers

2番目はLike Buttonを表示する部分のコードです。このコードはButtonを表示する場所に配置します。

「data-」属性でパラメータを指定します。

<div class="fb-like"
    data-href="http://example.com"
    data-send="true"
    data-width="450"
    data-show-faces="true">
</div>

レイアウト

レイアウトには、

standard … ボタンの右と下に、いろいろ表示 (既定)
button_count … ボタンの右に、いいね！の数を表示
box_count … ボタンの上に、いいね！の数を表示

の3種類があります。

standard

しかし、ボタンだけというレイアウトは用意されていません。これを実現するにはスタイルを指定して、ボタン以外の部分を見えなくする方法しかないようです。» How to turn off the number count on the Facebook like button Eagerterrier's Blog

またはプラグインを使用しなければ、表示は自由にカスタマイズできます。そのときは、

<a href="http://www.facebook.com/plugins/like.php?href=URL">いいね！</a>

<a href="http://www.facebook.com/sharer.php?u=URL">いいね！</a>

のようにHTMLで記述し、Facebookのページへリンクします。

日本語化

スクリプトの/en_US/の部分を、

js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";

/jp_JP/に変更します。

js.src = "//connect.facebook.net/jp_JP/all.js#xfbml=1";

How do I display the Like button in different languages?

トラブル対処法

表示サイズが固定される

プロフィール写真を表示するようにすると、高さがつねに80pxになることがあります。このときはスタイルで調整します。Facebook Like Button (<fb:like>) Height Always 80px - Stack Overflow

もしくは「facebook.net」との通信を許可しつつ「facebook.com」を遮断していると、そのような状態になることがあります。このときはfacebook.comも許可します。

コンソールに警告が出力される

Like Button for Webから取得したコードをそのまま埋め込むと、「Invalid App Id: Must be a number or numeric string representing the application id.」とブラウザのコンソールに出力されます。これはスクリプトの読み込み時にアプリケーションIDが指定されていないことへの警告で、このIDを指定することで解消できます。Solve "Invalid App Id: Must be a number or numeric string representing the application id" | DevelopWithGuru

js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=YOUR_APP_ID";

参考

Like Button

Activity Feed

iframe版

これはAPIではありませんが、指定ドメインに関連する最近の活動をHTMLで取得できます。よってそれをiframe内に表示すれば、簡単にページ内に埋め込めます。

<iframe src="http://www.facebook.com/plugins/activity.php?site=example.com"></iframe>

参考

Activity Feed