【Javascript】いいね！ボタンやツイートボタンのスクリプトを外部jsに出す

Tweet

Category JavaScript 2012/07/01

問題

Google+ボタンや、いいね！ボタンや、ツイートボタンやはてなブックマークボタンのJavascriptは、HTML下部にしか書けないのかな？

<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script> とか

<script type="text/javascript" src="//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=**********"></script> とか

<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script> とか

答え

外部jsに書いても動く。

jqueryを読み込んでいる場合は、以下のように書けば、ページの読み込みが終わった後で、いいね！ボタンやはてなブックマークボタンを表示してくれる。

下の例では、各サービス提供のスクリプトが元になっていたりで書き方が統一されていないが、やっていることはだいたい同じ。動的にscript要素を挿入している。

$(function(){

	/* twitter */
	!function(d,s,id){
		var js, fjs=d.getElementsByTagName(s)[0];
		if(!d.getElementById(id)){
			js=d.createElement(s);
			js.id=id;
			js.src="//platform.twitter.com/widgets.js";
			fjs.parentNode.insertBefore(js,fjs);
		}
	}(document,"script","twitter-wjs");

	/* facebook */
	(function(d, s, id) {
		var js, fjs = d.getElementsByTagName(s)[0];
		if (d.getElementById(id)) return;
		js = d.createElement(s); js.id = id;
		js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=236187796455704";
		fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));

	/* g-plus */
	window.___gcfg = {lang: 'ja'};
	(function() {
		var po = document.createElement('script');
		po.type = 'text/javascript';
		po.async = true;
		po.src = 'https://apis.google.com/js/plusone.js';
		var s = document.getElementsByTagName('script')[0];
		s.parentNode.insertBefore(po, s);
	})();

	/* hatena */
	(function() {
		var po = document.createElement('script');
		po.type = 'text/javascript';
		po.async = true;
		po.charset = 'utf-8';
		po.src = 'http://b.st-hatena.com/js/bookmark_button.js';
		var s = document.getElementsByTagName('script')[0];
		s.parentNode.insertBefore(po, s);
	})();

});

$(document).ready() の タイミングでscriptを追加するようにすると、スクリプトの読み込みが遅い場合でもページの表示が止まることはなくなるので、表示が速くなったように感じるかもしれない。