2

Take a look at this page: http://www.allyou.com/static/weekly-circulars/

When you click the Like button next to the Grocery Circular Roundup title, the Like widget opens up to the right, and therefore the close button gets cut off at the edge of the content well.

Facebook widget getting cut off

However, when a user shrinks their browser width, that same widget automatically opens out to the left, so that it will fit on the page.

Is there a way to force the widget to open out to the left even when the user's browser is very wide? I don't have the option of fixing this chopped-off Close button issue by removing the overflow:hidden from the content area, because that conflicts with other advertiser requirements.

andi
  • 6,442
  • 1
  • 18
  • 43

6 Answers6

5

Unfortunately you can't really get the popup/flyout to move independently of the button, because once the button is clicked it opens the widget in an iframe and you won't be able to affect the contents of the iframe with out playing with the same origin policy. Apparently there are Ways to circumvent the same-origin policy but it's probably way more of a headache than it's really worth for something like this.

However, you can prevent the undesired cut off by moving the entire widget when when the button is clicked. Just add the following 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 */
}
Community
  • 1
  • 1
apaul
  • 16,092
  • 8
  • 47
  • 82
  • Cool, but that seems to move the button too, so then the button covers the page headline. I wouldn't be able to do that. I agree with you that once the button is clicked you run into some same-origin issues, but I was really hoping that there might be a solution (some sort of parameter, or JS) to tell Facebook BEFORE the button is clicked that it should open to the left whenever it does open. – andi Aug 28 '13 at 15:19
  • @andi I doubt you'll be able to get exactly what you're after without some how tricking the widget into believing that the window's width is narrower than it actually is. As far as I can tell there isn't really a good way to do that. – apaul Aug 28 '13 at 16:24
0

Actually you can't apply any additional styles to iframes from another domains (like Facebook in your case).

But you can try to add some CSS code to restyle width of this iframe by default:

iframe { width: 310px; }

Please try to apply it, I think this should fix this problem. I guess that Facebook' plugin content automatically will adapt its width to the width of iframe.

Nekto
  • 327
  • 1
  • 4
  • 16
  • Unfortunately Facebook's content did not adjust to the width of the frame. Reducing the frame width just cut off the Close button and other content. But thanks for trying, it was a good idea. – andi Aug 27 '13 at 21:10
0

Cant move it properly but can reduce the width without cropping. This is one of those forgetten JavaScript gems that hardly get used. Im not sure if the ids are dynamic and constantly change but:

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

It works on your example page but like i said IDs might change so it might be case of using $.eq() ... if the pages are consistent.

deach
  • 360
  • 1
  • 2
  • 12
0

Idea: Place the like button into an iFrame, position the like button on the right side of the iFrame and give the iFrame a width and height equal to the width and height of the flyout or a little more. This way you can "tell" Facebook that the page ends at the right of the like button and Facebook will display the flyout on the left side accordingly.

Caveat: You will not be able to receive click events on any element below the iFrame. So you will need to manipulate the z-index of the iframe using mouse over and mouse out events on the like button. This means, that the method does not work on mobile devices. But since you have a dedicated mobile site (which covers tablets as well), this solution might work for you. Update: I don't have a complete solution for this problem yet.

Working example (try both like buttons and the anchor):

parent.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>
borisdiakur
  • 10,387
  • 7
  • 68
  • 100
  • This looks promising, your working example link seems to be down though. – apaul Aug 29 '13 at 13:55
  • @apaul34208 there is no link to a working example in my answer. The code itself is the working example. Create two files, name the first **parent.html** and the second **child.html**, then copy the code into the files and voilà - a working example. – borisdiakur Aug 29 '13 at 14:59
  • Sorry about that, I thought the "Working example (try both like buttons)" was meant to be a link – apaul Aug 29 '13 at 15:23
  • does seem promising... I'll take a closer look next week when I'm back to work! – andi Aug 29 '13 at 20:39
  • @andi Hmm, just found a caveat for this method: You will not be able to receive click events on any element below the iFrame. Fixing this problem will give you lots of headache. – borisdiakur Aug 30 '13 at 09:07
0

Try adding this style to your page:

<style>
.fb_edge_widget_with_comment span.fb_edge_comment_widget {
left: -300px !important;
}
</style>
Tushar Gupta
  • 15,504
  • 1
  • 29
  • 47
0

I managed to achieve this with the script-integrated like button (the "HTML5" rather than "IFRAME" implementation) — however this was some time ago (over 2 years) so I'm not sure if their markup has changed since. This method relies on the Facebook markup being injected directly into your page for CSS control. The code I used was as follows:

/* 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;
}

One of the problems this incurred was losing the little triangle at the top of the box pointing back to the like button. I recreated it as follows:

.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;
}

…However this was commented out in the code, with a little note explaining that the share dialogue wouldn't appear if the site was served in plain HTTP and the user had configured Facebook to force HTTPS — at which point the triangle would ruin the look. Now I believe Facebook forces HTTPS regardless, so I'm not sure if the technique works. Worth a shot though, I suppose!

Barney
  • 16,181
  • 5
  • 62
  • 76