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

公開日: : 最終更新日:2014/08/14 Twitter, サイト制作

スポンサーリンク

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のボタンの複数設置についての記事もありますので参考にしてみてください。

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

関連記事

WordPressサイトのSSL対応(HTTPS化)手順のまとめ【さくらサーバー】

先週頃にこのサイトをSSL対応しましたのでその流れについてまとめておき

【Google Charts】動的にグラフを更新する方法

はじめに Webサイト上でグラフを描こうと思った場合、いくつかのJa

体重変化量計算シミュレータ【ダイエット/肥満】

ツール本体 入力 カロリー入力 1日の余剰摂取/消費カロリー

おサイフケータイ対応ストレージ32GBのSIMフリースマホまとめ【2017年秋版】

はじめに SIMフリーの格安スマホのおサイフケータイ機能付きのもので

リクルート期間限定ポイントの有効な使い道

はじめに  先日クレジットカードの見直し活動の一環でポイント還元率の

初心者がお金を貯めるための節約・財テク手法まとめ【ポイント還元・投資・税金対策】

はじめに  最近なるべく節約しようと思い、お金周りに関して色々調べて

動画講座を効率的にキャプチャして復習する方法

はじめに  最近、動画媒体の講座などをたまに視聴しています。独学だと

→もっと見る

  • Author : ががんぼ
    プログラミングやWeb関係で気付いたことについてメモしていく予定。だいたいが備忘録ですが、自分でサンプルを作って動かしてみたりしています。
PAGE TOP ↑