［み］FacebookのLikeBoxをあとから読み込ませる方法

そういえば、最近Facebookのアプリをさっぱりさわらなくなりました…。あんなにハマっていたCityVilleも完全にノータッチのみはらです。

Facebookは、アプリしか見ていませんが、「いいね！」されると、なんかハッピーな気持ちになりますよね？だから、みはら.comにもFacebookの「LikeBox」を設置しているわけですが、このLikeBoxがどうも読み込みに時間がかかるんです。
もちろん、このLikeBoxだけでなく、いろんな理由からみはら.comは読み込みに時間がかかっているんですが、ひとつの作戦として、このLikeBoxを何秒かずらして読み込ませることで、サイトを開いてもらったときの重たさを軽減しようと思います。

時間をずらして読み込みを開始する方法

数秒後に作動するなんて、なんか、時限爆弾みたいですね。
参考（ほぼ全コピペ）にさせていただいたのがこちらの記事です。お世話になりました、ありがとうございます。

Webサイトの読み込み体感速度が2秒くらい上がるかも。SNSボタンは後から読み込め！

こちらの記事では、TwitterやらFacebookやらSNSのボタンたちを後から読み込ませることで、読み込みの体感速度を上げるっていうことでした。みはら.comでは、SNSボタンはプラグインを使って、記事トップに表示しているので、SNSボタンのほうは今回はちょっと放置します。

で、コードです。
まずは、LikeBoxを表示させるところにこれです。

HTML

<div id="iinebox"><!-- ここにLikeBoxが表示されます --></div>

次に</body>の直前に書くやつです。

HTML

<script type="text/javascript">
// 最初に変数を定義
var facebook_likebox;
facebook_likebox =
  '<div class="iine"><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2F%E3%81%BF%E3%81%AF%E3%82%89com%2F313319718705646&amp;width=300&amp;height=290&amp;colorscheme=light&amp;show_faces=true&amp;border_color=d9d9d9&amp;stream=false&amp;header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:290px;" allowTransparency="true"></iframe></div>';

// 5秒後 <div id="iinebox"></div> の中に表示させる
setTimeout(function(){
  $('#iinebox').append(facebook_likebox);
},5000);
</script>

ちなみに、<div class=”iine”>はスタイルのためにくっつけただけです。

こんなカンジです。
みなさんもやってみてくださいね：）