AngularJS と組み合わせてツイートする内容を動的に変更するツイートボタンをつくる

Web AngularJS

さて、サイト内にツイートボタンを埋め込みたい場合は公式のジェネレータを使用するのが簡単です。
しかし、ここで生成したコードではページを開いたあと（ツイートボタンを表示したあと）にツイート内容を変更することができません。
そこでツイートボタンを自前で生成して、動的にツイートする内容を変更できるようなコードを書いてみました。

[ソース]

<html ng-app='MyApp'>
  <head>
    <title>
      test
    </title>
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.min.js' type='text/javascript'></script>
    <link href='http://netdna.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css' rel='stylesheet'>
    <script language='javascript'>
      angular.module("MyApp", ["ui.bootstrap"]);
    </script>
  </head>
  <body>
    <style>
      /* base css: https://dev.twitter.com/docs/tfw/embed-code-css */
      button.my-twitter-share-button{
        display: inline-block;
        padding: 1px 3px 0 19px;
       
        border: #ccc solid 1px;
        border-radius: 3px;
        background: #f8f8f8 url(//twitter.com/favicons/favicon.ico) 2px 3px no-repeat;
        background: url(//twitter.com/favicons/favicon.ico) 2px 3px no-repeat,
                    -webkit-linear-gradient(#fff, #dedede);
        background: url(//twitter.com/favicons/favicon.ico) 2px 3px no-repeat,
                    linear-gradient(#fff, #dedede);
        background-size: 16px 13px, auto auto;
       
        /* Text */
        font: bold 11px/17px Helvetica, Arial, sans-serif;
        text-decoration: none;
        color: #333;
        text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
       
        white-space: nowrap;
      }
       
      /* Colour Highlight for keyboard navigation */
      button.my-twitter-share-button:focus {
        outline: none;
        border-color: #0089cb;
      }
    </style>
    <script>
      var TweetButtonCtrl = function ($scope) {
        $scope.text = "ほむほむ";
        $scope.open_tweet_window = function (){
          window.open('https://twitter.com/share?text=' + encodeURIComponent($scope.text),'','scrollbars=yes,width=500,height=300,');
        }
      }
    </script>
    <div class='container'>
      <br>
      <div ng-controller='TweetButtonCtrl'>
        <pre>{{ text }}</pre>
        <br>
        <div class='input-group'>
          <input class='form-control' ng-model='text' type='text'>
        </div>
        <br>
        <button class='my-twitter-share-button' ng-click='open_tweet_window()'>ツイート</button>
      </div>
    </div>
  </body>
</html>

[デモサイト]


ツイートするページは https://twitter.com/share にツイートするテキストなどを渡して開きます。
今回はデータバインディングの部分で楽をするために AngularJS を使用していますが、別に AngularJS を使わなくても実装はできると思います。
そんな感じでツイートする内容を動的に変更したいと思って色々と試していたんですが思ったよりも大変でした。
もっと楽に実装する方法とかないのかなぁ。
ちなみにテキストが変更される度にツイートボタンを削除・生成するというコードも書いてみましたが、こっちはかなり重い＋チラツキが激しいので実用性はなさそうでした。

[参照]

https://dev.twitter.com/docs/tfw/embed-code-css