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

関連記事

美人画像を表示してくれるブログパーツまとめ

美人時計など有名なものもありますが、美人画像を表示してくれるブログパーツをまとめました。暦や時刻を表

記事を読む

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

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

記事を読む

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

後で読みたい記事を保存することのできるPocketのソーシャルボタンの設置方法についてです。このボタ

記事を読む

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

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

記事を読む

ニコニコ動画の外部プレイヤーを動的に設置する【javascript/jQuery】

ニコニコ動画の外部プレイヤーはページのはじめの読み込みのときにしか表示されず、javascriptで

記事を読む

ニコニコ動画のRSSをjavascriptで読み込んで表示させる

ニコニコ動画のランキングRSSをjQueryで読み込んで表示するプログラムを作成しました。RSSの読

記事を読む

WordPressの記事内でJavaScriptを動かす

WordPressでは厄介なことにJavaScriptが動かない場合があります。この記事では動かない

記事を読む

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

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

記事を読む

jQueryのカラーピッカーライブラリFarbtastic Color Pickerを使う

.farbtastic .wheel { background: url(http://mem

記事を読む

livedoorblogのタグのページが404 Not Found

別のブログとしてライブドアのものを使っているのですが、タグを編集していた際に特定のタグ一

記事を読む

NVIDIA DIGITSをSupervisorを使って自動起動する

はじめに 先日Ubuntu14.04にDIGITS 5をGPUなしP

【2017年度】GeForce 1080 Ti搭載BTOパソコン比較

はじめに 最近ディープラーニング用にGPUのないPCにDIGITSを

Windows用のシンプルなストップウォッチソフト紹介

Windows(10)でも使える使いやすいKAZAMITimerという

MNISTをDIGITS 5のCPUのみで試す(GPUなし)

はじめに DIGITSを使えばGUI操作で簡単にディープラーニングが

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

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

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

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

UWSCを使ったソフト自動立ち上げ【SoftEther VPN Server】

やりたいこと 最近SoftEtherという筑波大学発のベンチャー企業

→もっと見る

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