ツイートボタンをリロードする（ページが読み込まれた後に動的に再作成する）には？

ツイートボタンはこのページで自由にカスタマイズして作成できる。

Twitter Buttons | About

作成したコードをページに埋め込むと、そのページをブラウザでロードしたときに表示されるのは知っての通り。

基本的にツイートするアドレスや内容などはページをロードする時に決まっている必要があるが、ページをロードした後でそれらを変更するにはどうしたらいいだろうか？

ブログやホームページなどの静的なサイトで問題になることはあまりないだろうが、AngularJSなどで構築したシングルページアプリケーションでは大いに問題になり得る。

まず、ツイートボタンを表示するホルダーをこのように作成する。

<!-- ツイートボタンホルダー -->
<div id="tweetButtonHolder">
</div>

<!-- ツイートボタン作成サイト https://about.twitter.com/resources/buttons#tweet でコピーしたscriptタグ -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

このscriptタグは window.twttr を生成する。このオブジェクトは様々なツイートボタンを作ることができる。

Scripting: Factory Functions | Twitter Developers

なので、このtwttrオブジェクトを使ってツイートボタンホルダーの場所にツイートボタンを作る（リロードする）には、例えばこのようなコードになるだろう。

function reloadTweetButton(url, text) {

  //ツイートボタンを消す（jQuery使用）
  $('#tweetButtonHolder').empty();

  //ツイートボタンを再作成
  twttr.widgets.createShareButton(
    url, //ツイートしたいURL
    document.getElementById('tweetButtonHolder'), //ツイートボタンを挿入する場所
    {
      lang: 'ja', //言語。jaだとボタンに「ツイート」と表示される
      text: text //ツイートしたいテキスト
    }).then(function (el) {
    console.log("ツイートボタン作成完了");
  });

}