Twitterボタンの設置方法

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

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

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

how-to-install-the-twitter-button01

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での対応が必要になります。

参考サイト

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年10月
 12345
6789101112
13141516171819
20212223242526
2728293031