2

このページを見てみましょう: http://www.allyou.com/static/weekly-circulars/

Grocery Circular Roundup タイトルの横にある [いいね] ボタンをクリックすると、[いいね] ウィジェットが右側に開くため、閉じるボタンがコンテンツの端でうまく切り取られます。

Facebookウィジェットが切断される

ただし、ユーザーがブラウザーの幅を縮小すると、同じウィジェットが自動的に左に開き、ページに収まるようになります。

ユーザーのブラウザが非常に広い場合でも、ウィジェットを強制的に左側に開く方法はありますか? 他の広告主の要件と競合するため、overflow:hidden をコンテンツ領域から削除することで、この切断された [閉じる] ボタンの問題を修正するオプションはありません。

4

6 に答える 6

5

残念ながら、ポップアップ/フライアウトをボタンから独立して移動させることは実際にはできません。ボタンをクリックすると、iframe でウィジェットが開き、iframe をいじらずに iframe のコンテンツに影響を与えることができないためです。同元ポリシー。どうやら同一生成元ポリシーを回避する方法があるようですが、このようなものにとって本当に価値があるというよりも、おそらく頭痛の種です。

ただし、ボタンがクリックされたときにウィジェット全体を移動することで、不要な切断を防ぐことができます。次の CSS を追加するだけです。

.fb_iframe_widget iframe {
    position:absolute;
    right:0px;
    background:#fff; /* in your case you may want to add a white background */
    transition: all .5s; /* completely optional, but adding a transition makes for a nice effect */
}
于 2013-08-28T15:11:24.823 に答える
0

スクリプトに統合されたいいねボタン（「IFRAME」実装ではなく「HTML5」実装）でこれを達成することができましたが、これはしばらく前（2年以上）であるため、マークアップが変更されたかどうかはわかりません. この方法は、CSS 制御のためにページに直接挿入される Facebook マークアップに依存しています。私が使用したコードは次のとおりです。

/* Facebook Like integration */

.facebook-like {
    height: 24px;
    margin: 8px 12px 0;
    width: 47px;
}

.facebook-like .decoration {
    display: none;
}

div.fb-like > span:first-child iframe.fb_ltr {
    width: 47px !important;
}

.fb_edge_comment_widget {
    margin: 10px 0 0 -346px;
}

.fb_edge_comment_widget span {
    overflow: hidden;
    position: relative;
    width: 393px;
}

.fb_edge_comment_widget iframe {
    margin: -10px 0 0;
}

これにより発生した問題の 1 つは、ボックスの上部にある [いいね] ボタンに戻る小さな三角形が失われたことです。次のように再作成しました。

.fb_edge_comment_widget::after {
    background: url(data:image/gif;base64,R0lGODlhCQAGAJECAP///zMzM////wAAACH5BAEAAAIALAAAAAAJAAYAAAIOlI8XaQGLHHhq2iXtDAUAOw%3D%3D) no-repeat;
    content: '';
    display: block;
    height: 6px;
    position: absolute;
    right: 30px;
    top: -5px;
    width: 9px;
    z-index: 99999;
}

…ただし、これはコード内でコメントアウトされており、サイトがプレーンな HTTP で提供され、ユーザーが Facebook を設定して HTTPS を強制するように設定した場合、共有ダイアログが表示されないことを説明する小さなメモがありました。 . 今では、Facebook が HTTPS を強制していると信じているので、この手法が機能するかどうかはわかりません。でも一見の価値はあると思います！

于 2013-09-02T11:37:53.677 に答える
0

アイデア: いいねボタンを iFrame に配置し、いいねボタンを iFrame の右側に配置し、iFrame の幅と高さをフライアウトの幅と高さと同じかそれ以上にします。このようにして、ページがいいねボタンの右側で終了し、それに応じてフライアウトが左側に表示されることを Facebook に「伝える」ことができます。

注意: iFrame の下の要素では、クリック イベントを受け取ることができません。そのため、いいねボタンのマウスオーバーおよびマウスアウトイベントを使用して、iframe の z-index を操作する必要があります。つまり、この方法はモバイル デバイスでは機能しません。しかし、専用のモバイル サイト (タブレットもカバーしています) があるため、このソリューションが役立つ可能性があります。 更新:この問題の完全な解決策はまだありません。

実際の例（ボタンとアンカーの両方を試してください）：

親.html

<!doctype html>
<html lang="en" xmlns:fb="http://ogp.me/ns/fb#">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        iframe {
            z-index: -1;
        }
        .top-layer {
            z-index: 1;
        }
    </style>
</head>
<body>
    <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/en_US/all.js#xfbml=1";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    </script>
    <div class="wrapper" style="position: relative; overflow: hidden; width: 600px; height: 800px; margin: 0 auto; z-index: 0; background-color: yellow;">
        <a onclick='window.alert("click");' style="position: absolute; left: 200px; top: 100px;">click me</a>
        <fb:like style="position: absolute; left: 360px;" href="http://www.allyou.com/static/weekly-circulars/" send="false" layout="button_count" width="140" show_faces="false" fb-xfbml-state="rendered" class="fb_edge_widget_with_comment fb_iframe_widget"></fb:like>
        <iframe style="position: absolute; width: 600px; left: -160px; height: 600px; top: 50px;" src="child.html" frameborder="0"></iframe>
    </div>
</body>
</html>

child.html

<!doctype html>
<html lang="en" xmlns:fb="http://ogp.me/ns/fb#">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
</head>
<body>
    <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/en_US/all.js#xfbml=1";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    </script>
    <fb:like onmouseover="$(parent.document).find('iframe').addClass('top-layer');" onmouseout="$(parent.document).find('iframe').removeClass('top-layer');" style="position: absolute; right: 0;" href="http://www.allyou.com/static/weekly-circulars/" send="false" layout="button_count" width="140" show_faces="false" fb-xfbml-state="rendered" class="fb_edge_widget_with_comment fb_iframe_widget"></fb:like>
</body>
</html>
于 2013-08-28T20:15:00.717 に答える
0

適切に移動できませんが、トリミングせずに幅を減らすことができます。これは、ほとんど使われない忘れられた JavaScript gem の 1 つです。IDが動的で常に変化するかどうかはわかりませんが、

//grab the iframe
iframe = $('#f2576b984')[0]

//...the gem "contentWindow", which takes the iframe as a window element
if_as_window = iframe.contentWindow

//document element can go straight to this step by equaling it to iframe.contentWindow.document
if_as_document = if_as_window.document

//use jquery to find the div and change width
$(if_as_document).find('#u_0_6').width(300)

サンプルページでは機能しますが、IDが変更される可能性があると言ったように、ページが一貫している場合は $.eq() を使用する場合があります。

于 2013-08-28T03:27:54.973 に答える