シングルページアプリケーション(SPA)でページ状態に合わせてFacebookでシェアしたいURLを切り替えたい（動的にしたい）時がたまにありますよね。
そんな時はFacebook公式APIの「FB.XFBML.parse()」を使うと便利ですよ。
事前にFacebookのシェアボタンとメッセンジャーで送信ボタンをHTMLで準備します。
<!-- シェアボタン -->
<span class="facebook-share-button fb-share-button"
data-size="large"
data-layout="button"
data-mobile-iframe="true"
ref="unique-parameter-value">
</span>
<!-- メッセンジャーで送信ボタン -->
<span class="facebook-share-button fb-send"
data-size="large"
data-mobile-iframe="true"
ref="unique-parameter-value">
</span>
次にjavascriptでFacebookの初期化と任意のタイミングでボタンの表示をします。
// Facebookの初期化
$(function() {
var d = document;
var s = 'script';
var id = 'facebook-jssdk';
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6";
fjs.parentNode.insertBefore(js, fjs);
});
// FBの初期化(Facebook sdk.jsの完了)が未だなら待つ。
function callAfterFacebookInitialization(callback){
if(typeof FB !== "undefined"){
callback();
} else {
setTimeout(function(){
callAfterFacebookInitialization(callback);
}, 100);
}
}
var shareUrl = "http://qiita.com/";
var targetClass = ".facebook-share-button";
// twttrが使えるようになったらシェアボタンを作る。
callAfterFacebookInitialization(function(){
$(targetClass).attr("data-href", shareUrl).data("href", shareUrl);
FB.XFBML.parse();
});
FB.XFBML.parseで再描画が行われるので、その前にfacebook-share-buttonの必要な属性を上書きします。
すっきり。
Twitterで同じ事をする場合は以下URLを参照してください。
http://qiita.com/tkosuga@github/items/78266333790ed9479c8a
参考：https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/