twitter ツイートボタンを表示する †
基本的なコード †
twitterのツイートボタンは、「Twitter / ツイートボタン」でコードの取得ができます。
基本的なコードは、以下のようなものです。
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
|
カウント数表示を右側に、ツイートに表示するURLを「http://dobon.net/」に、言語を日本語にした時のコードは、以下のようになります。
<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://dobon.net/" data-count="horizontal" data-lang="ja">ツイート</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
|
更にカスタマイズする場合は、「Tweet Button | Twitter Developers」が参考になります。
(X)HTML validにする †
プロパティを"http://twitter.com/share"のクエリ文字列として指定すれば、validになります。
<a href="http://twitter.com/share?url=http%3A%2F%2Fdobon.net%2F&count=horizontal&lang=ja" class="twitter-share-button">ツイート</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js" charset="UTF-8"></script>
|
しかし、私が試した限りでは、textプロパティをクエリ文字列で指定すると、ボタンが表示されず、ただのリンクになってしまいました。よって、textは指定しないほうがよいかもしれません。
なおこの方法はJavaScriptが無効になっていても適切なリンクが表示されますので、その意味でも使える方法です。
Firefoxでボタンが表示されない †
上記のコードでは、Firefoxではボタンが表示されず、「http://twitter.com/share」へのリンクがついた「Tweet」あるいは「ツイート」というテキストが表示されるだけになってしまいます。
Firefoxでもボタンが表示されるようにするには、次のように「charset="UTF-8"」を追加します。
<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://dobon.net/" data-count="horizontal" data-lang="ja">ツイート</a><script type="text/javascript" src="http://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="http://platform.twitter.com/widgets/tweet_button.html?url=http%3A%2F%2Fdobon.net%2F&count=horizontal&lang=ja"
style="width:130px; height:20px;"></iframe>
|
フォローボタン †
フォローボタンのコードは、「Twitter / フォローボタン」で取得できます。
コメント †
