Entry

XFBMLでFacebookのLike、Shareボタンを設置する

はてなブックマーク - XFBMLでFacebookのLike、Shareボタンを設置する

FacebookのLikeボタン、Shareボタンはタグを生成するページがあり、iframeを埋めこむだけで設置できます。

埋め込みはiframeじゃなくてXFBMLを使う方法もあるようなので、試してみました。

Javascriptを読み込む

<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>

基本的にはこれだけでほぼ完了です。
あとはXFBMLのタグをボタンを表示したい場所に書くだけです。

Like Button

いつものように生成すると、下にXFBMLのタグも表示されています。

xfbml.png

属性値を設定することでボタンをカスタマイズできます。省略するとデフォルトの設定になるようです。
例えば、href属性で共有したいURLを、layout属性でボタンのスタイルを指定できます(standard、button_count、box-count)。

<fb:like href="..." layout="..."></fb:like>

属性値についてはタグ発行ページの下の方に書いてありました。

Share Button

ShareボタンもLikeボタンと同様に以下のようなタグを記述すると設置できます。

<fb:share-button type="button"></fb:share-button>

こちらもtypeなどの属性値でカスタマイズできるようです。

詳細はこちらのページに書いてありました。

Recommendations

Book

Web Designing (ウェブデザイニング) 2011年 04月号 [雑誌]

「CSS3プロパティから発想するアイデア集」のなかで4つほどネタを書かせていただきました。

Book

WiiRemoteプログラミング

「オーラ診断」が紹介されました。7ページぐらいがっつり!

Archives

Categories

Tags

Profile

vt103

gryng(ごろやんぐ)/vt103

イケメンMEやってます。ふっちーとかふっちょんとか呼ばれてます。仮面ライダーは基本的に全部好きです。個人的な連絡はtwitterGoogle プロフィールからどうぞ。

Search