Home/ Questions/Q 7588499
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T19:56:06+00:00

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

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Since these buttons include HTML structure in your page, they are stylable via CSS. So you can move the popup dialogs with CSS.

    Some Code

    If you take a closer look at the popups presented by facebook, you will see, that it has some styles attached to it:
    Facebook Styles

    The only thing you now have to do is moving this popup via CSS to the correct position.

    For example: if you want to hide the comment popup of the like button completely, you can just use this CSS:

    .fb_edge_comment_widget.fb_iframe_widget {
    display: none;
}

    If you now want to move it, you cannot use .fb_edge_comment_widget.fb_iframe_widget since the element properties (set by JavaScript) will override your CSS. You have to use the span one element lower:

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

    This code will move the popup by 300px to the left:

    Moved by 300px

    This is not the most beautiful solution (note the small arrow at the top of the box now points to nothing), but it works.

    Complete test code:

    <!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>
    • 0