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

関連記事

【CSS】beforeのcontentで改行する

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

記事を読む

ソーシャルボタンをブログやサイトに設置する方法

TwitterやFacebookなどのソーシャルボタンを付ける方法です。ソーシャルボタンを付けるには

記事を読む

【さくらサーバー】htaccessを使って拡張子無しでアクセスする

さくらサーバーで拡張子なしのアクセスする方法について非常に苦労したのでつづっておきます。私は

記事を読む

YoutubeのURLリンクを外部プレイヤーのものに正規表現で置換する

Youtubeのアドレスを正規表現を使って抽出して外部プレイヤーのフレームに変換・置換するスクリプト

記事を読む

【twitteroauth】TwitterAPIで検索して特定のつぶやきをしたユーザーを取得する方法【PHP】

twitteroauthを利用してワード検索して特定のつぶやきをしたユーザーを取得する方法です。tw

記事を読む

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

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

記事を読む

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

LinkWithinについて ブログに関連記事を表示するパーツ『LinkWithin』を紹介します

記事を読む

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

幅固定サイトでのスマホ回転時Webサイトの横幅を合わせる方法のメモ。 下記2点の設定が必要です。

記事を読む

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

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

記事を読む

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

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

記事を読む

Windowsユーザが初めてMacBookを購入したときの注意点や感想

最近12インチのMacBookを購入しました。今までWindowsしか

Redmine3.2をUbuntu14.04にインストールして躓いた所についてメモ

はじめに Ubuntu14.04 ServerにRedmine3.2

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

→もっと見る

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