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

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

関連記事

【jQuery】サイドバー固定に役立つサイト集

縦スクロール 縦方向にスクロールして指定の位置に来たら要素を固定させる方法のリンク集を紹介させてい

記事を読む

Windows7でVirtualBoxとVagrantを使ってローカル開発環境を構築する

Vagrant(ベイグラント)とは http://www.vagrantup.comで入手できる仮

記事を読む

TwitterAPIの仕様変更【2014年1月】

TwitterAPIの仕様が2014/1/15未明から変更されたようで一部のJanetter

記事を読む

スクレイピングをサポートしてくれるAPI【kimono】

kimonoというスクレイピングをAPI化してくれるという素晴らしいサービスがあります。

記事を読む

関連記事を表示させるブログパーツOutbrainの導入方法

関連記事を表示させるブログパーツOutbrainの紹介です。 このOutbrainの長所は

記事を読む

PEARをレンタルサーバーにインストールする

共用レンタルサーバーにPEARをインストールしたときにてこずったところについてメモ。今回レンタルサー

記事を読む

【PHP】Twitterのツイート数やはてぶ数を取得する

指定URLのTweet数の取得 Twitterでツイート数を取得するには指定のURLにアクセスする

記事を読む

人気記事表示ブログパーツの忍者レコメンドを使ってみる

忍者レコメンドとは 今回は忍者レコメンドという人気記事表示のブログパーツを紹介します。忍者レコメン

記事を読む

ニコニコ動画のユーザーおよびマイリストのRSSフィード

ニコニコ動画のユーザーページのRSSフィードおよびマイリストのRSSフィードは次のようになっています

記事を読む

ニコニコ動画やYoutubeのRSSフィードもサムネ付きで手軽に表示できるブログパーツ

通常サイトのRSSだけでなく、ニコニコ動画やYoutubeの動画サイトのRSSを読み込んでサムネ画像

記事を読む

UWSCを使ったソフト自動立ち上げ【SoftEther VPN Server】

やりたいこと 最近SoftEtherという筑波大学発のベンチャー企業

【PHP】headerでContent-Typeを指定したのに効かない場合の対処法

PHPでサイトマップを作ろうと思い、XML形式のファイルを出力しようと

スマホ向け幅固定サイトの回転時の幅対応方法

幅固定サイトでのスマホ回転時Webサイトの横幅を合わせる方法のメモ。

【PHP】特定のURLからそのAtomやRSSのフィードを抽出する方法

特定のURLからRSSやATOMのフィードを抽出する方法をメモ。 流

フィード抽出ツール(RSS1.0、RSS2.0、atom)

任意URL サイト名 サイトURL RSS1.0

格安プラン限定レンタルサーバー機能比較表(2016年)

はじめに  最近新しい共用サーバーをレンタルしようと思い調査およびそ

kindle unlimitedが便利だったのでお勧めの使い方など感想メモ

 kindle unlimitedというサービスが8/3からAmazo

→もっと見る

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