#title(twitter ツイートボタンを表示する) #contents *twitter ツイートボタンを表示する [#ic2b51ae] #ref(../twitter1.png) **基本的なコード [#h1be9d2d] twitterのツイートボタンは、「[[Twitter / ツイートボタン>http://twitter.com/goodies/tweetbutton]]」でコードの取得ができます。 基本的なコードは、以下のようなものです。 #prescroll(wrap=true){{ <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/」に、言語を日本語にした時のコードは、以下のようになります。 #prescroll(wrap=true){{ <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>https://dev.twitter.com/docs/tweet-button]]」が参考になります。 **(X)HTML validにする [#hf7706f2] プロパティを"http://twitter.com/share"のクエリ文字列として指定すれば、validになります。 #prescroll(wrap=true){{ <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でボタンが表示されない [#j150b403] 上記のコードでは、Firefoxではボタンが表示されず、「http://twitter.com/share」へのリンクがついた「Tweet」あるいは「ツイート」というテキストが表示されるだけになってしまいます。 Firefoxでもボタンが表示されるようにするには、次のように「charset="UTF-8"」を追加します。 #prescroll(wrap=true){{ <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> }} **非同期的にロードする [#xe02330b] [[Google+1>../Google+1]]のコードを真似して、非同期的にロードするコードを書くと、次のようになります。通常は、非同期的にロードするした方が速く表示されます。 #prescroll(wrap=true){{ <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で表示する [#w33a590b] 「[[Tweet Button | Twitter Developers>https://dev.twitter.com/docs/tweet-button]]」には、iframeで表示する方法が紹介されています。 上記のコードをiframeのコードに書き換えると、以下のようになります。urlを省略すると、現在のURLになります。 #prescroll(wrap=true){{ <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> }} **フォローボタン [#z74f1575] フォローボタンのコードは、「[[Twitter / フォローボタン>http://twitter.com/about/resources/followbutton]]」で取得できます。 **コメント [#cb47c49e] #comment //これより下は編集しないでください #pageinfo([[:Category/インターネット]],2011-09-04 (日) 01:07:39,DOBON!,2011-09-04 (日) 01:07:39,DOBON!) |