重い！Facebook の Like Box の表示を軽くする努力してみよー！

Facebook Like Box
いいね！いいね！Like Box いいねっ！努力も大切！

Like Box は重い！

Facebook Like Box

Facebook の Like Box ってこれです。
サイトやブログにペタっと貼付けてちょっとした指数にしてもらえる、顔が表示出来るのでなんだか賑やかな印象を受けますよね！

個人的に好きで前から表示させてはいたのですが、Like Box って結構重いんです。Like Box に限った話では無いのかもしれませんが…。（Facebook全般におm）

って事で今回は軽くなる方法を検証＆紹介しています！

公式のソースコードを使っていますので現在設置されている方も置き換えは比較的かんたんだと思います！

検証方法！

developers.facebook.com/docs/reference/plugins/like-box/

Like Box – Facebook開発者
まずソースコードなのですが、公式の物を使います。Like Box を設置した事のある方でしたらおなじみのページですよね！

Like Box での Get Code

ここから入手出来るソースコードって、「HTML5」と「XFBML」と「IFRAME」と「URL」の4種類選択可能です。「URL」は単にURLを表示しているだけなので除外します。

「HTML5」と「XFBML」はスクリプトを実行後に結局 iframe で Like Box を読み込んで表示している（スクリプト読み込み＆実行の分遅くなる！）ので、特に問題や理由が無いのでしたら最初から「IFRAME」を選べば良いと思います。

Like Boxのプラグインコード

iframe で表示される URL を直接開きます。

https://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Factyway&width=550&height=310&colorscheme=light&show_faces=true&border_color=%23eee&stream=false&header=true&appId=113305358773551

actyway のページだとこんな URL です。

Like Box を Chrome のデベロッパーツールで開く

Chrome のデベロッパーツールで開くと画像ファイルの読み込み数が多いのと、読み込み完了までに1.27秒かかっている事が分かります。読み込み時間の半分以上は画像ファイルです、数が多いから当たり前！（ちなみに今回はキャッシュはオフ）

わたしの経験で言えば読み込み時間が1秒とかは Like Box にしてはまだ早い方で、遅い時は5、6秒かかる時だってあります。

表示する顔写真を減らそうー！

Like Box の顔写真を減らす！

知ってました？顔写真の表示数って横幅と縦幅の数値によって増減するんです！（当たり前と言えば当たり前ですよねｗ）
あまり引っ張ってもあれなので検証結果を書きたいと思います。

https://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Factyway
&width=550 ← 横幅
&height=310 ← 縦幅
&colorscheme=light&show_faces=true&border_color=%23eee&stream=false
&header=true ← ヘッダーの有り無し
&appId=113305358773551

上記の「width」と「height」と「header」の値をさわってみた結果です。（見やすい様に改行入れています。）

基本的な仕様

  • Facebookへのログイン、非ログインでは Like Box で表示される内容は違う。
  • ログインと非ログインではヘッダーの高さが違う。（ログイン時は27px、非ログインだと32px）
  • ログインしていると顔写真の下に名前は表示されない、非ログインでは表示される。
  • ログインしていると Like Box の表示する横幅が狭くても顔写真は見切れない。（縦幅が変動する。）
  • 非ログインだと Like Box の表示する横幅が狭いと顔写真が見切れる。（縦幅が固定のまま）
  • ログインしていて header=true（ヘッダー有り）だと height=260〜300 は顔写真が一切表示されない。（バグ？仕様？）
  • ログインしていて header=false（ヘッダー無し）だと height=230〜270 は顔写真が一切表示されない。（バグ？仕様？）

以下ヘッダーを表示有りの数値（ヘッダー無しの場合は height を30引いて考えてください。←全て30でいけてるか怪しいｗ）

height 0〜250

  • 非ログインで width 0〜320 は顔写真10個表示される。
  • 非ログインで width 330 だと顔写真は12個表示される。
  • ログインで width 0〜310 は顔写真10個表示される。
  • ログインで width 320 だと顔写真12個表示される。

