サイト制作に関するメモ書き

HOME > その他 > Twitterボタンの設置方法

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

【参考サイト】

コメントを残す

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

▲PAGE TOP