TwitterのツイートボタンのURLやメッセージを動的にする方法

シングルページアプリケーション(SPA)でページ状態に合わせてTwitterでシェアしたいURLを切り替えたい（動的にしたい）時がたまにありますよね。

そんな時はTwitter公式APIの「twttr.widgets.createShareButton」を使うと便利ですよ。

// Twitterの初期化
$(function() {
  var d = document;
  var s = 'script';
  var id = 'twitter-wjs';
  var js, fjs = d.getElementsByTagName(s)[0];
  if (!d.getElementById(id)) {
    js = d.createElement(s);
    js.id = id;
    js.src = 'https://platform.twitter.com/widgets.js';
    fjs.parentNode.insertBefore(js, fjs);
  }
});

// twttrの初期化(platform.twitter.com/widgets.jsの完了)が未だなら待つ。
function callAfterTwitterInitialization(callback){
  if(typeof twttr !== "undefined"){
    callback();
  } else {
    setTimeout(function(){
        callAfterTwitterInitialization(callback);
    }, 100);
  }
}

var shareUrl = "http://qiita.com/";
var targetId = "twitter-share-button";
var message = "Qiita wryyyyyyy";
var hashtag = "#wryyyyyyy";

// twttrが使えるようになったらシェアボタンを作る。
callAfterTwitterInitialization(function(){
  $('#' + targetId).empty();
  twttr.widgets.createShareButton(
    shareUrl,
    document.getElementById(targetId),
    {
      count: 'none',
      text: message,
      size: "large",
      hashtags: hashtag,
    });
});

上のスクリプトを動かすと、以下内容を共有するTwitterボタンが動的に作られます。

Qiita wryyyyyyy http://qiita.com/ #wryyyyyyy

使う時には shareUrl と message をページの状態に合わせて入れ替えて下さい。

すっきり。

参考：https://dev.twitter.com/web/javascript/creating-widgets