7

I am implementing a Facebook application that shown as a tab in a fan page.

The application has a product details page that has like, send and comments plugins.

The problem is when clicking on the send and like buttons, the flyout dialog (the window that pops after clicking the button) is clipped by the left edge of the iframe (The application is in right to left language).

From graphical design perspective, the location of the buttons can't be changed and scroll bars are not allowed. The application must be 520px wide, no more and no less.

Is there any option to control the position of the flyout to prevent its clipping? Is there any other way to prevent the clipping?

I searched similar questions here with no success.

4

2 に答える 2

6

これらのボタンにはページにHTML構造が含まれているため、CSSを介してスタイルを設定できます。したがって、CSSを使用してポップアップダイアログを移動できます。

いくつかのコード

Facebookによって表示されるポップアップを詳しく見ると、いくつかのスタイルが添付されていることがわかります。 Facebookスタイル

あなたが今しなければならない唯一のことは、CSSを介してこのポップアップを正しい位置に移動することです。

例：いいねボタンのコメントポップアップを完全に非表示にする場合は、次のCSSを使用できます。

.fb_edge_comment_widget.fb_iframe_widget {
    display: none;
}

.fb_edge_comment_widget.fb_iframe_widgetここで移動する場合は、要素のプロパティ（JavaScriptで設定）がCSSを上書きするため、使用できません。スパンを1要素下で使用する必要があります。

.fb_edge_comment_widget.fb_iframe_widget > span{
    right: 300px;
}

このコードは、ポップアップを300px左に移動します。

300px移動

これは最も美しい解決策ではありませんが（ボックスの上部にある小さな矢印は何も指していないことに注意してください）、機能します。

完全なテストコード：

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <style type="text/css">

        .fb_edge_comment_widget.fb_iframe_widget > span{
            right: 300px;
        }

        #wrap {
            width: 650px;
            margin: 0 auto;
        }

        </style>
    </head>
    <body>
        <div id="wrap">
            <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/de_DE/all.js#xfbml=1&appId=336384849737745";
              fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));</script>

            <div class="fb-like" data-href="http://www.google.de" data-send="true" data-width="500" data-show-faces="false"></div>
        </div>
    </body>
</html>
于 2012-03-05T10:50:36.657 に答える
0

あなたの質問に対する正確な答えではありません。フライアウトをまったく制御できないようです。fb ボタン コードをボタンと同じ高さの div に配置し、overflow: hidden を設定することで、フライアウトを完全に取り除くことができてうれしかったです。その後、ポップアップはまったく表示されません。

<div class="fb-wrap">
<div class="fb-like" data-href="http://www.facebook.com/YOURURL="false" data-width="200" data-show-faces="false" data-colorscheme="dark"></div></div>

<style>
.fb-wrap {
height: 36px;
overflow: hidden;
}
</style>
于 2012-12-02T10:00:46.327 に答える