ブログバトラーに登録してみた

最近巷でも噂のブログバトラーに登録しました。ところが配布されているスクリプトを見ると object 要素を document.write で書き出そうとしているし。いつもの如くではありますがスクリプトを書き換えました。もしも拙かったら連絡ください。削除します。

配布されるHTMLとスクリプト

<script id="blogbattler" type="text/javascript" src="http://blogbattler.com/js/blogbattler.js#249"></script><noscript><a href="http://blogbattler.com/"><img src="http://blogbattler.com/noscript.gif" height="288" width="140" alt="ブログバトラー"></a></noscript>

ポイントは js/blogbattler.js#249 の部分のIDです。私の場合は249なのでこれを後程スクリプトに使います。

ローカルに設置するスクリプトの作成

if (document.getElementById && document.createElement) {
var blogbattler = new Object();
blogbattler.bbOpenBattle = function(id) {
var bbBattleWin=window.open('http://blogbattler.com/battle.html#home_id=' + id,'bbBattle', 'dirctories=no,width=400,height=350,location=no,menubar=no,resizable=yes,status=no');
bbBattleWin.focus();
};
blogbattler.bbOpenBattleHistory = function() {
var bbBattleHistoryWin=window.open('http://blogbattler.com/battlehistory/index.html', 'bbBattleHistory', 'dirctories=no,width=925,height=400,location=no,menubar=no,resizable=yes,status=no');
bbBattleHistoryWin.focus();
};
blogbattler.bbOpenEditComment = function() {
var bbCommentEditWin=window.open('http://blogbattler.com/chara/edit_comment.html','bbCommentEdit','dirctories=no,width=200,height=200,location=no,menubar=no,resizable=yes,status=no');
bbCommentEditWin.focus();
};
var bb = document.getElementById('bbInsert');
var bbObject = document.createElement('object');
var bbParam = new Array(3);
for (var i = 0; i < 3; i++) {
bbParam[i] = document.createElement('param');
}
bbParam[0].setAttribute('name', 'movie');
bbParam[0].setAttribute('value','http://blogbattler.com/bbparts.swf');
bbParam[1].setAttribute('name', 'wmode');
bbParam[1].setAttribute('value','transparent');
bbParam[2].setAttribute('name', 'FlashVars');
bbParam[2].setAttribute('value','id=249');
for (var j = 0; j < 3; j++) {
bbObject.appendChild(bbParam[j]);
}
bbObject.setAttribute('data',  'http://blogbattler.com/bbparts.swf');
bbObject.setAttribute('type',  'application/x-shockwave-flash');
bbObject.setAttribute('width', '140');
bbObject.setAttribute('height','288');
bb.appendChild(bbObject);
}

具体的には本家から引っ張り出したスクリプトの document.write 云々の部分を書き換えて行く事になります。先程のIDは FlashVars に id=249 という値で渡してあげます。要は object 要素以下をDOM化してあげて id="bbInsert" を指定した div 要素に後述してあげれば良い形にしています。

実装

先程のスクリプトを blogbattler.js として保存した場合下記のように実装します。

<div id="bbInsert"><h2>Blog Battler</h2></div>
<script type="text/javascript" src="http://hoge/blogbattler.js"></script><noscript><a href="http://blogbattler.com/"><img src="http://blogbattler.com/noscript.gif" height="288" width="140" alt="ブログバトラー" /></a></noscript>

インデックスページをご覧頂くとわかりますが、確りと表示・稼動していますのでOKかなと。

参考URL
ブログバトラー [Blog Battler]

追記 2007-01-09T13:31:12+09:00

本当はインデックスに掲載していたのですが、何となく表示が重くなったような気がするのでエントリページにて稼動するように変更しました。