リニューアルしました。
このページは、2011年1月から2013年1月初旬までのアーカイブです。
2011年1月から2013年1月初旬までのアーカイブトップへ

現在のトップページはこちら

Facebookのいいねボタンを押すと出てくるコメント欄が途中で切れる件

| カテゴリ:

ブログにFacebookのいいねボタンをつけて、ボタンを押すと自動でぴろっと出てくるコメント欄が途中で切れる現象に悩まされ、あちこち検索しても同じ状態で放置かコメント欄を隠しているサイト多数。
でも、なぜかうまく表示されているサイトもあり、何か解決策があるはずと思って、テスト用にHTMLを最小限にして該当するCSSを見なおしていったら、あちこちにoverflow: hidden;が入っている。これのせいでした(blog.cssの.assetに入ってるやつ)。
つまり、いいねボタンを含む要素自体にoverflow: hidden;があるとコメント欄が切れます。overflow: visible;で上書きすれば解決
MTの標準CSSって余計な指定が多いんだよね。やっぱり自分で一から書かないとダメかしら。

いいねボタン自体が本文上などにあると、コメントを表示するスペースがあるということでCSSを直さなくても普通に使えます。
いいねボタンの配布先にもこんな説明もありました。
HTMLの端っこにあるとうまくいかないことがあるそうです。

https://developers.facebook.com/docs/reference/plugins/like/
When I click the Like button, the popup window (or "flyout") doesn't show. Why?

If the Like button is placed near the edge of an HTML element with the overflow property set to hidden, the flyout may be clipped or completely hidden when the button is clicked. This can be remedied by setting the overflow property to a value other than hidden, such as visible, scroll, or auto.

下:途中で切れたコメント欄

facebookのいいねボタン、コメント欄の不具合

下:正常なコメント欄

facebookのいいねボタン、コメント欄の不具合解決

今日の体重は55.1kg。