Facebook Like and Send plugin flyout clipping

Question

Facebook Like and Send plugin flyout clipping

4.9k Views Asked by Koby Mizrahy At 11 April 2025 at 04:32

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.

Original Q&A

There are 2 best solutions below

H4NIO On 02 December 2012 at 10:00

It's not an exact answer to your question. It seems you cannot control the flyout at all. I was happy to get rid of the flyout completely by putting my fb button code in a div that's only as high as the button and set the overflow: hidden. Then the popup's not visible at all.

<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>

**apfelbox** · Accepted Answer

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>

Facebook Like and Send plugin flyout clipping

There are 2 best solutions below

Some Code

Complete test code:

Related Questions in FACEBOOK

Related Questions in FACEBOOK-LIKE

Related Questions in SEND

Related Questions in CLIPPING

Related Questions in FLYOUT

Trending Questions

Popular # Hahtags

Popular Questions