任意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
  • このエントリーをはてなブックマークに追加

関連記事

encodingtype

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

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

記事を読む

PAK12_10naname500-thumb-500xauto-3071

さくらとロリポップのcronについての比較

私は今さくらのレンタルサーバーとロリポップのレンタルサーバーを両方試してみているのですがそのcron

記事を読む

41e9FqN1XjL._AA180_

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

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

記事を読む

057646

FC2ブログからWordPressへの引っ越しについて

今までFC2ブログでメモを残していましたが、WordPressに移行することにしました。理由としては

記事を読む

a8selfback1

なるべく安くロリポップを申し込む方法

ロリポップというレンタルサーバーは元々比較的安く、よくキャンペーンなどで割引をやっているので安価にC

記事を読む

adobe-blueprint-15

【CSS】beforeのcontentで改行する

.bsample1:before{ content:"★参考★\A"; } .bsampl

記事を読む

wwwimage

お名前.comのでサブドメインを取得してロリポップで使う方法

タイトルどおりなのですがお名前.comで取得した独自ドメインからサブドメインを取得し、ロリポップで使

記事を読む

twitterimage

【jQuery/javascript】Tweetボタンを動的に設置する

Twitterボタンをブログやサイトに設置するとき読み込みに時間がかかってしまって困るといったことや

記事を読む

nc23924

ニコニコ動画のURLリンクから外部プレイヤーのスクリプトに正規表現で置換する

ニコニコ動画の動画のアドレスを抽出して外部プレイヤー貼りつけソースのスクリプトに変換するソースです。

記事を読む

3782274675_baefcac242_m

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

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

記事を読む

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

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

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

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

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

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

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

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

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

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

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

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

TAKEBE055122558_TP_V
寝る前にスマホを見ると斜視になる可能性とその対策

はじめに  寝る前などスマホを横になりながら見続けると斜視になる可能

→もっと見る

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