Like button - make popup appear over the box - css

Question

I've created a few sites with facebook like button in the footer.
However, the popup that appears after you like a page, is not visible, so I'd like to move it over the like button.
So that this wouldn't happen.
How could I target the html5 implemented like button?
<div class="fb-like span6" data-href="https://www.facebook.com/pages/xxxxxx?fref=ts" data-send="true" data-width="450" data-show-faces="false" data-action="like" data-font="segoe ui"></div>
And what css would I need to apply to it?

Answer 1

Unfortunately you can't really get the popup 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 its probably way more of a headache than it's really worth for something like this.
However, if you just want the iframe opening above the edge of the window you could move the iframe around like this:
.fb_iframe_widget iframe {
position:absolute;
top:-165px;
background:#fff; /* in your case you may want to add a white background */
}
Also you'll need to remove overflow:hidden from #footer.
You should end up with this:
I know it's not ideal, but given Facebook's lack of interest in being particularly developer friendly it is likely as close as you can get to what you're after.
Update:
Wrap the whole widget in a div and position the div where you had it to begin with. Then you can you use the following CSS to position the iframe.
.fb_iframe_widget iframe {
position:absolute;
top:-165px;
background:#fff;
right:10px;
}
#media (min-width:1200px) {
.fb_iframe_widget iframe {
position:absolute;
top:-165px;
background:#fff;
right:-45px;
}
}
#media (max-width:979px) and (min-width: 768px) {
.fb_iframe_widget iframe {
position:absolute;
top:-165px;
background:#fff;
right:110px;
}
}
#media (max-width:767px) {
.fb_iframe_widget iframe {
position:absolute;
top:-165px;
background:#fff;
right:0px;
}
}

Answer 2

a) you should change your footer's height, it won't affect much your design, even your responsive options, it could be like this:
#footer {
margin-left: 0;
height: 230px;
background: #fff;
border-top: 1px solid whiteSmoke;
}
or...
b) you can put the like button in your side bar without changing any css, i will look something like this:
http://puu.sh/3Srmq.png

Answer 3

I have a compromise solution too.
After user clicked the like button, scroll window untill widget totally shows up by callback function.
Code looks like
FB.Event.subscribe('edge.create', function(response) {
$('html, body').animate({
scrollTop : $("#yourFacebookWidgetID").offset().top + 170 //add offset.
}, 10);
});
Here is the fiddle.(I borrowed this instance, Somebody made it long time ago.)
Here is the screenshots.
After clicked the like button, just before auto scroll.
And this is the screen after auto scrolling finished.
Please notice the last like button.
Edited : add the 170px offset .
Add screenshots.

Answer 4

That's what worked out for me.
.wrap-parent {
zoom: 1; //or your clearfix class
}
.wrap {
overflow: visible;
}
The html will be something like
<div class='wrap-parent>
<div class='wrap'>
<!-- button here -->
</div>
</div>