Question

我在我的网站上使用Facebook的“赞”按钮（http://developers.facebook.com/docs/reference/plugins/like/）（标准iframe版本，而不是XFBML），并希望它在页面文本（内联）中浮动。问题在于按钮可以具有各种状态，具体取决于您是否“喜欢”自己，有多少喜欢，语言等，并且每个状态都有不同的宽度。我希望按钮的iframe大小只与iframe的内容一样大，允许按钮浮动内联，周围没有难看的间距。我找到的每个解决方案都涉及修复iframe或周围DIV的宽度。

注意：此问题与How can I make the Facebook Like button's width automatically resize?不重复。我想要的不是固定而是动态宽度。

Answer 1

我遇到了同样的问题。使这一点变得困难的是，你不能对包含来自不同域的页面的iframe的内容使用javascript。

这只是部分解决方案，但这可能会有所帮助。您可以确定页面被“喜欢”的次数，并使用Javascript（此处使用jQuery显示）调整样式：

jQuery(document).ready(function($) {
    var shareUrl = window.location.href;

    $.getJSON('http://graph.facebook.com/?id=' + escape(shareUrl) + '&callback=?', function(data) {
        if (data.shares) { //if the tip of the day has been "liked" at least once
            $('#fblike').addClass('hasLikes');
        }

    });
});

示例样式：

#fblike.hasLikes iframe {
    width: 87px !important;
}

您可以同样从Facebook Graph获取可帮助您确定宽度的其他信息，或者可能创建您自己的自定义显示代码（尽管至少您仍需要使用提供的iFrame作为“Like”按钮本身;你只需要关掉所有的额外内容）

调整Facebook“喜欢”按钮iframe以适应内容

1 个答案: