【twitter】ツイートするボタンの内容を動的に設定する
ajaxで非同期に取り出した結果を反映させたtwitterボタンを作りたい。
静的なツイート内容だと、公式のボタンジェネレータで簡単に作れるんだけど、動的にツイート内容を変えようとするといきなり難しい!
調べた所、Twitter DeveloperにFactory Functionsって言うのがあるようだ。
公式ボタンジェネレータ
Factory Functions
簡単な使い方
- https://platform.twitter.com/widgets.jsを読み込む
- twttr.widgets.createShareButtonを呼び出す
- 簡単!
簡単なコードのサンプル(記述量減らすため、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>
動かした感じ
偉大なる先駆者
qiita.com
丁寧な処理。
終わりに
Factory Functionsにたどり着くまでが遠かった。
twitterもそろそろ歴史があるので、考え無しで検索すると古いオレオレベストプラクティスが結構引っかかってしまう。
古い記事からにげろ。英語キーワード使え(おわり)