FacebookでシェアするURLを動的にする方法

シングルページアプリケーション(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/