Using Facebook like button inside an app iframe, e.g.

The like button is usually positioned somewhere on the right part of the screen. The problem is that once the like button is clicked, the dialog that es beneath it hides beyond the iframe container, e.g.

It is very easy to simply disable the dialog (using CSS), however, something I need the dialog.

What are the possible solutions for this? I expect there should be a method to trigger some overlay form or make the dialog to appear to-the-left of the like button rather than right.

Using Facebook like button inside an app iframe, e.g.

The like button is usually positioned somewhere on the right part of the screen. The problem is that once the like button is clicked, the dialog that es beneath it hides beyond the iframe container, e.g.

It is very easy to simply disable the dialog (using CSS), however, something I need the dialog.

What are the possible solutions for this? I expect there should be a method to trigger some overlay form or make the dialog to appear to-the-left of the like button rather than right.

• javascript
• facebook
• facebook-like

Share Improve this question Follow asked Nov 29, 2011 at 12:51 GajusGajus 74.2k8080 gold badges297297 silver badges473473 bronze badges 3

• I am having a similar issue. Did you fix it? – Daniele Commented Sep 6, 2012 at 14:35
• No, Facebook did not provide ability to change element align. You will simply need to move the element to the left end of the page or hide the ment dialog. – Gajus Commented Sep 6, 2012 at 19:43
• Funny that Facebook hasn't added yet any option to left-align the dialog. – Gajus Commented Nov 12, 2012 at 17:38

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

From the Facebook 'Like Button' dev page

'If the Like button is placed near the edge of an HTML element with the overflow property set to hidden, the flyout may be clipped or pletely hidden when the button is clicked. This can be remedied by setting setting the overflow property to a value other than hidden, such as visible, scroll, or auto.'

I have a similar problem and this fixed. Add this to your stylesheet:

.fb-like span{overflow:visible !important; width:450px !important; margin-right:-375px;}