不具合と解決方法
「いいね」の数が Google+1 の下に入り込んでる。
なんとなく英語の「like」の横幅と日本語の「いいね」の横幅の問題なんだろうな〜と思って、ソース(wp-content/plugins/twitter-facebook-google-plusone-share/tf_display.php)を見たら結構単純だったので以下の様に修正した。
#bottomcontainerBox .buttons { float:left; height:30px; width:125px; margin:4px 4px 4px 4px; }
元々は width が 85px だったのを 125px にしただけ。
これで重ならなくなったけど、今度はボタンの間の余白のバランスが悪い。
これ、ボタンが Facebook Twitter Google の順に並んでればバランスが良くなるんじゃない?
というわけで、ソースを見ると単純にアウトプットの順番を変えるだけで良さそうだったので以下の様に変更。
if (($option['position'] == 'below') || ($option['position'] == 'above') || ($option['position'] == 'both')) { $output = '<div id="bottomcontainerBox">'; if ($option['active_buttons']['facebook_like']==true) { $output .= ' <div class="buttons"><iframe src="http://www.facebook.com/plugins/like.php?href=' . rawurlencode(get_permalink()) . '&layout=button_count&show_faces=false&width=100&action=like&font=verdana &colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe></div>'; } if ($option['active_buttons']['stumbleupon']==true) { $output .= ' <div class="buttons"><script src="http://www.stumbleupon.com/hostedbadge.php?s=1"></script></div>'; } if ($option['active_buttons']['twitter']==true) { if ($option['twitter_id'] != ''){ $output .= ' <div class="buttons"> <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="'. $option['twitter_id'] . '">Tweet</a> </div>'; } else { $output .= ' <div class="buttons"> <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a> </div>'; } } if ($option['active_buttons']['Google_plusone']==true) { $output .= ' <div class="buttons"> <g:plusone size="medium"></g:plusone> </div>'; } $output .= ' </div><div style="clear:both"></div><div style="padding-bottom:4px;"></div>'; return $output; }
$output への挿入の順番を変えているだけ。Google を最後にした。
これで、ボタンの配置のバランスも良くなった。
というわけで、Facebook の”いいね”、Twitter の Retweet、Google+1 のボタンがプラグイン1つで綺麗に並べる事ができるようになった!