How to change facebook popups?

Question

I use as and send the plugin at the bottom of my site. But when you click the Submit button, a pop-up window opens and does not appear completely. How can I open the popup at the top? but they don’t change, as they send button positions. To change only the popup window position.

Answer 1

So, you need to add a little negative margin on the left to move the widget popup to the left until it appears in the visible area . You can use this in your css:

 .fb_edge_comment_widget { margin-left: -370px !important; //use any figure appropriate to you } 

You will need to add some margin-bottom to the parent div where the buttons will appear to make the pop-up look a bit on the left and fully visible ...

Here is a link to a similar question: Facebook Like Widget on Fan page, comment area from visible area

Hope this helps.

Answer 2

Actually, this is possible.

Our solution does more than just popping up the Facebook Like dialog box above, it is also completely asynchronous, therefore it doesn’t block the page, it automatically creates the correct URL entry, so the same javascript is used on all our pages, and it updates and shows its only after the actual size is known, thus killing three birds with one stone.

1) we include on all our pages an "empty" div that is filled with javascript:
<div id="social-media-bar"><div id="social-media"></div></div>

PS: the reason for the two div levels is that I will expand this to google +, twitter, etc. later.

2) we load facebook asynchronously
using the LazyLoad bootloader, but everything will be done, and you can also do synchronous if you want: LazyLoad.js(('https:' == document.location.protocol ? 'https://' : 'http://') +
'connect.facebook.net/en_US/all.js'); LazyLoad.js(('https:' == document.location.protocol ? 'https://' : 'http://') +
'connect.facebook.net/en_US/all.js');

3) in facebook init, we:
- fill in the selected div,
- ask fb to parse inserted tags
- use the timeout after parsing to make sure the display is updated and therefore the width and height are correct.

 window.fbAsyncInit = function() { var d = document,n,nn,url,url_ref,i;` // due to bug in facebook need to delay the actual access to data after parse function FBUpdateSize(){ var h,str; // show facebook entry using actual element size h = nn.firstChild.clientHeight; str = h+'px'; nn.style.height= str; n.style.height= str; n.style.overflow='visible'; } FB.init({ channelUrl : 'http://www.plixo.com.sg/channel.html', //appId : '228760567272221', status : false, xfbml : false}); // create facebook entries in the DOM n = d.getElementById('social-media'); url = d.URL; i = url.lastIndexOf('/')+1; url_ref = url.slice(i,url.indexOf('.',i)); nn = d.createElement('fb-like'); nn.innerHTML = '<div id="fb_like_bottom"><fb:like href="' + url + '" ref="' + url_ref + '" send="false" layout="standard" width="360px" show_faces="false"></fb:like></div>'; nn = n.appendChild(nn); // call facebook to fill DOM entries // use a timeout in callback to ensure browser has refreshed internal clientHeight FB.XFBML.parse(nn,function(){setTimeout(FBUpdateSize,50)}); };` 

4) and only 3 selected CSS styles for changing the position of the dialog box:
#social-media{position:relative;display:block;width:auto;z-index:200;overflow:hidden;height:0;background-color:#f2f2f2;border:1px solid #bdc7d8}
#fb_like_bottom{padding:4px;position:absolute}
#fb_like_bottom .fb_iframe_widget_lift{bottom:0;background-color:#f2f2f2;border:1px solid #bdc7d8!important;margin:-5px;padding:4px}

You can see an example on any page of our site, for example, http://www.plixo.com.sg/large-format-printing-services.html .

Do not forget to reuse / modify, etc., just appreciate if you link to any of our pages; -)