ShareButton/Tweet の変更点

追加された行はこの色です。
削除された行はこの色です。
ShareButton/Tweet へ行く。
ShareButton/Tweet の差分を削除
#title(twitter ツイートボタンを表示する)

#contents

-[[「様々なシェア、ブックマークボタン（Google+1、twitter、facebook、はてななど）を表示する」に戻る>../]]

*twitter ツイートボタンを表示する [#ic2b51ae]

#ref(../twitter1.png)
#ref(../twitter2.png)

**基本的なコード [#h1be9d2d]

twitterのツイートボタンは、「[[Twitter / ツイートボタン>http://twitter.com/goodies/tweetbutton]]」でコードの取得ができます。
twitterのツイートボタンは、「[[Twitterボタン | About>https://about.twitter.com/ja/resources/buttons]]」でコードの取得ができます。

基本的なコードは、以下のようなものです。

#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>
#prescroll(wrap=true,}}=｝｝){{
<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/」に、言語を日本語にした時のコードは、以下のようになります。
ボタンを大きく、共有するURLを「http://dobon.net/」、ツイート本文を「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>
#prescroll(wrap=true,}}=｝｝){{
<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>https://dev.twitter.com/docs/tweet-button]]」が参考になります。
更にカスタマイズする場合は、「[[Tweet Button ― Twitter Developers>https://dev.twitter.com/web/tweet-button]]」が参考になります。

**(X)HTML validにする [#hf7706f2]

プロパティを"http://twitter.com/share"のクエリ文字列として指定すれば、validになります。
プロパティを"https://twitter.com/intent/tweet"のクエリ文字列として指定すれば、validになります。

#prescroll(wrap=true){{
<a href="http://twitter.com/share?url=http%3A%2F%2Fdobon.net%2F&amp;count=horizontal&amp;lang=ja" class="twitter-share-button">ツイート</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js" charset="UTF-8"></script>
#prescroll(wrap=true,}}=｝｝){{
<a href="https://twitter.com/intent/tweet?url=http%3A%2F%2Fdobon.net%2F&amp;text=DOBON.NET&amp;lang=ja&amp;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>
}}

しかし、私が試した限りでは、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>
<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>
}}

**非同期的にロードする [#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で表示する方法が紹介されています。
「[[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&amp;count=horizontal&amp;lang=ja"
src="https://platform.twitter.com/widgets/tweet_button.html?url=http%3A%2F%2Fdobon.net%2F&amp;lang=ja"
style="width:130px; height:20px;"></iframe>
}}

**フォローボタン [#z74f1575]

フォローボタンのコードは、「[[Twitter / フォローボタン>http://twitter.com/about/resources/followbutton]]」で取得できます。
フォローボタンのコードも、「[[Twitterボタン | About>https://about.twitter.com/ja/resources/buttons#follow]]」で取得できます。

**カウント数表示 [#h40db33f]

ツイートのカウント数表示機能は、廃止されたようです。

非公式ですが、カウント数付きのツイートボタンを提供するサービスが幾つかあるようです。私が見つけたものを以下に紹介します。

***[[widgetoon.js & count.jsoon | digitiminimi>http://jsoon.digitiminimi.com/]] [#e8a6c530]

日本の会社のサービスということで、日本のサイトではよく使われているようです。

***[[TwitCount - Twitter Share Counts Alternative>http://twitcount.com/]] [#r84f6ea7]

海外のサイトではよく紹介されているサービスです。[[AddThis>../AddThis]]などのサービスにも対応しています。

***[[OpenShareCount>http://opensharecount.com/]] [#qb01151d]

こちらも海外のサイトでよく紹介されているサービスです。

**コメント [#cb47c49e]

#comment

//これより下は編集しないでください
#pageinfo([[:Category/インターネット]],2011-09-04 (日) 01:07:39,DOBON!,2011-09-05 (月) 01:25:37,DOBON!)
#pageinfo([[:Category/インターネット]],2011-09-04 (日) 01:07:39,DOBON!,2017-01-24 (火) 01:34:37,DOBON!)
▲ ▼
DoboWiki