height 260〜300

  • 非ログインで width 0〜320 は顔写真10個表示される。
  • 非ログインで width 330 だと顔写真は12個表示される。
  • ログインしていると顔写真が一切表示されない。

height 310

  • 非ログインで width 0〜320 は顔写真15個表示される。
  • 非ログインで width 330 からは顔写真18個表示される。
  • ログインで width 0〜310 は顔写真5個表示される。
  • ログインで width 320 は顔写真6個表示される。

軽めのまとめ

ログイン、非ログインで仕様が大きく違うので同じ感じに収めるのは難しいと感じました。
ヘッダーの高さが違う、名前が片方でしか表示されない、顔写真表示エリアの外枠が固定と可動、それに顔写真の表示個数まで違うなんて！ なので、無難なラインを追求するのも良いかもしれませんが、わたし的にはどちらかを優先させてバッサリ行くのが良いかなと思っています。

  • Facebook を利用している（ログインしてる）訪問層が多そうなサイトには、height 310 あたりを！
  • 少なそうなら height 0〜250 を！
  • ログインしてるユーザーバッサリなら height 260〜300 を！（笑）

以下、実際に貼付けるソースコードの説明を書いてみます！

Like Box を表示させよー！

Like Box のソースコードで数値の書き換え

height と width の値、決まりました？ｗ
Like Boxのソースコード発行ページから IFRAME のソースコードを表示させて必要な部分を書き換えてくださいね！ style には実際に表示させたい横幅と高さを指定してください！

<iframe src=”//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Factyway&amp;width=310&amp;height=310&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;border_color&amp;header=true&amp;appId=113305358773551″ scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden; width:550px; height:310px;” allowTransparency=”true”></iframe>

actyway ではページ内の下部に表示させていますので、横幅が 550px で高さは 310px で表示させてみたいと思います。Facebook にログインされてる訪問層が多いかも！と思い、width 310 の height 310 を指定してみましたよ！

スマホの場合は非表示に！

スマートフォンだと回線速度もそんなに早くないと思うので Like Box は表示しない方が無難だと思いまーす。

<body>
<div id="fb-page"><!-- PCならここに表示する！ --></div>
<script type="text/javascript">
(function(u){
	if(u.indexOf('iPhone')==-1 && u.indexOf('Android')==-1){
		var fbp = d.getElementById("fb-page");
		fbp.innerHTML = '<iframe src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Factyway&width=310&height=310&show_faces=true&colorscheme=light&stream=false&border_color&header=true&appId=113305358773551" scrolling="no" frameborder="0" style="border:none;overflow:hidden;width:550px;height:310px;" allowTransparency="true"></iframe>';
	}
})(navigator.userAgent);
</script>
</body>

JavaScript でユーザーエージェントを判別して「iPhone」でも「Android」でもなければ <div id=”fb-page”> に iframe を入れて表示させていまーす！（レスポンシブウェブデザインな方はぜひ！）

まとめ！

今回は Like Box の顔写真の表示数を減らす為の方法を探してみました！少しは軽くなったのではないでしょーか？？ｗ
基本的にレイアウトは度外視して速度優先な方法だと思います。

  • ソースコードは IFRAME の物を使う。
  • ログイン、非ログインでは表示される内容が違うのであまり神経質にならない。
  • 非ログイン優先なら height 0〜250 を。
  • ログイン優先なら height 310 を。

記入ミス、思い違いがあるかもしれません、間違い等ありましたら @actywav までお願いします。m(__)mﾍﾟｺﾘ

Facebook は仕様がコロコロ変わっている印象を受けます、この記事は2012年12月5日現在の Like Box を検証した物です。新しい情報も探してみてください。

追記（2012年12月26日）：さきほど、当ブログに設置していた Like Box の表示されている顔写真数が増えていた事に気づいて軽めにチェックしてみました。この記事を書いてからまた仕様変更があった様で記事中に書いている height と width の値と顔写真数の情報は参考にならないと思います。他の新しい情報をお探しください。

追記（2016年12月25日）：Like Boxは廃止されてpage-plugin（ページプラグイン）になってます。

関連する記事もどーぞ！