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

M

6

5

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?

Mosely answered 25/8, 2011 at 17:25 Comment(0)

E

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!

Ebner answered 27/10, 2011 at 2:30 Comment(2)

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. – Shew 27/10, 2011 at 16:25

Technically he's not obscuring it - he's doing the opposite in fact ;) – Zarger 16/9, 2012 at 8:37

L

7

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

Leukoderma answered 22/3, 2012 at 9:12 Comment(0)

N

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.

Norine answered 25/8, 2011 at 18:9 Comment(2)

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> ? – Mosely 28/8, 2011 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? – Shew 29/8, 2011 at 13:54

S

1

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.

Stovepipe answered 25/1, 2014 at 10:12 Comment(0)

M

1

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.

Mroz answered 27/8, 2014 at 16:51 Comment(0)

S

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.

Shew answered 25/8, 2011 at 20:22 Comment(0)

Recommended topics

Hot tags