KonifarPod

Facebookいいねボタンのコメント欄が表示されない問題にどはまりした話

   

Pocket

最近ではサービスやブログを作るならソーシャルボタンを設置するのが当たり前みたいになってたので、自分も今作っているサービスで設置してみました。

Google先生で調べると、設置の方法はもう腐るほど出てきます。僕もこのあたりを参考にしながら、設置までは一瞬でできました。が、Facebookいいねボタンの挙動ではまってしまったので備忘を残しておきたいと思います。まあ結論から言うと、自分のCSSがイケてなかったということなんですけどね。

 

現象はこんな感じです。

Socialbtn3

いいねボタンを押したらいいねはできるんですが、下になんか ^ みたいなキモイのが出てきました。これは本来いいねの後に入力できるコメント欄が出るはずなのです。が、僕の設置したいいねボタンでは出ませんでした。

パッと見、出そうと頑張ってるけど表示されてないみたいな感じだったので、Google先生に「Facebook  いいねボタン  切れる」と聞いてみたところ、横が切れるとか縦が切れるとか少しはコメント欄が出た状態という症状は結構ありました。この辺ですね。しかし、僕のはそんな次元じゃなく ^ しか出てないので違います。

 

色々とまずそうなところを探してみた結果、結局悪かったのは僕の書いたCSSでした。

 
.snsb { 
  overflow: hidden; 
} 

.snsb li { 
  float: left; 
  margin-right: 4px; 
  list-style-type: none; 
} 

.snsb iframe {
  margin: 0 !important; 
}

 ソーシャルボタンを横に並べる時に、Htmlのlist要素を使ってCSSで横並びにするというやり方にしていました。Htmlは下記のような感じです。

<ul class="snsb pull-right">
    <li>
        <!-- Facebook -->
    </li>
    <li>
        <!-- Twitter -->
    </li>
    <li>
        <!-- GooglePlus -->
    </li>
    <li>
        <!-- Hatena -->
    </li>
</ul>

 

ここで悪かったのは、ul要素にかけたCSSの overflow: hidden; です。これがあることで、Facebookがいい感じに作ってくれるコメント欄がくしゃっとなってしまい、^ しか見えないみたいな状態になっていたようです。.snsb { overflow: hidden; } をコメントアウトした結果、ちゃんとコメントが入力できるようになりました。

Socialbtn2

 

今回の自分のは結構わかりやすくてアホとしかいいようのないところだったのですが、Facebookいいねボタンを押した後の表示がおかしいという方は、overflow:hidden になっている要素を疑ってみるといいかもしれません。

Pocket

 - Develop, Facebook ,