28

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

http://jsfiddle.net/6Ukmb/

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

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

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

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

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

4

10 に答える 10

21

私が使用した別の方法は、コンテナが表示されるまで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"));
于 2012-12-03T01:25:43.440 に答える
10

ここでは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);
     }

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

于 2012-09-08T18:57:49.980 に答える
7

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

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

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

于 2012-11-20T22:04:55.260 に答える
5

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

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

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

于 2012-10-15T23:36:34.957 に答える
5

この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で上書きします

于 2014-09-20T13:38:27.280 に答える
1

これは答えではありません、これはコメントです！うまくいけば、私は戻ってきてそれに取り組み、それを答えに変えるでしょう。

同じ問題に対処する。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'クラスを削除し、Facebookがdiv.fb-like内に配置すると、スタイル属性の幅と高さが変わることに気付きました <span>。<iframe>

したがって、ページがレンダリングされると（ここでも、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を追加しないように一生懸命努力しますが、wtffacebookが実行しているデコードを行います。これが誰かに役立つことを願っています。

于 2012-10-18T22:08:42.080 に答える
1

不透明度を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);

});

このソリューションをテストするには、ここの[+共有]ボタンをクリックしてください。

于 2013-02-28T08:27:45.107 に答える
1

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

.hide2 {
   margin-top: -1000px !important;
   position: relative ;
   z-index: -1 !important;
}
于 2013-04-19T15:27:36.300 に答える
0

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

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

于 2012-09-06T22:25:35.817 に答える
0

私はそれをコンテナ内で絶対にすることを好みます

  iframe{
     position: absolute !important;
     height: 500px !important;
  }
于 2013-12-09T02:14:36.507 に答える