Question

I have a Facebook like button/widget, twitter widget, Google+ widget and an anchor tag on the same page.

If the Facebook like button is removed everything works.

If the Facebook like button is displayed then the like button works but all other widgets including a simple anchor tag do not.

Is there any reason why this should not work?

Facebook SDK is loaded via jquery asynchronously

$('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 is insert dynamically using 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

The core problem here is the data-width=”450″ attribute in the fb-like div.

A Facebook like button width of 450px was overlaying all other widgets/anchors in the row. So all other widgets/anchors would show but could not be clicked.

However, setting the data-width to 108px (the measured width of the Like+Send button) did not fix the problem either. It still resulted in a Facebook like button width of 150px. Setting the data-width to less than 108px had no effect either.

The final solution was to simply add a css to the Facebook like button container.

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