今時のブログには Facebook の「いいね！」ボタンが必要ってことで、早速つけてみた。Facebook の開発者用のサイトで、簡単にタグを生成できる。今回は、HTML5 バージョンで作成してみた。2つのコードを貼り付けるだけでよいので、非常に簡単。

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like" data-href="<サイトのURL>" data-send="true" data-width="450" data-show-faces="true"></div>

・・・と思ってたら、落とし穴が。実際に「いいね！」を押すと以下のようになる。

コメント欄が、切れてる。閉じるボタンもないので、リロードするしかないという悲惨な状況に。

修正したいけど、コメント欄は Facebook から動的にダウンロードしてきた JavaScript が描画しているはず。仕方がないので HTML を少し解析してみると、自分で書いた<div class=”fb-like”>の下に、<span height=”20px” width=97px”>というタグがある。これが原因のように見える。CSS で強制的に書き換えてみた。CSS の記述はこんな感じ。

.fb-like span {
        width: 450px !important;
}

おお、無事表示された。

Googleで「いいねボタン コメント」と入力すると、「隠れる」とか「切れる」をサジェストされる。結構多くの人が、コメント欄が切れることで悩んでいるのではないかと・・・今回の方法でコメント欄が切れるすべての人が直るとは思えないけど、何かの参考になれば。