Twitterbird Internet Explorer用修正

流行便乗で登録してみたものの…
てことで
Blog持ってる人なら貼りたくなる『Twitterbird』

こちら、このまま貼り付けたのでは、IEで巧く表示されません。

・IE6では表示されない。
・IE7以上ではタグ貼った場所以降表示されない。

『IE7以上のバグ』の場合は、</body>の前にタグを貼れば何とかごまかせるんだけど、そうそう貼れる場所じゃない。

貼る側の身からしたら、貼る場所固定化されたくないよね。
どこにコード貼っても、同じように使えて当然くらいの勢いじゃない。

そうやって貼るための修正方法。

修正方法

確認したところ、問題が起きるのはIEだけ。
Firefoxはもちろんのこと、OperaもSafariもChromeでも問題はない。
だから、IEだけ別に用意としました。(デバッグめんどいし)

まず普通にタグを貼り、

tfb.showbadge();

を

if(navigator.appName=="Microsoft Internet Explorer"){
	ieshowbadge(tfb);
}else{
	tfb.showbadge();
	document.getElementById('tfbAbout').style.position="fixed";
}

と修正。
※IE以外のとこについてるのはabout(?の部分)が付いてこないのを修正するため

全体的にはこんな感じ

<!-- twitter follow badge by go2web20 -->
<script src='http://files.go2web20.net/twitterbadge/1.0/badge.js' type='text/javascript'></script>
<script type='text/javascript' charset='utf-8'><!--
tfb.account = 'Twitterアカウント';
tfb.label = ' follow-me / follow-us / follow / my-twitter のいずれか(表示させる文字)';
tfb.color = '基準色';
tfb.side = 'r(右表示) / ｌ(左表示) のいずれか';
tfb.top = 上からのpx;
if(navigator.appName=="Microsoft Internet Explorer"){
	ieshowbadge(tfb);
}else{
	tfb.showbadge();
	document.getElementById('tfbAbout').style.position="fixed";
}
--></script>
<!-- end of twitter follow badge -->

次に外部JSでも、HTMLに追加でもいいから、以下を追加。

// IE用　Twitter bird@to
function ieshowbadge(tfb){

	if(tfb.side=='l'){ tfb.myside = "left"; tfb.remyside = "right"; }
	else{ tfb.myside = "right"; tfb.remyside = "left";}
	
	var element = document.createElement("div");
	var str = "<div id='twitterFollowBadge' style='z-index:1; position:absolute; "+tfb.myside+":0;'>";
	element.innerHTML = str;
	document.body.insertBefore(element, window.document.body.firstChild);

	if (window.XMLHttpRequest) { // IE7以上
		myposition = "fixed";
	} else {myposition = "absolute";}

	tfb.tabStyleCode='position:'+myposition+';'
		+'top:'+tfb.top+'px;'
		+'width:30px;'
		+'height:119px;'
		+'z-index:8765;'
		+'cursor:pointer;'
		+'background:'+tfb.color+' url(http://files.go2web20.net/twitterbadge/1.0/bg-badge/'+tfb.label+'.png);'+'background-repeat:no-repeat;'
		+ tfb.myside+':0; background-position:'+tfb.remyside+' top;';
		
	tfb.aboutStyleCode='position:'+myposition+';'
		+'top:'+(parseInt(tfb.top)+107)+'px;'
		+'width:10px;'+'height:11px;'+'z-index:9876;'+'cursor:pointer;'
		+'background:url(http://files.go2web20.net/twitterbadge/1.0/icon-about.png);'+'background-repeat:no-repeat;'
		+ tfb.myside+':0;';

	tfbMainDiv = document.getElementById('twitterFollowBadge');

	tfbMainDiv.innerHTML = '<div id="tfbTab" style="'+tfb.tabStyleCode+'"></div><div id="tfbAbout" style="'+tfb.aboutStyleCode+'"></div>'
			+ '<style>#tfbAbout{visibility:hidden;} #twitterFollowBadge:hover #tfbAbout{visibility:hidden;}</style>';

	if(myposition == "absolute"){
		document.getElementById('twitterFollowBadge').style.display = "blook";
    }

	document.getElementById('tfbTab').onclick=function(){
		window.open('http://www.go2web20.net/twitterfollowbadge/redir.htm?' + tfb.account);
	}

	document.getElementById('tfbAbout').onclick=function(){
		window.open('http://www.go2web20.net/twitterFollowBadge/');
	}
}

IE6含めて7より前のIEに表示させたくないなら、上記『ieshowbadge』内を、下記のように修正

if (window.XMLHttpRequest) { // IE7以上
	myposition = "fixed";
} else {return;}

原因と対応の詳細

IE6は『window.XMLHttpRequest』に対応していないから、空終了なのだ。
IEで起動時、即『document.body.appendChild』は動かないのだ。(即終了)
※因みに『document.body.innerHTML』も動かない(即終了)
『document.body』は特別なのだ。

通常『document.body.appendChild』を、ブラウザ表示時に起動させるには

window.onload = function (){
	document.body.appendChild(～);
}

でも『window.onload = function (){}』なんて、このajax普及の中、個人的に使うもんだから、他の手を考えたい。

また表示させる場所も大事。

まず「IE6」は『positon:fiex』が使えないから、『position:absolate』を変わりに使わなきゃいけないんだけど
table内にタグを出力しようもんなら、もうブラウザのサイズとか無視でテーブルに固定される。

他のブラウザでも出される場所を基準点にするから、場所がブラウザ毎に位置がズレたりする。
回避するためにbody直子タグとしたい。

何やかんやで色々試してたら
エレメントにエレメント追加する
『document.body.insertBefore()』は、『window.onload』を使わずとも、読み込み直後、呼べる
てことを発見した。

だから

var element = document.createElement("div");
var str = "<div id='twitterFollowBadge' style='position:absolute;'>";
element.innerHTML = str;
document.body.insertBefore(element, window.document.body.firstChild);

とすればよかった。
後はまぁほとんど同じでも構わないのだ。(問題はdocument.bodyだけだし)

コイツは…ブログパーツ作るのに使える!!!

因みに
IE6はpngに対応してないから、色薄いし
IE6に対応はさせたけど、scroll計算はせずに固定しといた(めんどくさいから)
※やりたい人は自分でどうぞ!!!