How To Create Facebook Like Box and Responsive Comment

Facebook is a social medium that has a very large number of users. In Indonesia, only 47% of internet users have a facebook account. In addition to social media facebook also provide many tools for blog users. Among these facilities is the facebook like box, facebook button, facebook comment.

Well for those of you facebook users and also put up a facebook like box or facebook comment blog you might be interested in tips on this one. The tips that I give you this is how to make them become responsive. It is very suitable for users responsive template.

From the search results and I did an experiment that I found the two methods to make it responsive. That is by using CSS and jQuery. Well for those of you who are interested can follow the following ways.

CSS Method
This method can be done by adding the following CSS code into your blogspot template :
Facebook Like Box

.fb-like-box, .fb-like-box span, .fb-like-box iframe[style] {
width: 100% !important;
}

Facebook Comment Box

.fb-comments, .fb-comments span, .fb-comments iframe[style] {
width: 100% !important;
}

jQuery Method
In general, if you make a facebook like and also facebook comment (HTML5) there will be two boxes for copied code.
The first code is the code javascriptnya or called by JavaScript SDK. This code should only be placed once. And encouraged placed after <body>. This is the form code:

<div id="fb-root"></div>
<script>
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=Your Facebook ID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

The intent of this code that will look for the first script tag and put the script code with facebook id-jssdk thereafter. So code like the above can be replaced with the following code and put it after <body>

<div id="fb-root"></div>
<script id="facebook-jssdk" src="http://connect.facebook.net/en_US/all.js#xfbml=1&amp;appId=Your Facebook ID"></script>

Create A Responsive Facebook Like Box
The second code from the FB like box will be like this :

<div class="fb-like-box" data-href="URL of your facebook page" data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div>

The code above is the html code to display the facebook like box. The default value like box (profile, streams, and headers appear). To change this, please replace the true value is replaced with false. Suppose want to remove the header then converted into data-header = "false".
Because we will make be responsive it must be added a bit of html and jQuery code like this.

<div id="container-likefb" style="width:100%;">
  <div class="fb-like-box" data-href="URL of your facebook page" data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div>
</div>
<script type="text/javascript">
$(window).bind("load resize", function(){    
  var container_width = $('#container-likefb').width();    
    $('#container-likefb').html('<div class="fb-like-box" ' + 
    'data-href="URL of your facebook page"' +
    ' data-width="' + container_width + '" data-show-faces="true" ' +
    'data-stream="true" data-header="true"></div>');
    FB.XFBML.parse( );    
}); 
</script>

Create A Responsive Facebook Comment
As well as the like box, the facebook comment, this code like this (for bloggers):

<div class='fb-comments' expr:data-href='data:post.url' data-width='470' data-num-posts='10'></div>

Almost the same is done on the like box, but there was little comment on facebook additional Javascript code. So the code would be like this.

<div id="container-commentfb" style="width:100%;">
  <div class='fb-comments' expr:data-href='data:post.url' data-width='470' data-num-posts='10' ></div>
</div>
<script type="text/javascript">
//<![CDATA[
$(window).bind("load resize", function(){   
  var url = location.protocol+'//'+location.host+location.pathname;
  var containercm_width = $('#container-commentfb').width();    
    $('#container-commentfb').html('<div class="fb-comments" ' + 
    'data-href="'+url+'"' +
    ' data-width="' + containercm_width + '" data-num-posts="10"></div>');
    FB.XFBML.parse( );    
}); 
//]]>
</script>

It's finished for this tutorial
Hopefully can help and understand.
Good luck to you.

How To Create Facebook Like Box and Responsive Comment

Post a Comment

Contact form