Twitter Web関連

任意URLのTweetボタンを複数設置する

更新日:

スポンサードリンク

TwitterのTweetボタンをWebサイトやブログに複数設置する方法です。複数設置するということは開いているページのものだけではなく任意のURLのページもつぶやけるようにします。

単純な設置の仕方は『Add buttons to your website to help your visitors share content and connect on Twitter.』を参考にしてください。今回はこのページを参照しつつ複数設置したいと思います。

まずはじめに任意のURLを指定したTweetボタンを作ってみます。例えばYahooのシェアボタンを設置してみると次のようになります

これは先ほどのTwitterのボタン設置ページの手順通りに設定しただけのもので、非常に簡単にできます。

tweetボタン設置

では複数設置する場合なのですがまず先ほどのように一つ設置したときにコピペしたコードは次のようになっていると思います。

<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.yahoo.co.jp/">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>

この太字にした部分は最後の方で一度だけ呼べば大丈夫なスクリプトですのでこの部分はbodyタグの終了前などに切り貼りして、その上の赤字のaタグのリンクだけを表示させたい場所にコピペしてください。シェア先のURLは"data-url"属性に指定します。

では早速試しにGoogle、hatena、Twitterへのシェアボタンを設置してみます。

<a href="https://twitter.com/share" class="twitter-share-button" data-
url="https://www.google.co.jp/">Tweet</a>
<a href="https://twitter.com/share" class="twitter-share-button" data-
url="http://www.hatena.ne.jp/">Tweet</a>
<a href="https://twitter.com/share" class="twitter-share-button" data-
url="https://twitter.com/">Tweet</a>
<script type="text/javascript">!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>

デザイン等はまた別に工夫することをおすすめします。
このほかにも後で読む機能のPocketのボタンの複数設置についての記事もありますので参考にしてみてください。

スポンサードリンク

-Twitter, Web関連

Copyright© めめんと , 2019 All Rights Reserved Powered by AFFINGER5.