2

有什么方法可以让like按钮向上扩展而不是向下扩展，就像在我的页面http://frc1410.org上一样，like按钮被放置在页脚中，我希望它向上扩展，或者推动整个页脚向上，使其可见。提前致谢！

4

2 回答 2

1

以前的答案仅适用于评论。Like 对话框更难一些。

对我来说，其他人禁止加载阻止页面的时间，以及由于更改大小而导致的蓝精灵。

我们使用以下解决方案用一块石头杀死了 4 只鸟： - Facebook Like 对话框出现在 Like 按钮上方和顶部 z-index 级别
- 它是完全异步的，因此页面不会阻塞
- 我们自动创建正确的 url 条目所以我们所有的页面都使用相同的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 的原因是因为我稍后会将其扩展到 google+、twitter 等

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

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

于 2013-08-16T14:43:46.997 回答
0

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

.pluginCommentFlyoutFull { 宽度：450px; 顶部：-157 像素；}

于 2012-10-04T22:50:36.897 回答