ブログ高速化を狙って? Twitter Follow Badgeを自作した。

ちょっと前の話題だけど、「Googleがついに順位決定に表示速度を使い始めた」らしい。

ウェブマスターツールでも「サイトのパフォーマンス」でサイトの読込時間のグラフが出るようになったし、またアドバイスとしてDNSルックアップを削減しなさいとか、gzip圧縮を有効にしなさいとか教えてくれるようになった。
これはこれで便利だけど、僕自身はまだ、サイトの読込時間にそんなに神経尖らせる時期じゃないなぁと思ってる。漠然と。

まぁでも、色んなブログツール使ってるとブログ自体は一見華やかでいいけど、確かにDNSルックアップは増大するし、サイトのパフォーマンスは低下する。
今回はあまりにもDNSルックアップの回数が多かったので、ブログツールの見直しを行った。
実際にブログへの流入が望めないブログツールは一気に削除した。

また、今まではTwitterのFollowバッジとして、Twitter “Follow” Badgeを使ってたけど、ここのサーバーが頻繁に落ちるし、これもまたDNSルックアップを増やしている要因なので、自作することにした。

Twitter Follow Badge

ただ、リンクする画像をサイドに表示するだけなので、なんてことのない処理だけど。。。
まぁ、Twitter以外にも、Flickrやmixi等も対象に出来るし、自分の好きな画像を使えるので使い勝手はいいはず。
htmlで直接書いてもよかったけど、JavaScriptで。
関数を公開するので使いたい人はコピーして使って下さい。

function showbadge(){
	var side = "l"; //"l":左寄せ "r":右寄せ
	var top = 130; //画像の上位置
	var width = 30; //画像の幅
	var height = 129; //画像の高さ
	var imgUrl = "http://daisuke-watanabe.com/img/twitter_logo.gif"; //画像のURL
	var divId = "TwitterBadge"; //生成するDIVのID(任意で)
	var tipTitle = "followしてね"; //ToolTipの文言
	var linkUrl = "http://twitter.com/dw5"; //リンク先URL
	
	if(!window.XMLHttpRequest)return;
	if(side!='l')
	{
		side='r';
	}
	tabStyleCode='position:fixed;'+'top:'+top+'px;'+'width:'+width+'px;'+'height:'+height+'px;'+'z-index:10000;'+'cursor:pointer;'+'background:url('+imgUrl+') no-repeat;';
	if(side=='l')
	{
		tabStyleCode+='left:0; background-position:right top;';
	}
	else
	{
		tabStyleCode+='right:0; background-position:left top;';
	}
	
	if(!document.getElementById(divId))
	{
		tfbMainDiv = document.createElement('div');
		tfbMainDiv.setAttribute('id',divId);
		document.body.appendChild(tfbMainDiv);
	}
	else
	{
		tfbMainDiv = document.getElementById(divId);
	}
	tfbMainDiv.innerHTML += '
';
}

上記関数を読み込んでるjsファイルに追加、もしくは新規jsファイルを使ってアップロード
そして</body>の直前で呼び出せばOK。

必ず</body>の直前じゃないとIEでうまく言うことを聞いてくれません。。。
[tmkm-amazon]4873114462[/tmkm-amazon]