web-dev-qa-db-ja.com

非表示のロード時にFacebookの「いいね」ボタンが表示されない

これはちょっと行き詰まっています。記事全体にリンクするスニペットの記事リストがあります。各宣伝文にカーソルを合わせると、ソーシャル共有ボタン（FB、Twitter、G + 1）を含む宣伝文の下部にバーが表示されます。

http://jsfiddle.net/6Ukmb/

Jsfiddleの例ではフォーマットが省略されており、G + 1が機能していないことに注意してください。この質問では重要ではありません。

私の問題は、FBのようなボタンが正しく読み込まれないことです。 Chromeでは、すべてが期待どおりに機能します。 FFまたはIE FBボタンは「非表示」をロードし、表示させることができません。

ページがまだ読み込まれているときにマウスが記事ボタンの1つにある場合、その記事のFBボタンは正常に読み込まれます。 FBの読み込みが終了したときにホバー効果が非表示になっていると、愛やお金のために表示されません。

私はそれを別のものとして選び、css display: none;をcontent-box .story-hoverから削除すると、正常にロードされることがわかりました。もちろん、それはまた、誰かがそれらの上にホバーして非表示にするまで、非表示のパネルが表示されることを意味しますが、これは機能しません。

これを解決する方法がわかりません。また、ボタンのようなFBのボリュームのため、開発ビルドでは少し遅いため、ページの読み込みの最後までdisplay:noneを遅らせることもできません。

jqueryhtmlcssfacebook-like
25
TH1981

ここでは、CSS opacityを使用することをお勧めします。

HTML

<div class="div">
  <div class="social"></div>
</div>

CSS

.div {
     opacity: 0;
     filter:alpha(opacity=0);
     }
.div:hover .social {
     opacity: 1.0;
     filter:alpha(opacity=100);
     }

そこからトランジションを追加して見栄えを良くすることができます！

10
tcd

私が使用した別の方法は、コンテナが表示されるまでfbのようなボタンをレンダリングしないことでした。これは、次を使用して実現できます。

window.fbAsyncInit = function () {
    FB.init({
        xfbml:false  // Will stop the fb like button from rendering automatically
    });
};

次に、「いいね」ボタンをレンダリングするには、

FB.XFBML.parse(); // This will render all tags on the page

または以下は、要素内のすべてのXFBMLをレンダリングする方法に関するJqueryの例です

FB.XFBML.parse($('#step2')[0]);

またはプレーンJavaScript

FB.XFBML.parse(document.getElementById("step2"));
21
Mike

同じ問題があり、CSSを使用して、含まれているdivの初期の幅と高さをゼロに設定し、トリガーがアクティブになったら、jQueryを使用して次のように解決しました。

  • 不透明度をゼロに設定します（展開されている間、divを非表示にします）
  • 幅と高さを設定します（divを展開します）
  • 不透明度を1にアニメートします（divでフェードします）

フェードアウトするときは、幅と高さをゼロにリセットする必要はありません。不透明度をゼロにアニメートした後、display：noneに設定するだけです。 Facebookボタンが読み込まれ、サイズが設定されたので、変更することはありません。

7
Paul Chamberlain

不透明度の方法は機能しますが、ボタンはページ上に表示され、表示されません。

したがって、不透明度0のdivが他にクリックする必要のあるものと重なっている場合、誤って非表示のボタンをクリックしてしまいます。

私はこの方法がうまくいくことを望んでいましたが、残念ながら私のサイトではこれが原因ではありません。

5
Matt Gorner

このCSSを使用します。

.fb_iframe_widget span,
iframe.fb_iframe_widget_lift,
.fb_iframe_widget iframe {
    width:80px !important;
    height:20px !important;
    position:relative;
}

背後にある手法：「！important」を使用して、FacebookのデータをCSSで上書きします

5
TonkBerlin

Display：noneを設定する代わりに、margin-topまたはz-indexを使用して非表示にしてみてください。これらは両方とも、FBのようなボタンを壊すことはありません。

.hide2 {
   margin-top: -1000px !important;
   position: relative ;
   z-index: -1 !important;
}
1
Code Whisperer

これは回答ではなく、これはコメントです！うまくいけば、戻って作業し、それを回答に変えます。

同じ問題に対処する。 Firefox +非表示のコンテナ。唯一の違いは、非表示/非表示にonclick slideDown/slideUpを使用していることですが、それは関係ないと思います。

削除すると、私のhtmlは次のようになります。

<div id="fb_like_button" class="hide">
   <div class="fb-like" data-action="recommend" ...></div>
</div>

非表示のコンテナと非表示のコンテナの違い、つまり、div＃fb_like_buttonから 'hide'クラスを削除することに気づきました。<span>および<iframe> facebookがdiv.fbのように配置すると、スタイル属性の幅と高さが変更されます。

したがって、ページがレンダリングされるとき（ここでも、htmlが大幅に削除されています）

隠されていない：

<div id="fb_like_button" class="">
   <div class="fb-like" data-action="recommend" ...>
     <span style="height: 61px; width: 97px;">
       <iframe style="height: 61px; width: 97px;">

非表示：

<div id="fb_like_button" class="hide">
  <div class="fb-like" data-action="recommend" ...>
    <span style="height: 0px; width: 0px;">
      <iframe style="height: 0px; width: 0px;">

完全にレンダリングした後、Firefox開発ツールを使用して幅と高さのスタイルを試してみると、いいねボタンをハックして表示に戻すことができました。

まだ解決策はありませんが、詳細がわかり次第、更新を続けます。これらのスタイル属性を元に戻すJavaScriptを追加しないように一生懸命努力しますが、Facebookが行っているwtfをデコードします。これが誰かを助けることを願っています。

1
FlipMcF

Jsfiddleでは各ブラウザの動作が異なります。作成できるテストhtmlファイルにコードをロードしようとした場合。それでも動作する可能性があります。 jsフィドルではありません..jqueryがcssファイルまたはタグのcssコードをオーバーライドしない場合があります。したがって、そのように実行された場合。そのおそらく隠されたままになっています。

コンピューターやブラウザー間でフィドルを操作すると、ランダムに発生するのを見てきました。

0
CoasterChris

コンテナ内で絶対にしたい

  iframe{
     position: absolute !important;
     height: 500px !important;
  }
0
kplates

不透明度を0に設定することは、クリックする必要があるものをすべて非表示にしてオーバーラップするため、私にとっては解決策ではありません。また、jqueryフェードイン関数は不透明度ではなくcss表示プロパティを使用します。

だから私が思いついた解決策は、コンテナをブロックとして表示することですが、ウィンドウの左側：-9999px、次にタイマーを1s〜2s（すべてのソーシャルボタンがレンダリングされるのに必要な時間）に設定し、表示をnoneに変更しますそして元の位置に戻る：

#bnts_container
{
  left:-9999px;
  display:block;
}

$(window).load(function () {

  setTimeout(function () {
     $('#bnts_container').css("display", "none");
     $('#bnts_container').css("left", "50%");
    } , 2000);

});

+共有ボタン ここ をクリックして、このソリューションをテストします。

0
Chtiwi Malek