Facebook Like Widget on Fan page, Comment area out of visible area

Question

When using the like or send widget on a Fan Page (no mater if you use iframe tag or fbml for it) the overlay for commenting is positioned always to the right. see http://twitpic.com/4q7ggi for example.

I cant find a way to get the widget to respect the 520px boundary of the facebook tab. see http://www.facebook.com/pages/Ludwig-Test/127771653944246?sk=app_101150316644842 for an example. Anyone an idea how to solve this ?

TIA Rufinus

Tenantry

I would love to know the answer to this, so far the only solution I could find is to put the like and send button on the far left side of the screen. There was a css hack for this, but it hasn't worked in quite a while. – Jarietta

i only know of a JS hack, but this seems to work only with dialogs. (and then only in rare occasions). – Tenantry

@Tenantry could you maybe post your code somewhere, or a link to the page you're working on? – Tuscarora

Have you got a live web page or a snippet of code we could see it on Rufinus? – Apophyge

+1 to Liam's question - I can't find a fan page which shows the widgets in the same way your screenshot does. – Late

Hi all, i added an example link. – Tenantry

Answer 1

Try adding this to your css:

.fb_edge_comment_widget {
    margin-left: -350px;
}

This will move comment box to the left, but the little arrow pointing to the button will move too (which you could try to cover with another element). It will only work if you're using XFBML, not an iframe.

Here's an example.

Proctor

most FB workarounds are not ideal, but the only thing which matters is when it is working :-) thanks seler. (I will wait the full 4 days if maybe someone has a better solution, but i guess the 100 points are yours) – Tenantry

@seler: I f#@!#@! love you. Thanks for helping me workaround this madness that is the FB API – Rip

Seems like it doesn't work anymore, at least for Like button. Now, the "active" button and the popup are in the same Iframe... And CSS can't do anything. – Decoteau

Answer 2

I had to move the little arrow to the bottom, and that's how i did it.

1) Move your popup window to the desired position. Use the !important statement to overwrite default styles.

.fb_edge_comment_widget {
    top: -224px !important; left: -246px !important; height: 191px;
    background: url(../img/arrow-down.gif) 0 100% no-repeat
}

This style also contains a new arrow image which replaces the bottom line of the popup window. It contains my own new bottom arrow, which is blue (#283E6C) by default and grey inside (#F2F2F2). We can use height to adjust the vertical position and move the background image to the bottom.

The image will look like this: .

2) Apply overflow: hidden to the span that wraps the iframe, We'll be able to cut off parts of the iframe by applying margin-top in step 3, and replace them with our own.

.fb_edge_comment_widget > span {
    height: 184px !important; overflow: hidden; border-top: 1px solid #000;
}

I'm using border-top to create my own upper border, since in step 3 we are cutting of the default border and arrow.

3) Move the iframe up a bit to cut off its upper border and arrow.

    .fb_edge_comment_widget > span > iframe {
        margin-top: -7px;
    }   

The result looks like this in my case:

Nowlin

Answer 3

If you're using the XFBML implementation of the Facebook Like button, you can use CSS to re-position the "flyout" menu relative to its original position near the Send button:

The above example using jsFiddle and this CSS:

.fb_edge_comment_widget {
    margin-left: -343px;
}

Since the contents of the "flyout" are inside an iframe you won't be able to apply any CSS to it — meaning, moving the triangle indicator to the right side of the "flyout" isn't possible.

Web browsers have tightened security on cross-frame scripting due to spoofing and other hacks, so iframes are treated like separate HTML pages with their own CSS and JavaScript.

For any advanced CSS styling, you would have to inject the Facebook Widget's iframe using DOM Scripting ... and even then it may not work across browsers.

Goyette

exact copy of previus solution – Proctor

Answer 4

Not a great answer but the only option I have found is to wrap the widget in an absolutely positioned Div to keep it on the left side of the window

Dimerous

Answer 5

To fix it I strongly recommend to put the Facebook widget on the left side of your page. Any other solution could work for a certain period of time, but in the future will fail. The reason is that Facebook updates its widget frequently.

Split