最近様々なブログやサイトで見かけるGO2WEB20の「Twitter "Follow" Badge」 ですが、これをAmebloに貼り付けてみました。
- GO2WEB20はWeb2.0系のサービスを紹介しているサイト
ただ、まともに貼り付けた場合、IEで動いてくれません。
説明にあるとおり、IE7以上でTwitterバッチを見せたい場合、BODYの終了タグ直前に本スクリプトを埋め込む必要があります。
（IE6はそもそも動作対象外で、FireFoxやSafariなどはBODY終了タグ以外の場所に書いてもまともに動く）
が、AmebloのJavaScriptを書けるフリースペースはそんな位置にはなく、JavaScriptで無理やり</body>直前にこのスクリプトを埋め込んでやろうかとも思いましたが、Amebaの広告タグがBODYタグの終了直前に動的に埋め込まれるため、それも無理でした。（多分、この広告タグ消すとAmebloに怒られると思いますし）
で、ちょっと邪道なんですがｊQuery使ってスクリプトを書き換えたらBODY終了タグ直前に書かなくてもIE7で正常に動かすことができました。
その他のブログサービスで、JavaScriptの書く位置が固定化され自由度がない場合は、今回のを参考にしてみれば回避できるかもしれません。
ちなみにIE用の修正スクリプトを公開されている方もいらっしゃいます。
勉強になりました。
参考： Twitterbird Internet Explorer用修正 ＠ MOT：主にプログラム勉強メモ部屋
IE7以上で正常にGO2WEB20のTwitterバッチを動かすためのスクリプト
AmebloではもともとｊQueryが使えるようになっていますが、使えない環境の場合はｊQueryのスクリプトをサーバー上に上げておくか、GoogleにホストされているｊQueryを使うなどする必要があります。（後述）
取りあえず、GO2WEB20のサイトで自分のTwitterアカウント用のJavaScriptコードを入手しておきます。
そのスクリプトを下記のように改変します。
<script>
$(document).ready(function(){
$.getScript("http://files.go2web20.net/twitterbadge/1.0/badge.js", function(){
tfb.account = 'it_boy';
tfb.label = 'follow-me';
tfb.color = '#FFB417';
tfb.side = 'r';
tfb.top = 136;
tfb.showbadge();
});
})
</script>
4行目以降の「tfb.～」の変数は、サイト上で取得したJavaScriptから適宜コピーしてください。
Amebloの場合は、上記スクリプトをフリースペースに貼り付ければ動きます。
jQueryをサーバーにアップロードできない場合は、GoogleにホストされているｊQueryを使うと便利かもしれません。
下記タグを上記タグの直前に挿入します。
- GoogleにホストされているｊQueryを利用したい場合
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3");</script>
最初は、append()を使ってscriptタグを動的に生成してやればいけるかと思いましたが、append()でscriptタグを追加する場合は、その場で実行されるらしくうまく動作しませんでした。
次に、document.body.appendChild()でscriptタグを追加してみたら、追加はされるのですがBODY終了タグの前に追加できなかったため、IEが強制終了することに・・・。
ってことで、ｊQueryでDOMが読み込まれた後に外部JavaScriptをgetScript()で呼び出してみたらうまく動作しました。
関連記事
Amebaに「なうで紹介」と「mixiチェック」ボタンを追加してみたよ
Amebloに貼り付けていた、はてなブックマークボタンを更新してみたよ
AmebloのフリープラグインのJavaScriptをGoogle codeにホストしたよ
Amebloに設置していたツイートボタンをTwitter公式のものに変えました
ReTweet数を表示できるTopsyブログパーツをAmebloに張ってみたよ
[jQuery] 外部JavaScriptファイル読込みに関する考察
Amebaブログに「Twitterへ投稿ボタン」を設置してみたよ