jquery - Facebook Like 按钮打破了其他社交小部件和 anchor

Question

我在同一页面上有一个类似 Facebook 的按钮/小部件、Twitter 小部件、Google+ 小部件和 anchor 标记。

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

如果显示 Facebook 点赞按钮，则点赞按钮可以工作，但包括简单 anchor 标记在内的所有其他小部件都不会。

有什么理由说明这不起作用吗？

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) {
});

Widget html 是使用 jquery 动态插入的。

// 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 的 div 中的 data-width="450"属性。

类似 Facebook 的宽度为 450 像素的按钮覆盖了该行中的所有其他小部件/ anchor 。因此，所有其他小部件/ anchor 都会显示，但无法单击。

但是，将数据宽度设置为 108px(Like+Send 按钮的测量宽度)也没有解决问题。它仍然导致类似 Facebook 的按钮宽度为 150 像素。将 data-width 设置为小于 108px 也没有效果。

最终的解决方案是简单地向 Facebook like 按钮容器添加一个 CSS。

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