How to add Facebook and Blogger Multi Comment Box

In the last post I showed how a simple way to add to your blog, Facebook Comment Box. Today I will share with you how Facebook and Blogger blog with Multi Tab through the system to use the comment box. As a result of their choice according to your visitors that you can express their opinions by using the Comments box. Normally, however, the comment box can be used together, but there are some problems. Normally, because of the comment box if you add the two together to show comment box. The multi-tab system to be used will result in a tab all the time Implied. For example, when using Facebook comment box will implied comment box Blogger, Blogger and Facebook comment box while using the comment box will be implied. Nor is there a system to count the comment tab. As a result, anyone can easily understand how many comments your post has been any tab.

How to add Comment Box

• Facebook account to log in first to create a Facebook App ID. Facebook App ID if you do not, you can create from the Facebook App ID.
• Then log in to your Blogger account.
• The Template> Edit Html click.
• And from the keyboard by pressing Ctrl+F (Windows) or CMD+F (Mac) </head> section of the search.
• Now, the following codes </head> tags above the paste.

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><script src='http://code.jquery.com/jquery-latest.js'/><meta content='Your_Facebook_App_ID' property='fb:app_id'/><script type='text/javascript'>//<![CDATA[function commentToggle(selectTab) { $(".comments-tab").addClass("inactive-select-tab"); $(selectTab).removeClass("inactive-select-tab"); $(".comments-page").hide(); $(selectTab + "-page").show();}//]]></script>

• Red mark at the top of your Facebook App ID putting.
• Now, back to the keyboard by pressing Ctrl+F (Windows) or CMD+F (Mac) ]]></ b:skin>tag and the search for codes ]]></ b:skin> tags, paste it at the top.

.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}

• Now, again to the keyboard by pressing Ctrl+F (Windows) or CMD+F (Mac) 
• <b:include data='post' name='post'/> tag reads and paste the following codes under this tag.

<b:if cond='data:blog.pageType == &quot;item&quot;'>  <div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>   <img class='comments-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC3G9MAyjP1groUl9HVNf0MHgPEaYNyNE11Y3auqj3d9f6BI7mdZ8ZLQzB5JwEizGoZ8UlN89n7I26nKoM96vfluYqwcYhedywcLp7u1ffODPjEqHfNFeemyBUCzj9EXQDGnY0abEUF_ay/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:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>  <img class='comments-tab-icon' src='http://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'>

• Now, Save Template

Blogger blog and the Facebook comment system together is the easiest way to share with you. No part of the problem, or if you have difficulty understanding someone who may comment. I'll try my best to solve your problems.

• Tweet
• Share
• Share
• Share
• Share