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

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

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

facebook-xfbml-problem

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

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

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

原因の特定

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

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

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

facebook-xfbml-problem3

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

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

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

facebook-xfbml-fix-problem1

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

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

.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;
}

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

facebook-xfbml-fix-problem2

流石に、どこかの段階でtwitterやfacebookに参加しないと確実なデバッグも出来ないなと思う次第であります…。

因みに、今はSharebar Pluginがよさそうなので検討をしています。

ボタンのテンプレートが記述出来るので、非同期読み等も容易に実装できる利点はあるものの、少々動作がバグっぽく、汎用コンテナプラグインを自分で作って設置したほうが良いような気がしています。

wp-Sharebar-plugin-mini-view

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください