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

関連記事

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

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

記事を読む

ニコニコ動画のユーザーおよびマイリストのRSSフィード

ニコニコ動画のユーザーページのRSSフィードおよびマイリストのRSSフィードは次のようになっています

記事を読む

jThree.jsやThree.jsでcanvasの画面をキャプチャして画像にする方法

WebGLのライブラリであるThree.jsやそのラッパーライブラリのjThree.jsでcanva

記事を読む

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

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

記事を読む

javascriptにおけるfor文の書き方

1. for文とは ある条件が正しいときに処理を繰り返すというループを記述するための文です。 似

記事を読む

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

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

記事を読む

Canvasの画像をリサイズする簡単な方法【HTML5・javascript】

調べてみるとCanvasをリサイズするようなjavascriptの関数は存在しないようなので自前で作

記事を読む

【3DCG・MMD】カメラレンズによる見え方シミュレータ作成について

カメラのレンズが違うことでどのくらい出来上がる写真に差が出てくるのかを確かめることのできるシミュレー

記事を読む

WordPressの記事内でJavaScriptを動かす

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

記事を読む

【ImgToAA】画像をAA化するツール

指定の画像を読み込ませてAA化するツールです。サンプルはこちら。 (使い方) 画像ファイ

記事を読む

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 ↑