bootstrap responsive visibility for facebook javascript sdk like button

[Ken]

Hi guys,

I want to include a facebook like button on the site – the pretty facebook with everyone’s faces that shows are awesome and well-liked we are 😀

I’ve used the standard facebook button from https://developers.facebook.com/docs/plugins/like-button

To insert the code into the page I’ve used a raw html element.

The facebook element works well, but it’s not responsive – requires a fixed width. My solution was to impliment 4 elements, one for each of the bootstrap visiblity classes.

There is no extra-class for the raw html element so I have wrapped the facebook code in a div container as follows:

<div class="visible-lg"><div class="center-lg"><div class="fb-like" data-href="http://www.facebook.com/samurdermysteries" data-width="1100" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div></div></div>

And that works perfectly.

However it doesn’t work for any of the other responsive classes. I have tried placing all of the code into one html block and tried separating it into 4, one for each visibility class. Either way, only the “visible-lg” class works correctly.

The complete code I’m using is:

<div class="visible-lg"><div class="center-lg"><div class="fb-like" data-href="http://www.facebook.com/samurdermysteries" data-width="1100" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div></div></div>

<div class="visible-md"><div class="center-md"><div class="fb-like" data-href="http://www.facebook.com/samurdermysteries" data-width="987" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div></div></div>

<div class="visible-sm"><div class="center-sm"><div class="fb-like" data-href="http://www.facebook.com/samurdermysteries" data-width="763" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div></div></div>

<div class="visible-xs"><div class="center-xs"><div class="fb-like" data-href="http://www.facebook.com/samurdermysteries" data-width="400" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div></div></div>

along with the following custom css to get the facebook attribute to center:

.center-lg {
    margin-left: auto;
    margin-right: auto;
    width: 1100px;
}

.center-md {
    margin-left: auto;
    margin-right: auto;
    width: 987px;
}

.center-sm {
    margin-left: auto;
    margin-right: auto;
    width: 763px;
}

.center-xs {
    margin-left: auto;
    margin-right: auto;
    width: 400px;
}

Any thoughts on why the visible-lg works but not the others?

[laranz – SUPPORT]

Hi,

I tried like this

<div class="visible-lg">Visibile lg</div>
<div class="visible-md">md</div>
<div class="visible-sm">sm</div>
<div class="visible-xs">xs</div>

and it works, I think there is some issue with the facebook embeds? Try some other way like use this plugin http://wordpress.org/plugins/facebook-button-plugin/ and put the shortcode inside those divs? Just a thought, didn’t try that too. Or try some other plugins which support responsive fb like button.

Let us know,

Thanks,
laranz.