ウニ’s blog

勉強した結果を書いていきます

【twitter】ツイートするボタンの内容を動的に設定する

Tips

ajaxで非同期に取り出した結果を反映させたtwitterボタンを作りたい。
静的なツイート内容だと、公式のボタンジェネレータで簡単に作れるんだけど、動的にツイート内容を変えようとするといきなり難しい！

調べた所、Twitter DeveloperにFactory Functionsって言うのがあるようだ。

公式ボタンジェネレータ

Twitterボタン | About

Factory Functions

Scripting: Factory Functions — Twitter Developers

簡単な使い方

簡単なコードのサンプル（記述量減らすため、jQuery無しで)

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <p>main contents...</p>
        <div id="twitter_btn"></div> <!-- ボタンを設置するコンテナ -->
    </div>

    <!-- twitter botton -->
    <script src="https://platform.twitter.com/widgets.js"></script>

    <script>
    window.onload = function(){ // 簡単のためにjQuery 非使用
        twttr.widgets.createShareButton(
            'http://test.com', // shareするurl
            document.getElementById('twitter_btn'),
            {
              lang: 'ja', // ボタンの表示文字の言語
              count: 'none',
              text: 'test tweet', //ツイートする文面
              size: "large", //ボタンサイズ
              hashtags: 'myHashTag', // ハッシュタグ
            }
        );
    };
    </script>

</body>
</html>

動かした感じ

f:id:uni8inu:20161202003520p:plain

偉大なる先駆者

qiita.com
丁寧な処理。

終わりに

Factory Functionsにたどり着くまでが遠かった。
twitterもそろそろ歴史があるので、考え無しで検索すると古いオレオレベストプラクティスが結構引っかかってしまう。
古い記事からにげろ。英語キーワード使え(おわり)