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

公開日: : JavaScript/jQuery, Twitter, サイト制作

スポンサーリンク

Twitterボタンをブログやサイトに設置するとき読み込みに時間がかかってしまって困るといったことや、複数のボタンを設置したいといったことがある場合後からボタンを読み込ませるといった方法が有効になってくると思います。そこで、今回は試しに後からTweetボタンを設置してみました。

通常の設置方法

まずはじめに通常のTweetボタンの設置方法を見直してみます。
Twitterの公式ページによると次のコードをコピペするとTweetボタンが表示されます。

<a href="https://twitter.com/share" class="twitter-share-button">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>

これじゃ分からないと思うので解凍しました。

<a href="https://twitter.com/share" class="twitter-share-button" >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>

スクリプトを見るとどうやら「http://platform.twitter.com/widgets.js」を読み込んで実行しているようです。ちなみにその中を見るとちょっと詳しくはわからなかったですが、windowオブジェクトにtwttrオブジェクトを設置して最後に「twttr.widgets.load()」メソッドを実行することでボタンを装飾しているみたいでした。

この状態は表示されたURLのシェアボタンとなっていますが任意のURLのシェアボタンとするにはaタグに「data-url」属性に指定します。また、ツイート本文を指定するには「data-text」属性にその本分を指定、ツイート数の吹き出しをボックスタイプとするには「data-count」属性を”vertical”に指定します。

例)

<a 
href="https://twitter.com/share"
class="twitter-share-button" 
data-url="http://mementoo.info" 
data-text="テストです" 
data-count="vertical">
  Tweet
</a>

ボックスタイプになるとこうなる↓
tweetbtnsample
(※Tweet数は減ったりはしません)

その他の設定については以下のリンクなどを参考にしてみてください。

後からTweetボタンを設置する

指定のスクリプトなどのタグをそのままjQueryオブジェクトとして追加するだけでTweetボタンの設置は可能です。

とりあえず先ほどの出てきた表示したページをシェアするボタンを読み込み後からスクリプトで作成するようにしてみます。

$(function(){
	$("body").append($("<a href=\"https://twitter.com/share\" class=\"twitter-share-button\">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要素(これは任意の要素でも構わない)に先ほどコピペしたものを追加しているだけです。だけといっても文字列にする際に「"」を「\"」にしたり、途中で存在する改行を消したりはしています。

先ほどのURLやつぶやき本文の属性などを考慮して次のような関数を作りました。

$.fn.appendTweetButton = function(url,text){
	$(this).append($("<a href=\"https://twitter.com/share\" class=\"twitter-share-button\" data-url=\""+url+"\" data-text=\""+text+"\" data-count=\"vertical\">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>"));
}
//Tweetボタンの設置
$("#test").appendTweetButton("http://mementoo.info/","テストです");

「http://mementoo.info/」のリンクをシェアして「テストです」とつぶやく吹き出しがボックスタイプのボタンをID名が「test」の要素に追加しました。

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

上記のコードですとTweetボタンを装飾する「twttr.widgets.load()」は2度目は呼び出されないようになっているので、例えばクリックタイミングなど複数回に分けて出現させたい場合は少し工夫する必要があります。

具体的には「~~if (!d.getElementById(id)) {~~」の場合分けで一度スクリプトを読み込ませたらもう読まないようになっているので当然「twttr.widgets.load()」は呼ばれません。なのでそのタイミングの条件分岐で「twttr.widgets.load()」を呼ぶだけです。

改良版↓

	$.fn.appendTweetButton = function(url,text){
		$(this).append($("<a href=\"https://twitter.com/share\" class=\"twitter-share-button\" data-url=\""+url+"\" data-text=\""+text+"\" data-count=\"vertical\">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);}else{twttr.widgets.load()}}(document, 'script', 'twitter-wjs');<\/script>"));
	}

デモ

ボタンをクリックしたらTweetボタンを出現させるというデモを作りました。(※一回クリックしたらイベントを削除しているので同じ奴はいっぱいでないようになっています。)




ソース

※jQueryを読み込んでいます。

HTML側

<input type="button" id="tweetbtn1" value="ツイートボタンを出す1"/>
<input type="button" id="tweetbtn2" value="ツイートボタンを出す2"/>
<hr>
<div id="tweet1"></div>
<div id="tweet2"></div>
<hr>

JS側

$(function(){
	$.fn.appendTweetButton = function(url,text){
		$(this).append($("<a href=\"https://twitter.com/share\" class=\"twitter-share-button\" data-url=\""+url+"\" data-text=\""+text+"\" data-count=\"vertical\">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);}else{twttr.widgets.load();}}(document, 'script', 'twitter-wjs');<\/script>"));
	}
	//クリックイベント1
	$("#tweetbtn1").click(function(){
		$("#tweet1").appendTweetButton("http://www.yahoo.co.jp/","やほお!");
		//一回クリックしたらおしまい
		$(this).unbind();
	});
	//クリックイベント2
	$("#tweetbtn2").click(function(){
		$("#tweet2").appendTweetButton("https://about.twitter.com/ja","Twitterについて");
		//一回クリックしたらおしまい
		$(this).unbind();
	});
});

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

関連記事

ニコニコ動画の検索APIについて調べたのでメモ

ニコニコ動画にはAPIがあり、動画の情報(タイトルとか再生数とか)を取得したり、ランキング情報(RS

記事を読む

関連記事を表示するブログパーツまとめ

これまでいくつか関連記事を表示させる方法について記事を3つの記事投稿してきましたが、ここで簡単にまと

記事を読む

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

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

記事を読む

かわいい女の子のアイコンやアバター画像を作れるサイト

TwitterやFacebookなどでアイコンが欲しくなることってあるかと思います。私も色々検索して

記事を読む

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

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

記事を読む

Twitterのフォロワーが有効かどうか評価するツール

ツイッターの自分のフォロワーがスパムや活動休止中か判定することのできるツールに『Status Peo

記事を読む

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

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

記事を読む

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

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

記事を読む

【CSS】beforeのcontentで改行する

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

記事を読む

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

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

記事を読む

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 ↑