javascript - 如何更改 Facebook 发送弹出窗口的位置？

Question

我在我的网站底部使用喜欢和发送插件。但是，当单击发送按钮时，弹出窗口会打开并且没有显示完整。如何使弹出窗口打开到上面？但不会更改喜欢和发送按钮的位置。仅更改弹出窗口的位置。

Answer 1

因此，您必须negative margin从左侧添加一些以将小部件弹出框向左移动，直到它进入visible area。你可以在你的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

希望这可以帮助。

Answer 2

实际上，这是可能的。

我们的解决方案不仅仅是让 Facebook Like 对话框出现在上面，它也是完全异步的，因此页面不会阻塞，它会自动创建正确的 url 条目，因此我们所有的页面都使用相同的 javascript，它会更新并显示它只有在知道实际大小后，才能用一块石头杀死3只鸟。

1）我们在所有页面中都包含一个“空”的 div，而不是用 javascript 填充：
<div id="social-media-bar"><div id="social-media"></div></div>

PS：2 级 div 的原因是因为我稍后会将其扩展到 google+、twitter 等

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

3) 在 facebook 初始化中，我们：
- 填充专用 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。

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