How to change facebook send popup positions?

Question

I use like and send plugin on bottom of my site. But, when click send button, popup window opens down and does not shown full. How can I make popup opens to above? but not change like and send buttons positions. To change only positions of popup.

I have a screenshot, but cannot put here, site validations don't let. — Jeyhun Rahimov, Jul 25 '12 at 06:22
http://www.flickr.com/photos/83404814@N05/7642219502/in/photostream — Jeyhun Rahimov, Jul 25 '12 at 07:11
I checked, popup pulled to the left side. but as first, bottom of popup is hidden again. (( — Jeyhun Rahimov, Jul 25 '12 at 08:17
then you have to add some margin-bottom to parent div or container where the buttons appear... — talha2k, Jul 25 '12 at 08:18
okay. i wrote "margin-top: -70px" for popup. popup raised up. but plugin's sizes are small. i will have to change those — Jeyhun Rahimov, Jul 25 '12 at 08:26
I did so. i enlarged div that contains like-send plugin. but everything is spoiled. popup does not shown outside div. — Jeyhun Rahimov, Jul 25 '12 at 08:42
There is no solid fix for that.. try giving footer some margin from top. so it will move down and your box will appear correctly. — talha2k, Jul 25 '12 at 08:44

score 4 · Accepted Answer · edited May 23 '17 at 11:53

So you have to add some negative margin from left to move the widget popup box to left till it comes in 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 parent div where the buttons appear so it will force the popup box appear to a bit left and is completely visible...

Here is a link to similar question: Facebook Like Widget on Fan page, Comment area out of visible area

Hope this helps.

score 2 · Answer 2 · answered Aug 16 '13 at 14:31

Actually, it's possible.

Our solution do more than just having the Facebook Like dialog appear above, it's also fully asynchronous, thus non blocking for the page, it automatically create the right url entry so the same javascript is used in all our pages, and it update and show it only after the actual size is known, thus killing 3 birds with one stone.

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

PS: the reason for 2 levels of div is because I will later extend this to google+, twitter etc

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

3) in the facebook init, we:
- fill the dedicated div,
- ask fb to parse the inserted tags
- use a timeout after parsing to ensure display has been refreshed and thus widht 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 dedicated css styles for repositioning the dialog:
#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 look at an example in any of our website pages, ex, http://www.plixo.com.sg/large-format-printing-services.html.

Feel free to reuse/modify etc, will just appreciate if you link to any of our page ;-)

How to change facebook send popup positions?

2 Answers2