Question

我在同一页面上有类似按钮/小部件，推特小部件，Google+小部件和锚标签的Facebook。

如果删除Facebook赞按钮，一切正常。

如果显示Facebook like按钮，那么like按钮可以工作，但包括简单锚标签在内的所有其他小部件都不会。

有什么理由不起作用吗？

Facebook SDK通过jquery异步加载

$('body').prepend('<div id="fb-root"></div>');
$.getScript('http://connect.facebook.net/en_US/all.js')
.done(function(script, textStatus) {

    // Initialize Facebook javascript SDK.
    window.fbAsyncInit = function() {
        FB.init({
            appId      : settings.appId,
            channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
            status     : true, // check login status
            cookie     : true, // enable cookies to allow the server to access the session
            xfbml      : true  // parse XFBML
        });

        initSocialWidgets();
        initFacebookPlugins();
    };
})
.fail(function(jqxhr, settings, exception) {
});

使用jquery动态插入Widget html。

// Facebook.
script = '<div class="fb-like" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true"></div>';
$('#facebook-widget-container').append(script);

// Twitter.
script = '<a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="ezoetic">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>';
$('#twitter-widget-container').append(script);

// Google.
script = '<div class="g-plusone" data-size="medium"></div><script type="text/javascript"> (function() { var po = document.createElement(\'script\'); po.type = \'text/javascript\'; po.async = true; po.src = \'https://apis.google.com/js/plusone.js\'; var s = document.getElementsByTagName(\'script\')[0]; s.parentNode.insertBefore(po, s);  })();</script>';
$('#google-widget-container').append(script);

Answer 1

这里的核心问题是fb-like div中的data-width =“450”属性。

像按钮宽度450px的Facebook正在覆盖行中的所有其他小部件/锚点。所以所有其他小部件/锚点都会显示但无法点击。

但是，将数据宽度设置为108px（Like + Send按钮的测量宽度）也无法解决问题。它仍然导致Facebook像按钮宽度150px。将数据宽度设置为小于108px也没有效果。

最终的解决方案是简单地将一个css添加到Facebook就像按钮容器。

.product-view #facebook-widget-container {
    width: 108px;
    overflow: hidden;
}

Answer 2

您只想在FB.init()回调中运行window.fbAsyncInit，否则无法确定FB是否已由js代码正确设置。

这可能会导致在客户端浏览器中停止javascript解析器时出错，因此无法运行initSocialWidgets();

在调用FB.init（）之前放一个简单的console.log(1);，然后在它之后放一个console.log（2），看看两个日志是否都在控制台中结束。

Facebook喜欢按钮打破其他社交小工具和主播

2 个答案: