いいねボタンが表示されないときに試してみること

chinen

10年 ago

Facebook公式のタグでいいねボタンを設置して、display:none;で非表示にしておき、アコーディオンなどであとから表示させようとした場合に、うまくボタンが読み込まれないケースがあります。
ページ読み込み時に非表示の状態のため、ボタン用の要素のwidthとheightが０のままになってしまうようです。

ボタンを再読み込みさせるための対処法として、下記ページが参考になります。

Facebookいいねボタン設置時にはまった点 - Qiita

FB.XFBML.parse();

要素を表示させたいタイミングで上記を実行することでボタンを再レンダリングします。
公式に用意されているものです。
FB.XFBML.parse
　
　
また、最初に読み込む記述で　xfbml=1　があるとうまくいかないこともあるため、下記all.jsの箇所から　xfbml=1&　を取ります。

<div id="fb-root"></div>
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=xxx";
      fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

今回、上記2つの対応でボタンの表示はされるようになりましたが、
【いいねボタンを押してコメントを入れる枠（HTML5版いいねボタンの機能）がうまく動作しない】という問題にあたりました。

▼いいね押したあとのうまく表示されないキャプチャ画像

　
　
ボタンが表示されないときと同様に
widthとheightが、FB.XFBML.parse();で再レンダリングした状態でのボタンの大きさ分でサイズ固定されており、
overflow: hidden;されているために表示エリアが切り取られている状態のように思われます。

根本の原因に対する解決法ではないのですが、応急処置として、ボタン部分にマウスオンしているときは、ボタン部分のiframeのサイズを大きくするようにJSとCSSで調整することで、表示エリアを確保することができました。

JavaScript

$(document).on({
    'mouseenter':function() {
     $(this).addClass('active');
   },
  'mouseleave':function() {
     $(this).removeClass('active');
    }
},'.facebook');

CSS

.facebook.active iframe {
  width: 450px !important;
  height: 330px !important;
}

▼ボタンの要素にマウスオンしているとき

　
　
読み込み時のサイズで固定されてしまうのは公式の仕様なのかもしれませんが、
まだ根本の解決ができておらず、情報がありましたらまた報告したいと思います。
（2014年10月時点の情報ですので、仕様変更があるかもしれません）