facebook iframe App: Send/Like button z-index issue

Question

We are having a problem with our facebook like/send button, if you open: http://apps.facebook.com/bymii-test/products.php?pageid=216605071714962&prd_id=35&prd_name=Coalesce: - click facebook send, the box is behind the facebook sidebar. Is there any way to: change the z-index - or to make the window pop up on the left?

Solution 1

I FINALLY FOUND THE ANSWER!! 1 1/2 Hours searching later.. just enter this code into your CSS file:

.fb_edge_widget_with_comment span.fb_edge_comment_widget {
top: 15px !important;
left: -250px !important;}

Hope this is what you were looking for, because it was exactly what I was looking for!

Solution 2

Make sure the parent/container element has css value "overflow:visible". It happens when "overflow:hidden". Hope this helps.

Solution 3

I found this to work:

/* the below allows the fb:like iframe to show entirely instead of getting cropped off */

.fb-like iframe {
    max-width: inherit;
}

/* the same issue with the "send" button */

.fb-send iframe {
    max-width: inherit;
}

As you can see, it's asking those elements to "inherit" the width attributes of its parent elements.

Hope that helps.

Solution 4

The way for it to popup up and over all of it is to make the like button work in XFBML. The iframe implementation is limited and if you change the height and width of it to just fit the button, the window will appear hidden.

Solution 5

I modified Shane's excellent solution to focus specifically on z-index:

css:

.fb_edge_widget_with_comment span.fb_edge_comment_widget
{
    z-index:8 !important;
}

The above css code shows the Facebook widget above everything else, without having to relocate or "overflow" anything.

View more solutions

Comments

[Hendrik]

How exactly? The code: <div id="fb-root"></div><script src="connect.facebook.net/en_US/… href="" send="true" width="450" show_faces="true" font=""></fb:like> ?

[ShawnDaGeek]

Fancis, i use xFBML buttons and they do not reposistion them selves. I was wanting to ask you if perhaps there was a parameter i was missing?

[ShawnDaGeek]

Platform integrations, including social plugins: d. You must not obscure or cover elements of our social plugins, such as the Like button or Like box plugin.

[BritishDeveloper]

Technically he's not obscuring it - he's doing the opposite in fact ;)