トップページ | 過去記事(月別カテゴリー別) | 掲示板 | 野良DEB,RPM | 更新チェック | Twitter
<<  2012.1  >>
SMTWTFS
1234567
891011121314
15161718192021
22232425262728
293031    
 
リンク
その他
  • RSS2.0
  • Credit

  • SEO
    loading

    プライバシーポリシー
    Google

カテゴリー » 戯言 January 09, 2012

Facebookの「いいねボタン(XFBML版)」のカウント数を非表示にしたい

普通に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版も同じやり方でいけました
11:14 pm | コメントする |

累計:2870233、今日:406、昨日:723
Created in 0.0083 sec.