Information

XFBML編 - Facebookの「いいね！」ボタン設置方法

  •    2011年4月19日(火) 18:20 JST 閲覧件数 13,075
Facebookの「いいね！」ボタンにはiFrame版とXFBML版の2種類あります。

※iFrame版の「いいね！」ボタン設置方法はこちらをクリック。

ここではもうひとつのXFBML版の「いいね！」ボタン設置方法を記述します。
これが実例↓ 


下記コードを、ボタンを貼りたい場所にコピペ。

<script src="http://connect.facebook.net/en_US/all.js"></script>  
<script>  
  FB.init({  
    appId  : '',  
    status : true, // check login status  
    cookie : true, // enable cookies to allow the server to access the session  
    xfbml  : true  // parse XFBML  
  });  
</script>    
<script src="http://connect.facebook.net/ja_JP/all.js#xfbml=1"></script> 
<fb:like></fb:like>


 
◇解説
(1) JavaScriptSDKの読み込み
XFBMLを使うにはJavaScriptSDKを読み込む必要があります。
XFBMLはFacebook独自のタグで、それを解釈するためです。
下記のコードを書けばOKです。

<script src="http://connect.facebook.net/en_US/all.js"></script>   
<script>  
  FB.init({  
    appId  : '',  
    status : true, // check login status  
    cookie : true, // enable cookies to allow the server to access the session  
    xfbml  : true  // parse XFBML  
  });  
</script>    
(2) ボタンの日本語化
Facebookのサイトでコードを取得するとボタンが「like」と英語になります。
これを日本語化するには、コード中のen_US を ja_JP に変更します。

 

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script> 
<fb:like></fb:like>
↓

<script src="http://connect.facebook.net/ja_JP/all.js#xfbml=1"></script> 
<fb:like></fb:like>
 
(3) メリット
 ・URL指定不要。デフォルトで設置ページのURLになる。
 ・サイズ(幅、高さ)は自動調整される。



◆◆◆ 後日談(2011/4/28) ◆◆◆

と、いうことでしたが、4/26日ごろに新しく送信ボタン付きのいいねボタンが実装されました。
本サイトもこれに変えてみました。コードは下記のとおりです。

<script src="http://connect.facebook.net/ja_JP/all.js#xfbml=1"></script>
<fb:like send="true" width="700" show_faces="true" font=""></fb:like>