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?

score 12 · Accepted Answer · answered Oct 27 '11 at 02:30

12

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!

answered Oct 27 '11 at 02:30

Shane

136
1
3

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.* – ShawnDaGeek Oct 27 '11 at 16:25
1

_Technically_ he's not obscuring it - he's doing the opposite in fact ;) – BritishDeveloper Sep 16 '12 at 08:37

score 7 · Answer 2 · edited Oct 26 '12 at 11:48

7

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

edited Oct 26 '12 at 11:48

caitriona

8,569
4
32
36

answered Mar 22 '12 at 09:12

Ashish

71
1
2

score 1 · Answer 3 · answered Jan 25 '14 at 10:12

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.

score 1 · Answer 4 · answered Aug 27 '14 at 16:51

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.

score 1 · Answer 5 · answered Aug 25 '11 at 18:09

1

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.

answered Aug 25 '11 at 18:09

Francis Pelland

784
4
11

1

How exactly? The code:
? – Hendrik Aug 28 '11 at 19:33
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 Aug 29 '11 at 13:54

score 0 · Answer 6 · edited Aug 25 '11 at 20:25

0

This is a common problem all developers are facing. The popup has no way to detect its relative position on a page or in an iframe.
To get the desired results i always install my like, send buttons on the left side of my page.

edited Aug 25 '11 at 20:25

genesis

50,477
20
96
125

answered Aug 25 '11 at 20:22

ShawnDaGeek

4,145
1
22
39

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

6 Answers6

Linked