FC2拍手をページロード後に読み込む方法

  • 投稿 : 2012-04-04
  • 更新 : 2013-05-18

FC2拍手が表示されないときがあった

去年のゴールデンウイーク前後にFC2拍手が当ブログで表示されないと言うことがありました。表示されないだけならよいのですが、どうも画像データをサーバー側に取得するところでページ表示が固まるというか遅くなる現象も起こりました。

参考記事:FC2拍手の画像が表示されないことがある

FC2拍手をページロード後に読むように改造

いろいろ試してみたのですが、どうもうまくいかないので、思い切ってページロード後に読むように改造してみました。ページロード後(表示後)の動作なら、遅くなってもページが表示されてるわけですから被害は最小限に抑えられるでしょう。

原理は、ページ表示後にスクロールされたらFC2拍手の画像を取得して、代替え画像と置き換えると言うことをしています。以下のサンプルでは、スクロールを一切しない場合は、FC2拍手が表示されません(汗)。

半年ぐらいこれで運用してますが、大きな問題はないようです。FC2拍手も以前通りにいただいています。
サンプルはBlogger用です。

手抜き過ぎるコードと仕様なので、参考程度に・・(自己責任で・・)。
<a expr:href='"http://clap.fc2.com/post/あなたのFC2ID/?url=" + data:post.url + "&title=" + data:post.title + "(" + data:blog.title + ")"'   title='拍手する by FC2'><span expr:id='"fc2_"+data:post.id'><img class="img006" width='80' height='18' alt='拍手' src="代替え画像.png"/></span></a>

<script type="text/javascript">
//イベント名
var sEvent="scroll";

function fc2_script<data:post.id/>(){
// イベント時の処理 //

 h= getBrowserHeight()+getScrollPosition();
    t= document.getElementById("fc2_"+"<data:post.id/>").offsetTop;
 if(t>h){
  return;
 }

 document.getElementById("fc2_"+"<data:post.id/>").innerHTML = "<img alt='拍手' expr:src='"http://clap.fc2.com/images/button/white/あなたのFC2ID?url=" + data:post.url' width='80' height='18'/>";

 if(window.removeEventListener){
  window.removeEventListener(sEvent, arguments.callee, false);
 } 
 else if(window.detachEvent ){
  window.detachEvent('on'+sEvent,arguments.callee);
 } 
 else{
  //古いブラウザーでの動作はあきらめる
 }
}

//イベントに登録
if(window.addEventListener){
 window.addEventListener(sEvent,fc2_script<data:post.id/>,false);
} 
else if(window.attachEvent){
 window.attachEvent('on'+sEvent,fc2_script<data:post.id/>);
} 
else{
 //古いブラウザーでの動作はあきらめる

}
</script>

【ブログ内で関連ある記事】

FC2拍手の画像が表示されないことがある
BloggerにFC2拍手とランキングを組み込む
WordPressにFC2拍手を設置する|某氏の戯言
アメブロにFC2メールフォームを設置する方法(メールフォームの埋め込み)
FC2拍手のスパムやらbotの攻撃に対抗する方法
スポンサーリンク