ツイートボタン（twitterウィジェット） [js]

2014年に制作した記事を2015/10に加筆修正

Twitter社が提供しているウィジェットを使って、ツイートボタンを埋め込む方法です。
基本、コードをコピペするだけで設置できます。

sample

html

<a href="https://twitter.com/share" class="twitter-share-button" data-url="URL" data-text="テキスト">Tweet</a>

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

  1. ツイッター社のボタン選択画面ではり付けたいボタンを選択する。
  2. URLやハッシュタグなど必要な情報を入力し、ソースをwebページの適当な箇所にコピペする。
  3. たとえば、「リンクを共有する」を選択すると、出力されるhtmlソースのclass名は[twitter-share-button]になるし、「フォローする」なら[twitter-follow-button]になる。
    「リンクを共有する」のオプションでURLを指定すると、出力されるhtmlソースのdata-urlの値は指定したurlになる。ちなみにこのdata-urlを省略すると、ツイートボタンをはり付けたページのurlがツイートボタンをクリックしたときに表示されるツイートフォームにあらかじめ入力されているurlになる。
  • ボタン選択画面では、このhtmlと下のスクリプトとがセットで提供されているので、通常はまとめてコピーして適当な箇所にはり付けてください。
  • ツイートボタンのdata属性やカスタマイズ方法については、ページ下の参考ページを参照してください。

js

<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>

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

基本、ツイッター社のボタン選択画面からコピペするだけです。特にカスタマイズの必要はありません。
html4やxhtmlのときはscriptタグにtype属性を追加しても問題なく動作します。

  • ボタン選択画面でソースをコピペすると、htmlとひとまとめになっていますが、たとえば、このスクリプトだけをheadタグ内に記述しても問題ないです。htmlのコードのすぐそばになければならないことはないです。
  • 1ページに複数のツイートボタンを設置したり、ツイートボタンのほかにタイムラインを表示したりするときは、このスクリプトを複数記述しなくてもよいです。このスクリプトは1ページに1つあれば事足ります。

ツイートボタンを設置したページの表示がやたら重いとき

ツイートボタンだけではないのですが、SNS関連のボタンなどを設置しているページがやたら重くなる場合があります。
これは、HTMLは原則ソースの上から順番に実行していくので、
SNSボタンを読み込むのに時間がかかる→webページそのものの表示も遅延する
ということが起こっています。これを回避するために時間差で読み込むようにする方法があります。

方法としてはいろいろありますが、例として以下のような方法があります。

<div id="sns_btn"></div>

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

表示させたい箇所に適当なid名（class名でもよい）を付けた空のdivタグ（など）を設置します。

// Twitter
var twitter_btn =
"<div class='twitter_btn'><a href='https://twitter.com/share' class='twitter-share-button' data-text='＊＊＊＊＊' data-url='＠＠＠＠＠' data-lang='ja' data-hashtags='＃＃＃＃＃'>ツイート</a></div>"
+"<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>";

// 1秒後
setTimeout(function(){
  $('#sns_btn').append(twitter_btn);
},1000);

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

headタグ内などに上のようなスクリプトを記述します。
ツイッター社のボタン選択画面からコピーしたソースを変数に入れて、上記の例では1秒後（=1000ミリ秒後）にid[sns_btn]を設定したhtmlタグ内に挿入させています。

  • data-text（＊＊＊＊＊の部分）にツイート本文、data-url（＠＠＠＠＠の部分）にツイートしたいページのURL、data-hashtags（＃＃＃＃＃の部分）にハッシュタグを入れてください。
  • ツイートボタンを同一ページに複数設置する場合はscriptタグの部分はひとつで良いので、変数に入れずにheadタグ内など適当なところに記述しておくと良いです。
  • ほかのソーシャルボタンも同様にできますが、ものによっては変数に入れてしまうとうまく動作しないものもあるので注意してください。
  • 複数のソーシャルボタンを並べたいときなどは、ソーシャルボタンのコードをそれぞれ変数に格納した後、append()内で+を使って繋いでいくと良いでしょう。

ほかにscriptタグにasync属性を使って、非同期で読み込む方法などもあります。

IE8以下でtwitterのツイートボタンが表示されない問題

2015/01からtwitterはIE8以下のサポートを打ち切ったようです。

そのため、IE8以下においてツイートボタンや埋め込みタイムラインが表示されません。
なお、X-UA-Compatibleを設定しているwebページにおいて、contentの値がIE=8（以下）になっているページではIE9以上でも表示されていません。

IE9以降についても、そのうちサポートしなくなる可能性があります。
ツイッター社の動向に注意しましょう。

戻る

Top