Add Facebook and Blogger Multi Tab comment system to the blog

In the last post I showed how to add Facebook Comment Box to your blog in a simple way. Today I will share with you how to use both the comment box on Facebook and Blogger together with the Multi Tab system on the blog. This allows your visitors to express their opinion using any comment box according to their preferences. Even though the two comment boxes can be used together, there are some problems in it. Because if you add the two Normal comments box, the two comment boxes will be shown together. And using this multi tab system will always have a tab. For example, when using the Facebook comment box, the Blogger Comment box will be displayed, and the Facebook comment box will be displayed while using the Blogger comment box. Apart from this, both tabs have been added to the system of comment count. As a result, anyone can easily understand how many comments have been posted on a tab in your post.

How to add ?

1. First, login to Facebook account and create a Facebook App ID. If you do not have a Facebook App ID, then you have to create a Facebook App ID.
2. Then log in to your Blogger account.
3. Then click on Template> Edit HTML.
4. Then press Ctrl + F to search the </ head> section.
5. Now paste the following codes below the above </ head> tag.

[code start]  <script src='https://connect.facebook.net/en_US/all.js#xfbml=1'/>

<script src='https://code.jquery.com/jquery-latest.js'/>

<meta content='Your_Facebook_App_ID' property='fb:app_id'/>

<script type='text/javascript'>

//<![CDATA[

function comment Toggle(selectTab) {

 $(".comments-tab").addClass("inactive-select-tab");

 $(selectTab).removeClass("inactive-select-tab");

 $(".comments-page").hide();

 $(selectTab + "-page").show();

}

//]]>

</script> [code end]

1. Place your Facebook App ID in the red marked area.
2. Now press Ctrl + F to re-enter the keyboard ]]> </ b: skin> tag and paste the below code above ]]> </ b: skin> tag.

[code start] .comments-page{background-color:#FFF;border:1px dotted #93DAF8;border-radius:10px;margin-top:5px}

#blogger-comments-page{padding:0 5px;display:none}

.comments-tab{float:left;padding:5px;margin-right:3px;cursor:pointer;background-color:#b5e5fa;border-radius:2px}

.comments-tab-icon{height:14px;width:auto;margin-right:3px}

.comments-tab:hover{background-color:#eeeeee}

.inactive-select-tab{background-color:#d1d1d1} [code end]

1. Now press Ctrl + F to switch to the keyboard <b: include data = 'post' name = 'post' /> Search the tag and paste the following code below this tag.

[code start] <b:if cond='data:blog.pageType == &quot;item&quot;'>

  <div class='comments-tab' id='fb-comments' onclick='javascript:comment Toggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>

   <img class='comments-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHuktYYYcVsU7wFldpc0XHcJG8q1wMpAWrI97LstAZUe6W_5VMGahcywEqVmFJ2xwVjWUiWXhtCkDzkt9g_-_ReQuFxKuIZJiXCfN7OO4sUh3Pfl4IM3F6-9eVB0nerB7cc_zhsS_sn-AN/s1600/FB.png'/>

    <fb:comments-count expr:href='data:post.url'/> Comments

  </div>

 <div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:comment Toggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>

  <img class='comments-tab-icon' src='https://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments

 </div></b:if><div class='clear'/></div>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

  <div class='comments-page' id='fb-comments-page'>

   <div id='fb-root'/>

    <fb:comments expr:href='data:post.url' num_posts='10' width='100%'/>

  </div>

</b:if>

<div class='comments comments-page' id='blogger-comments-page'> [code end]

1. Then click on Save Template and then OK.

Facebook and Blogger shared commentary on the easiest method to use both comment system together in blogs. If someone has any difficulties or difficulties to understand, then we can report it to us. We will do our best to solve your problem.