twitter ツイートボタンを表示する †
基本的なコード †
twitterのツイートボタンは、「Twitterボタン | About」でコードの取得ができます。
基本的なコードは、以下のようなものです。
<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<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>
|
ボタンを大きく、共有するURLを「http://dobon.net/」、ツイート本文を「DOBON.NET」、言語を日本語にした時のコードは、以下のようになります。
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://dobon.net/" data-text="DOBON.NET" data-lang="ja" data-size="large">ツイート</a>
<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>
|
更にカスタマイズする場合は、「Tweet Button ― Twitter Developers」が参考になります。
(X)HTML validにする †
プロパティを"https://twitter.com/intent/tweet"のクエリ文字列として指定すれば、validになります。
<a href="https://twitter.com/intent/tweet?url=http%3A%2F%2Fdobon.net%2F&text=DOBON.NET&lang=ja&size=large" class="twitter-share-button">ツイート</a>
<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>
|
なおこの方法はJavaScriptが無効になっていても適切なリンクが表示されますので、その意味でも使える方法です。
Firefoxでボタンが表示されない †
この問題は、現在は修正されたようです。よって、現在は不要です。
上記のコードでは、Firefoxではボタンが表示されず、「http://twitter.com/share」へのリンクがついた「Tweet」あるいは「ツイート」というテキストが表示されるだけになってしまいます。
Firefoxでもボタンが表示されるようにするには、次のように「charset="UTF-8"」を追加します。
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://dobon.net/" data-lang="ja">ツイート</a><script type="text/javascript" src="https://platform.twitter.com/widgets.js" charset="UTF-8"></script>
|
非同期的にロードする †
現在は、デフォルトでこのようなコードになっています。よって、現在は不要です。
Google+1のコードを真似して、非同期的にロードするコードを書くと、次のようになります。通常は、非同期的にロードするした方が速く表示されます。
<a href="http://twitter.com/share" class="twitter-share-button" data-lang="ja">ツイート</a>
<script type="text/javascript">
(function() {
var po = document.createElement('script');
po.type = 'text/javascript';
po.charset = 'UTF-8';
po.async = true;
po.src = 'http://platform.twitter.com/widgets.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
|
iframeで表示する †
「Tweet Button | Twitter Developers」には、iframeで表示する方法が紹介されていましたが、現在はありません。しかし、今でも使用できるようです。
上記のコードをiframeのコードに書き換えると、以下のようになります。urlを省略すると、現在のURLになります。
<iframe allowtransparency="true" frameborder="0" scrolling="no"
src="https://platform.twitter.com/widgets/tweet_button.html?url=http%3A%2F%2Fdobon.net%2F&lang=ja"
style="width:130px; height:20px;"></iframe>
|
フォローボタン †
フォローボタンのコードも、「Twitterボタン | About」で取得できます。
カウント数表示 †
ツイートのカウント数表示機能は、廃止されたようです。
非公式ですが、カウント数付きのツイートボタンを提供するサービスが幾つかあるようです。私が見つけたものを以下に紹介します。
日本の会社のサービスということで、日本のサイトではよく使われているようです。
海外のサイトではよく紹介されているサービスです。AddThisなどのサービスにも対応しています。
こちらも海外のサイトでよく紹介されているサービスです。
コメント †
