入れて設定すれば色んなSNSのシェアボタンが簡単に配置できちゃうプラグインである WP Social Bookmarking Light ですが、使ってみたらおやおや？ってなる部分があったので今回修正。

実装はほんとに簡単に出来ました。

ほぼ入れるだけ。表示位置の指定などができます。

導入に関してはどこか記事探してください。

コメント欄が狭い！

インストール直後だと、FaceBookの投稿欄とポストボタンがいいねボタンくらいの幅しか表示されず、これじゃコメントつけらんない！

(※画像載せようと思ったのですが、状態を再現できず…)

ってことで修正。

.wsbl_facebook_like_iframe {
    max-width: none !important;
}

と指定すると直りました。

どうやら、コメント欄の辺りにmax-width: 100%;が指定されているらしく、そのためいいねボタンの幅までしか表示されないらしいです。(なぜそんな指定が…)

参考：より効果的な「いいね！」ボタンの設置と切れてしまうコメント欄の修正方法 – ハヤクユケ

floatの対策が新たな問題に

更にもう一つの問題。

float解除の方法でoverflow: hidden;を使っていたのですが、

それによってFaceBookのシェアコメントが横にスパっと切られちゃう！(またお前か)

そこで、修正。

clearfixを使ってみました。以下が内容。

div {
  display: inline-block;/* IE対策 */ 
}

div:after {
  content: ".";  
  display: block;  
  visibility: hidden;  
  height: 0.1px;  
  font-size: 0.1em;  
  line-height: 0;  
  clear: both;  
}

参考： clearfixの使い方 – CSS Lecture

その結果こう！

解決ヽ(=´▽`=)ﾉ

これでいいねボタンの問題は解決のはず！