Twitterボタンの設置方法

デフォルトのTwitterボタンと、オリジナルデザインでのTwitterボタンを設置する方法をそれぞれメモ。

デフォルトボタン設置方法

デフォルトのボタンを使用する場合は、公式サイトから生成できます。
作成できる種類は、「リンクを共有する」「フォローする」「ハッシュタグ」「@ツイート」の4種類です。

HTML

<div><a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja">ツイート</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></div>

<div><a href="https://twitter.com/suzakinishi" class="twitter-follow-button" data-show-count="false" data-lang="ja" data-show-screen-name="false">@suzakinishiさんをフォロー</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></div>

<div><a href="https://twitter.com/intent/tweet?button_hashtag=%E6%B4%B2%E5%B4%8E%E8%A5%BF" class="twitter-hashtag-button" data-lang="ja">Tweet #%E6%B4%B2%E5%B4%8E%E8%A5%BF</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></div>

<div><a href="https://twitter.com/intent/tweet?screen_name=suzakinishi" class="twitter-mention-button" data-lang="ja">Tweet to @suzakinishi</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></div>

デフォルトボタン設置のデモページ
　

カスタムボタン設置方法

デフォルトボタンはJavaScriptでリンク先とボタンを生成しているだけみたいなので、
手動でリンク先を設定すればボタンをカスタムできます。

HTML

<div><a href="https://twitter.com/intent/tweet?original_referer='ページのURL'&text='ツイートするテキスト'&tw_p=tweetbutton&url='ページURL'" target="_blank">ツイートする</a></div>

<div><a href="https://twitter.com/intent/follow?original_referer='ページのURL'&screen_name='フォローするアカウント'&tw_p=followbutton" target="_blank">@hogeをフォロー</a></div>

<div><a href="https://twitter.com/intent/tweet?hashtags='ハッシュのテキスト'&original_referer='ページのURL'&share_with_retweet=never&tw_p=tweetbutton" target="_blank">#テキスト</a></div>

<div><a href="https://twitter.com/intent/tweet?original_referer='ページのURL'&screen_name='ツイート先のアカウント'&share_with_retweet=never&text='ツイートするテキスト'&tw_p=tweetbutton" target="_blank">@hogeへツイート</a></div>

カスタムボタン設置のデモページ
上記サンプルではテキストリンクにしていますが、画像を使用することでサイトデザインに合わせたボタン設置ができます。

target=”_blank”で別タブを開くようにしているので、デフォルトボタンのようウィンドウを開きたい場合、
JavaScriptでの対応が必要になります。