ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Dante
• September 4, 2014 at 8:51 pm #107187
  Ken

  Member

  Post count: 71

  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 #107284
  laranz – SUPPORT

  Member

  Post count: 3186

  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.

• Back to forum

  Posted in: Dante