憩いの場

普通にbutton_countタイプの「いいねボタン」を設置すると、右にカウンターの数字(ゼロの時は空白)が表示されます。その部分を隠したい、表示したくない、と思いました。

検索サイトを彷徨って下のCSSを発見！

.fb_edge_widget_with_comment iframe {
width:47px !important;
}
span.fb_edge_comment_widget.fb_iframe_widget iframe {
width:401px !important;
}
→ Facebook Like-Button - hide count? - Stack Overflow

しかし、これだとフォントの横幅の違いに対応できないんだよね。例えば、メイリオで合わせたボタンをTakao/IPAフォントで表示すると幅が広すぎです。widthの単位をem、exにしても上手くいかない。

JavaScript(というかjQuery)の初心者向けサイトを読みながら、解決策を考えてみた。

<script src="jquery.js" type="text/javascript"></script>
<span id="like" style="display:none">いいね！</span>
<script type="text/javascript">
$(function(){
  // iframeの中と同じフォント設定
  $('#like').css('font-size','11px');
  $('#like').css('font-family','"lucida grande",tahoma,verdana,arial,"Hiragino Kaku Gothic Pro",Meiryo,"MS PGothic",sans-serif'); 
  // +26 で丁度いい
  var like_w = $('#like').width() + 26;
  /*@cc_on
    // IEはページの構成(標準準拠モードか否か?)でボタンの幅が変わる?
    // よく分からんけど適当に調整
    @if (@_jscript_version == 9) // IE9
  //  like_w += 3;
      like_w += 1;
    @elif (@_jscript_version == 5.8) // IE8
      like_w += 1;
    @end
  @*/

  // ボタンと同じフォントを指定した「いいね！」の文字から推測した幅を<style>で出力
  // 下の方の margin-left:-300px はクリック後のコメントフォームの位置修正なので、無くてもいいです
  $('#like').html(
    '<style type="text/css">' +
    '.fb_edge_widget_with_comment iframe{' +
    'width:' + like_w + 'px !important;}' +
    'span.fb_edge_comment_widget.fb_iframe_widget iframe{' +
    'width:401px !important;margin-left:-300px !important;}' +
    '</style>'
  );
});
</script>

もっといい方法があると思うけど、JavaScript歴60分の人間にはこれが限界です。とにかく横のスペースを消すことができたので満足。

≪追記≫
HTML5版も同じやり方でいけました