Question

我在我的网站底部使用like和send plugin。但是，当单击“发送”按钮时，弹出窗口会打开并且不会显示为已满。如何让弹出窗口打开到上面？但不改变喜欢和发送按钮位置。仅更改弹出窗口的位置。

Answer 1

所以你必须从左边添加一些negative margin来将小部件弹出框向左移动，直到它进入visible area。你可以在你的css中使用它：

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

您需要在按钮出现的位置添加一些margin-bottom到父div，这样会强制弹出框显示为左侧并且完全可见...

以下是类似问题的链接： Facebook Like Widget on Fan page, Comment area out of visible area

希望这有帮助。

Answer 2

实际上，这是可能的。

我们的解决方案不只是让Facebook Like对话框出现在上面，它也是完全异步的，因此对页面没有阻塞，它会自动创建正确的url条目，因此在我们所有的页面中使用相同的javascript，并且它会更新并且只有在知道实际尺寸后才显示它，从而一石二鸟。

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

PS：2级div的原因是因为我稍后将其扩展到谷歌+，推特等

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

3）在facebook init中，我们：
- 填写专用div，
- 要求fb解析插入的标签
- 解析后使用超时以确保显示已刷新，因此widht和height是正确的。

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。

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

如何更改facebook发送弹出位置？

2 个答案: