1

だから...私が取り組んでいるサイトには、クリックすると灰色に変わるはずのFacebookの「いいね」ボタンがあり、グレーアウトした「いいね」ボタンの「X」をクリックすると、いいねを取り消すことができます.

事は...それは正しく動作しません。IE9 では、[いいね] をクリックするとすぐに、[いいね] ボタンが小さなテキスト ボックスになり、詳しく調べてみると、実際にはスロットに収まろうとする Facebook のコメント ウィンドウです。Firefox と Safari (それぞれ Windows 7 上) では、[いいね] をクリックすると、本来のようにボタンが灰色に変わりますが、[X] をクリックして [いいね] をクリックして [いいね!] を解除しようとすると、ボタンが私の FB プロフィール写真の一番上に、Facebook ウィンドウをそのスロットに詰め込もうとしているように見えます。

Facebook のコメント ウィンドウなどは必要ありません。FB の「いいね」ボタンをトグルさせたいだけです。

FB 開発者情報によると、Javascript の前にこれがあります。

<div id="fb-root"></div>

その直後、私は持っています：

(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/en_US/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

FB開発者ページによると、ボタンの周りのコードは次のとおりです。

<div class="fb-like" data-href="http://www.facebook.com/(page to be liked)" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>

このサイトはまだオンラインになっていないので、実際に試してみることができるようにリンクを提供することも、オンラインのどこかに今すぐ掲載することもできません.

また、元のコードには上記の Javascript がありましたが、js.src 割り当ての最後に appid がありました。それを削除しても違いはありませんでした。

同様の変数を使用する Twitter へのリンクもありますが、私はそれをまとめて削除しようとしましたが、役に立ちませんでした。干渉しているのかもしれないと思った。

他に何に気をつければいいですか??

(ちなみに、Chrome や Opera ではこの問題を再現できません。実際、Opera ではレンダリングが少し遅くなります。次のようになります。1) [いいね] をクリックします。2) テキストボックスのように見えるが、実際には圧縮された FB コメントボックスであるものが表示されます。3) グレーアウトされた「いいね」ボタンが表示されます。クリックして切断すると、同じことが逆に起こります。これは私のものではなく、Facebook 側のバグではないかと考え始めています。)

4

1 に答える 1

2

少なくとも、Internet Exploder 側でこの問題を解決する方法を見つけました。

問題は、Facebook が Like ボタンをどのようにレンダリングするかです。1) ユーザーが「いいね」をクリックします。2) ユーザーは、Facebook にログインして、いいね! を「確認」する必要がある場合があります。3) Facebook はユーザーをログインさせ、ユーザーを「いいね!」としてマークします。4) Facebook フライオーバーが表示されます。5) 「いいね」ボタンが灰色に変わります。

問題があるのはその 4 番目のステップです。部分的には、「いいね」ボタンを埋め込む div タグが原因です。私たちが持っている CSS は、具体的にオーバーフローを「非表示」に設定します。これは、「いいね」ボタンのスペースに収まらないものはすべてブロックされることを意味します。したがって、理論的には、フライオーバーは「いいね」ボタンの範囲外にあるため、まったく表示されるべきではありません。ただし、一部のブラウザーは、基本的にすべてのコンテンツ (フライオーバーを含む) をレンダリングしてから、そのコンテンツを div タグの最後 (つまり、コメント ボックスの右下隅) にプッシュし、その結果、「いいね」ボタンは完全に押し出され、THAT はオーバーフローとして扱われ、非表示になります。

さて、私が見つけたのは、ステップ 4 と 5 は、どちらのステップが最初に完了できるかを競う傾向があるということです! ステップ 4 が最初に行われた場合、最後にレンダリングされるのは灰色の「いいね」ボタンです。これは私が望んでいるものです。しかし、ステップ 5 が最初に行われた場合、最後にレンダリングされるのはコメント ボックスです。その一部は、グレー表示された [いいね] ボタンが必要な場所に表示されます。Facebook ボックス全体 (div タグを介して) を実際に強制的に削除すると、レンダリングがリセットされ、必要なものが得られると考えました。そして、それは機能します-少なくとも1ミリ秒の遅延を入れた場合、またはそうしないと、ステップ4が完了する前にステップ5が実行されます。これにより、IE に存在する問題が解決されたようです。唯一のことは、非常にごくわずかな数秒の間、

また、この修正は、Firefox の前述の問題を修正するのにあまり効果がありません。Firefox では、ボタンがレンダリング中にボタンをクリックすることができます。(1 秒かかります。) ボタンのレンダリングが完了する前にユーザーが「いいね!」を解除しようとすると、ユーザーはコメント ボックスのその部分を取得します。これは完全に Facebook 側の責任のようであり、残念ながら私の手に負えないことを意味します。私にできることは、平均的なユーザーがマウス ボタンのトリガーにそれほど満足しないことを願うことだけです。

これは 100% の解決策ではありませんが、以前に比べて大幅に改善されました!

于 2013-05-13T20:03:57.483 に答える