Facebookの「いいね！」ボタンが点滅していたのは、記述されていたコードが古かったから！

【img via Facebook Like stamp by FindYourSearch】

先日からFacebookの「いいね！」が何度も読み込まれてボタンが点滅しているように表示される現象だが今日ついに原因を発見して直すことができた！もし他にも同じことで悩んでいる人がいたら試してみて欲しい！

これが先週木曜日にTweetした内容。この原因が掴めずにした。

【緩募】gori.meにあるFacebook Likeボタンがなぜか何度も読み込んでいるのか点滅しているのですが、原因・解決策ともに不明なので、もし分かる人がいたら教えて下さい。。。。

— g.O.R.i (@planetofgori) October 18, 2012

本日数々のブログやメディアを見ながら原因を調べてみた結果、どうやら記述されていたコードそのものが古かったことが発覚した！

以下がindex.phpの各記事に記述されていたコード。

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1" vertical-align="top"></script>
<fb:like href="<?php the_permalink() ?>" data-layout="button_count" show_faces="false" width="44" font="verdana"></fb:like>

このコードが記述されていたことによってページ内にあるすべての「いいね！」ボタンの数だけ読み込み直していたことが分かった。そりゃあ重いわ！

よって、Facebook Developersでコードを取得し直して以下のコードに書き換えた。

<div class="fb-like" data-href="<?php the_permalink() ?>" data-send="false" data-layout="button_count" data-width="44" data-show-faces="false" data-font="verdana"></div>

差し替えた結果はgori.meのトップページを見てもらえれば分かるが、何度も読み込まれることも点滅することもなくなった！おっしゃ！

gori.me内に配置していたFacebookコードをすべて書き換えた結果、以前より読み込み時間が短縮されたように感じる。ページの読み込み速度を0.1秒でも速くしたい僕としては非常に嬉しい！