How to Install Facebook Comment Forms on Blogger Templates

How to Install Facebook Comment Form on Blogger Template - Some time ago I just published a tutorial installing the disqus comment plugin on the blogger template, and on this occasion I returned with a tutorial that was still discussing the comment form (comment widget) namely "how to install the facebook comment form on blogger template ". Technically the steps that I use in installing / installing the facebook comment form widget in the blogger template are still the same as the previous tutorial (installing disqus comments), if you have followed it then the tutorial to install the facebook comment form on this blogger template will be easy to apply .

Go straight to the process of installing the facebook comment form, the first step that must be done is to install the facebook comments css above the code code]]> </ b: skin> or above the code </style> so that the facebook comment form displays responsive and has full width ( according to the post body width), here is the css.

/* --- Facebook Comments --- */
#container-commentfb .fb-comments,#container-commentfb .fb_iframe_widget,#container-commentfb .fb_iframe_widget span,#container-commentfb .fb_iframe_widget iframe{width:100%;display:block!important;min-width:100%;}

Next we go to the installation of the html widget code and the facebook comments script, do this slowly (step by step).

Search for the code collection widget form blogger comments, or search for the code below;

• <b:includable id='comments' var='post'>...</b:includable>

Or if the code folder opens then the code above will look like this;

•  <b:includable id='comments' var='post'>
  ...other code...
  ...other code...
  </b:includable>

Then, right below it, add the following Facebook app id code and Facebook comments script (install in a row);

<b:includable id='displayed-facebookid' var='post'>
<div id='facebook-comment-appid' style='display:none'>218168578325095</div>
</b:includable>
<b:includable id='facebook-comment' var='post'>
<b:if cond='data:post.allowNewComments'>
 <div id='fb-root'/>
 <div class='facebook-comment comment-box' id='facebook_cm'>
 <div class='hide' style='line-height: 0;visibility: hidden;'>
 <script>
 var APPID = $('#facebook-comment-appid').text();
 if (APPID == '' || APPID == null) {
 APPID = '218168578325095';
 }
 window.fbAsyncInit = function(){
 FB.init({appId:APPID,status:true,cookie:true,xfbml:true});};
 (function(){var e = document.createElement('script');
 e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
 e.async = true;
 document.getElementById('fb-root').appendChild(e);
 }());
 </script>
 </div>
 <script async='async' src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
 <div id='container-commentfb'>
 <div class='fb-comments' data-colorscheme='light' data-num-posts='10' data-width='100%' expr:data-href='data:post.url'/>
 </div>
 </div>
</b:if>
</b:includable>

Note the Facebook comment plugin serial number 218168578325095 in the code above, it is my Facebook app ID code, after the Facebook comment widget is successfully installed, please replace my Facebook app-id code with your own Facebook app-id code.

The next step also look for the code below;

• <b:includable id='iframe_comments' var='post'>....</b:includable>

Then above the code add the following code;

<b:includable id='fn_comment_picker' var='post'>
<div class='comments'>
 <b:if cond='data:post.allowComments'>
  <b:include data='post' name='displayed-facebookid'/>
  <b:if cond='data:top.commentLabel != &quot;facebook&quot;'>
   <b:include data='post' name='comment_picker'/>
  </b:if>
  <b:if cond='data:top.commentLabel == &quot;facebook&quot;'>
   <b:include data='post' name='facebook-comment'/>
  </b:if>
 </b:if>
  </div>
</b:includable>

Note: If all the code in question is not found or not found in your blog template, please install all code and facebook comments in a row that I provide just below the code;

• <b:includable id='comments' var='post'>...</b:includable>

Finally, look for the code below to complete the installation of the facebook comment form in the blogger template, along with the code;

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='comment_picker'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comment_picker'/>
</b:if>

Note the comment_picker code, please replace 'comment_picker' with 'fn_comment_picker' then save the template, at this stage the facebook comment form widget has finished installing but the status is still in standby or standby mode. To display the facebook comments widget, please go to Blogger Layout> Post / Blog Widget, click Edit, in the show comments column, change the text "comments" to "facebook" (without quotes), see the example image below;

Important: If you have previously applied the tutorial to install disqus comments from this site, please delete them first so that the Facebook comments widget installation runs smoothly and don't forget to follow by email this site to get the latest content notifications from this blog.

Strengths: The Facebook comment plugin installation technique in this tutorial is valid html5 and allows you to quickly change the comment form (Facebook or blogger), if you want to return to blogger comments you only need to activate it through the layout (change "Facebook" to "blogger" or "comments" and without quotes), Besides that the facebook comments script in this tutorial also allows the browser to load web pages dynamically (faster) because it uses the asyncr script loading technique.

Bagikan Artikel ini