Twitter for Websitesを利用することで、基本的なTwitterの機能を簡単にWebサイトに埋め込めます。
| URL | |
|---|---|
| https://twitter.com/intent/tweet | |
| https://twitter.com/intent/retweet | |
| https://twitter.com/intent/favorite |
ツイートボタンのコードは、Twitterボタン | Aboutで作成できます。それは次のようなものです。
<a href="https://twitter.com/share"
class="twitter-share-button">Tweet</a>
<script>
!function( d, s, id )
{
var js;
var fjs = d.getElementsByTagName( s )[ 0 ];
var 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>
スクリプトの処理がやや難解となっていますが、つまりはドキュメントと同じプロトコルから、重複した読み込みを回避しつつTwitterのスクリプトを読み込んでいるだけです。簡単に記述するならば、
<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a> <script src="https://platform.twitter.com/widgets.js"></script>
とほぼ同義です。なおスクリプト冒頭の!function(...は、IIFEによる記述方法です。
a要素の属性で、表示内容をカスタマイズできます。
<a href="https://twitter.com/share"
class="twitter-share-button"
data-url="http://example.com"
data-text="TITLE"
data-size="large"
data-count="none">
Tweet</a>
Twitter / Twitterボタンのページでは、ツイートボタンのオプションの一部しか指定できません。指定可能なオプションの詳細はTweet Button | Twitter Developersにあります。
2015/11/20以降、ツイートボタンにツイート数は表示できなくなります。持続的なプラットフォームのための難しい決断 | Twitter Blogs
公式APIの代替として、ツイート数付きのツイートボタンを提供するAPI、widgetoon.jsがあります。
data-count属性で指定します。
Follow Button | Twitter Developers