Is it possible to add a parameter to Simple Facebook Connect and the sfc_like_button function to cause the popup to fly out to the left?

Right now, it flies out to the right and is underneath the dark outer wrapper of my page. (see below)

This happens in Firefox, IE and Safari. Using overflow:visible in the containing div doesn't help.

I've tried using positioning and z-index in that div and containing elements to position the popup on top of the wrapper with no luck.

Is this a function of the output of the iFrame at Facebook that can't be changed?


This is the function that includes SFC:

<?php sfc_like_button(array('width' => '125', 'height' => '20', 'layout' => 'button_count')); ?>

This is the resulting html in page source:

<fb:like href='http://mydomain.com/page/' send='false' layout='button_count' show_faces='true' width='125' height='20' action='like' colorscheme='light' font='lucida+grande'></fb:like>
  • The DIV in which contains the fly-out needs a position, i.e. position:relative; in order for the z-index to work on any child elements. You should also give the child element a position to.
    – Adam
    Apr 30, 2012 at 14:46

1 Answer 1


Thanks to SO: https://stackoverflow.com/questions/10471848/css-z-index-overflow-facebook-xfbml-and-safari

Turns out I needed positions and z-indexes, but also this on the containing <div>, which uses a "clearfix" trick (instead of using overflow:hidden) to make #main wrap its floated children:


#main {
clear: both;
padding: 5px 0 0 0;
position: relative;
overflow:hidden  /*removed */


#main:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  zoom: 1;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.