Digital experiences for all disciplines
New Landing › How can we help? › Themeforest Theme Support › Dante › bootstrap responsive visibility for facebook javascript sdk like button
New Landing › How can we help? › Themeforest Theme Support › Dante › bootstrap responsive visibility for facebook javascript sdk like button
- This topic has 1 reply, 2 voices, and was last updated 9 years by laranz – SUPPORT.
-
Posted in: Dante
-
September 4, 2014 at 8:51 pm #107187
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?
September 5, 2014 at 2:22 am #107284Hi,
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. -
Posted in: Dante
You must be logged in and have valid license to reply to this topic.