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

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>

ボックスタイプになるとこうなる↓

(※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>"));
	}
	//クリックイベント１
	$("#tweetbtn1").click(function(){
		$("#tweet1").appendTweetButton("http://www.yahoo.co.jp/","やほお！");
		//一回クリックしたらおしまい
		$(this).unbind();
	});
	//クリックイベント２
	$("#tweetbtn2").click(function(){
		$("#tweet2").appendTweetButton("https://about.twitter.com/ja","Twitterについて");
		//一回クリックしたらおしまい
		$(this).unbind();
	});
});