「いいね！」ボタンの不具合解消

2014年2月10日2015年4月19日

「サイトが殺風景だから、ソーシャルボタンを付けましたよ」という感じで、有名どころのソーシャルに参加していない人間がソーシャルボタンを設置してみました。

ソーシャルを拒否し続けた理由はまた別の機会に書くとして、今回はソーシャルボタンを設置した時の備忘録として書き残そうかと思います。

こんな感じに、「いいね！」が下にずれて、書き込み用のポップアップも欠けてしまいます。

スタイルが多重に継承し、混とんとしているwordpressでは良くある事のような気もしますが、原因は足並みを乱したFacebookの中の人のような気がしなくも有りません。

Like Button
https://developers.facebook.com/docs/plugins/like-button

原因の特定

FireFoxの開発ツールの出番です。

因みにIEやChrome系のブラウザにも同様のツールが含まれているので用途に応じて使い分けると良いでしょう。

インライン展開されたオブジェクトを見て行き、同じくインライン展開されたスタイルを確認していくと…、

発見しました、spanの垂直方向のアライメントがbottomになっています。

恐らく他のソーシャルボタンは全て継承による設定になっているものと予想します。インラインを一時的にtopやbaselineに書き換えると綺麗に整列されるので、ここで間違いないでしょう。

こういった外部からの取得オブジェクトに起因するものは力技で直すしかなく、方法が美しくなくても我慢するしかありません。ひとまずこれを修正するために WP Social Bookmarking Lightの設定オプションのスタイルで抑制してしまいます。独自に実装している人や、他のプラグインで実装している人は適宜セレクタを書き換え、使用しているCSSに記述して下さい。

「いいね！」のポップアップですが、単に上位のスタイルの矩形に矯正されているだけなので、適当なセレクタとスタイルで制限を解除してあげましょう。

最終的に当方で指定したスタイルはこんな感じです。

.wsbl_twitter{
    width: 90px;
}
.wsbl_facebook_like{
    width: 100px;
}
.wsbl_facebook_like span{
    vertical-align: baseline !important;
}
.wsbl_facebook_like iframe{
    margin: 0 !important;
    max-width: none !important;
    max-height: none !important;
}

動作も問題ないように思えます。