如何更改Facebook发送弹窗的位置？

Question

我在网站底部使用了“点赞”和“发送”插件。但是，当我点击“发送”按钮时，弹出窗口会向下打开，无法完全显示。我该如何使弹出窗口向上打开？但不改变“点赞”和“发送”按钮的位置。只需更改弹出窗口的位置。

- Jeyhun Rahimov

---

我有一张截图，但无法在这里放置，网站验证不允许。 - Jeyhun Rahimov

http://www.flickr.com/photos/83404814@N05/7642219502/in/photostream - Jeyhun Rahimov

我检查了一下，弹出窗口被拉到了左侧。但是首先，弹出窗口的底部再次被隐藏了。 - Jeyhun Rahimov

然后您需要在包含按钮的父级div或容器中添加一些margin-bottom... - talha2k

目前没有稳定的解决方案。尝试给页脚添加一些顶部边距，这样它就会向下移动，您的盒子将正确显示。 - talha2k

Answer 1

那么，您需要从左边加入一些负外边距来将小部件弹出框向左移动，直到它进入可见区域。您可以在css中使用以下代码：

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

您需要在包含按钮的父级div中添加一些margin-bottom，这样它将强制弹出框向左移动一点并完全可见...

这里是一个类似问题的链接： Facebook Like Widget on Fan page, Comment area out of visible area

希望这可以帮到您。

- talha2k

Answer 2

实际上，这是可以实现的。

我们的解决方案不仅仅是让Facebook Like对话框出现在页面上方，它还是完全异步的，因此不会阻塞页面，它自动创建正确的url条目，使得所有页面都使用相同的javascript，并且在实际大小已知后才更新和显示它，从而一石三鸟。

1）我们在所有页面中包含一个“空”div，然后在javascript中填充它：
<div id="social-media-bar"><div id="social-media"></div></div>

PS：之所以有2级div，是因为我将稍后将其扩展到Google+、Twitter等

2）我们异步加载Facebook
使用LazyLoad加载器，但任何加载器都可以，如果您想要同步也可以： LazyLoad.js(('https:' == document.location.protocol ? 'https://' : 'http://') +
'connect.facebook.net/en_US/all.js');

3）在Facebook init中，我们：
- 填充专用div，
- 要求fb解析插入的标记
- 在解析后使用超时来确保显示已刷新，从而宽度和高度是正确的。

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) 只有3个专用的CSS样式用于重新定位对话框：
#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}

您可以在我们的任何网页中查看示例，例如：http://www.plixo.com.sg/large-format-printing-services.html。

请随意重用/修改等，如果您链接到我们的任何页面，我们将不胜感激;-)

- Alexis Martial