Question

是否有任何方法可以让“喜欢”按钮向上展开而不是向下展开，就像在我的页面http://frc1410.org上一样，按钮放在页脚中，我希望让它向上展开，或推动整个页脚，所以它是可见的。提前谢谢！

Answer 1

以前的回答仅适用于评论。 Like对话框稍微有些困难。

对我来说，其他人没有去加载阻止页面的时间，以及由于更改大小而导致的smurf。

我们用一块石头杀死了4只鸟，并采用以下解决方案： - Facebook Like对话框出现在相似的botton和顶部z-index级别上方 - 它完全异步，因此页面无阻塞，
- 我们会自动创建正确的网址条目，以便在我们所有的网页中使用相同的javascript，
- 并且只有在知道实际尺寸后才会更新并显示

点击后的图片如： http://www.plixo.com.sg/download/fb_open_up.png

以下是我们的工作方式：

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/pipe-markers.html

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

Answer 2

您可以编辑类pluginCommentFlyoutFull的CSS。该类的top属性可以设置为负值。您还需要对类似按钮中的其他HTML元素执行此操作。您还需要执行一些z-index以使其显示在主内容包装器上。

.pluginCommentFlyoutFull {width：450px;上：-157px; }

Facebook喜欢按钮通过无溢出页面向下扩展

2 个答案: