【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();
	});
});

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

関連記事

WordPressサイトのSSL対応(HTTPS化)手順のまとめ【さくらサーバー】

先週頃にこのサイトをSSL対応しましたのでその流れについてまとめておき

【Google Charts】動的にグラフを更新する方法

はじめに Webサイト上でグラフを描こうと思った場合、いくつかのJa

体重変化量計算シミュレータ【ダイエット/肥満】

ツール本体 入力 カロリー入力 1日の余剰摂取/消費カロリー

おサイフケータイ対応ストレージ32GBのSIMフリースマホまとめ【2017年秋版】

はじめに SIMフリーの格安スマホのおサイフケータイ機能付きのもので

リクルート期間限定ポイントの有効な使い道

はじめに  先日クレジットカードの見直し活動の一環でポイント還元率の

初心者がお金を貯めるための節約・財テク手法まとめ【ポイント還元・投資・税金対策】

はじめに  最近なるべく節約しようと思い、お金周りに関して色々調べて

動画講座を効率的にキャプチャして復習する方法

はじめに  最近、動画媒体の講座などをたまに視聴しています。独学だと

→もっと見る

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