{"id":9,"date":"2015-11-03T08:23:00","date_gmt":"2015-11-03T08:23:00","guid":{"rendered":"http:\/\/www.heerentanna.com\/2013\/07\/03\/how-to-use-blogger-disqus-and-facebook-comment-tab-together-on-blogger-blog\/"},"modified":"2022-12-19T14:56:37","modified_gmt":"2022-12-19T09:26:37","slug":"facebook-disqus-tab-in-blogger","status":"publish","type":"post","link":"https:\/\/www.heerentanna.com\/blog\/facebook-disqus-tab-in-blogger.html","title":{"rendered":"How to Use Blogger, Disqus and Facebook Comment tab Together on Blogger blog?"},"content":{"rendered":"<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.heerentanna.com\/blog\/wp-content\/uploads\/2013\/07\/Untitled-1+copy.png\" alt=\"\" width=\"640\" height=\"228\" border=\"0\" \/><\/figure>\nThere is a debatable topic on selecting <a href=\"https:\/\/www.heerentanna.com\/blog\/multiple-comment-system-blogspot.html\">comment box for blogger<\/a> blog, there are numbers of comment platform available on for blogger user like <a href=\"https:\/\/www.heerentanna.com\/blog\/How-To-Change-Blogger-Comment-Box-To-Disques-Comment-Box.html\" target=\"_blank\" rel=\"noopener noreferrer\">Disqus<\/a>, <a href=\"https:\/\/www.heerentanna.com\/blog\/setup-facebook-comment-for-blogger.html\" target=\"_blank\" rel=\"noopener noreferrer\">Facebook<\/a>, Livefyre, and so on. There is a positive and negative points of individual comment platform, If we want to gain the all advantages of each comment system than we have to add multiple comment system in our blogger blog. Today i am here bring the plugins that will helps you to integrate major comment like blogger, facebook and Disqus. I had visited one WordPress based blog which having all three integrated <a href=\"https:\/\/www.heerentanna.com\/blog\/multiple-comment-system-blogspot.html\">comment system<\/a>, based on that idea i had develop this plugins i hope you will enjoy this.\n<h2 style=\"text-align: left;\">Integrate Facebook, Disqus and Blogger Comment Together on Blogspot Blog.<\/h2>\n<h2 id=\"Demo\"><strong><a href=\"https:\/\/www.heerentanna.com\/blog\/facebook-disqus-tab-in-blogger.html\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Demo<\/a><\/strong><\/h2>\nBefore proceeding you must have to have disqus and Facebook App Id. See Below Tutorial to get your on Facebook App id and Disqus Account.\n<ul style=\"text-align: left;\">\n \t<li><a href=\"https:\/\/www.heerentanna.com\/blog\/How-To-Change-Blogger-Comment-Box-To-Disques-Comment-Box.html\" target=\"_blank\" rel=\"noopener noreferrer\">How To Change Blogger Comment Box To Disqus Comment Box?<\/a>\u00a0( Use this link only to Just Create Website User Account Don&#8217;t Install It.)<\/li>\n \t<li><a href=\"https:\/\/www.heerentanna.com\/blog\/setup-facebook-comment-for-blogger.html\" target=\"_blank\" rel=\"noopener noreferrer\">Add Facebook Comment Box to Blogspot Blogs.<\/a>\u00a0( Follow First Phase Only )<\/li>\n<\/ul>\nNow i had assumed that you had your own disqus account username and Facebook App Id, So Now lets start the tutorial.\n\n<b>Step 1:<\/b> Login in blogger Account. And select Your Blog.\n<b>\n<\/b> <b>Step 2:<\/b> Backup Your Blogger Blog. (Learn how to backup Blogger Blog)\n<b>\n<\/b> <b>Step 3:<\/b> Navigate Blogger Dashboard &gt; Go to Template &gt; Edit HTML.\n<b>\n<\/b> <b>Step 4:<\/b> Find Following Code by pressing CTRL\u00a0+ F.\n<blockquote class=\"tr_bq\"><code>&lt;\/head&gt;<\/code><\/blockquote>\n<b>\n<\/b> <b>Step 5:<\/b> Just Above <code>&lt;\/head&gt;<\/code> tag paste below code.\n<blockquote class=\"tr_bq\"><code>&lt;meta content='<span style=\"background-color: #93c47d;\">heerentanna<\/span>' property='fb:admins'\/&gt;\n&lt;meta content='<span style=\"background-color: #93c47d;\">3840756250xxxxx<\/span>' property='fb:app_id'\/&gt;\n&lt;script src='http:\/\/code.jquery.com\/jquery-latest.pack.js'\/&gt;\n&lt;script src='https:\/\/tipsviablogging.github.io\/tvbcommentstyle.js'\/&gt;\n&lt;script src='http:\/\/connect.facebook.net\/en_US\/all.js#xfbml=1'\/&gt;<\/code><\/blockquote>\n<b>Note:<\/b>\nReplace <span style=\"background-color: #f6d5d9;\"><b>heerentanna\u00a0<\/b><\/span>with with your own personal facebook username.\nreplce 3840756250xxxxx with your own facebook App Id.\n<b>\nStep 6:<\/b> Now search for below code.\n<div class=\"code\" style=\"background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; line-height: 18px;\">\n<blockquote class=\"tr_bq\"><code>&lt;div class='comments' id='comments'&gt;<\/code><\/blockquote>\n<\/div>\n<b>Note:<\/b>If you find multiple code than paste below code under each &#8220;<code>&lt;div class='comments' id='comments'&gt;<\/code>&#8221; code\n\nStep 7:\n\n<!-- \/wp:post-content -->\n\n<!-- wp:paragraph -->\n\n<b><\/b> Use Below Integrated Facbook, disqus and blogger tab generator, Copy and Paste Generated Code Just After &lt;div class=&#8217;comments&#8217; id=&#8217;comments&#8217;&gt;\u00a0code.\n<iframe loading=\"lazy\" src=\"https:\/\/tipsviablogging.github.io\/integrated-Blogger-Disqus-and-Facebook-Comment-tab-Generator.html\" width=\"100%\" height=\"608\" frameborder=\"0\" scrolling=\"no\"><\/iframe>\n<b>Step 8:<\/b>\u00a0Now we need to add disqus script to show no. of comment on button for it, find below code.\n\n<!-- \/wp:paragraph -->\n\n<!-- wp:quote -->\n<blockquote class=\"wp-block-quote\"><!-- wp:paragraph -->\n\n<code>&lt;\/body&gt;<\/code>\n\n<!-- \/wp:paragraph --><\/blockquote>\n<!-- \/wp:quote -->\n\n<!-- wp:paragraph -->\n\n<b>Step 9:<\/b> Paste Following code just above &lt;\/body&gt; tag.\n\n<!-- \/wp:paragraph -->\n\n<!-- wp:quote -->\n<blockquote class=\"wp-block-quote\"><!-- wp:paragraph -->\n\n<code>&lt;script type='text\/javascript'&gt;\n\/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * *\/\nvar disqus_shortname = &amp;#39;<span style=\"background-color: #93c47d;\">Disqus-Site-Name<\/span>&amp;#39;; \/\/ required: replace example with your forum shortname\n\/* * * DON&amp;#39;T EDIT BELOW THIS LINE * * *\/\n(function () {\nvar s = document.createElement(&amp;#39;script&amp;#39;); s.async = true;\ns.type = &amp;#39;text\/javascript&amp;#39;;\ns.src = &amp;#39;\/\/&amp;#39; + disqus_shortname + &amp;#39;.disqus.com\/count.js&amp;#39;;\n(document.getElementsByTagName(&amp;#39;HEAD&amp;#39;)[0] || document.getElementsByTagName(&amp;#39;BODY&amp;#39;)[0]).appendChild(s);\n}());\n&lt;\/script&gt;<\/code>\n\n<!-- \/wp:paragraph --><\/blockquote>\n<!-- \/wp:quote -->\n\n<!-- wp:paragraph -->\n\nReplace Green Highlighted <b>Disqus-Site-Name<\/b>\u00a0with your own disqus site username.\n\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n\n<b>Step 10:<\/b> Save Your Template, that set.\n\n<!-- \/wp:paragraph -->\n\n<!-- wp:html -->\n<div style=\"border: 1px solid #f6701d;\"><span style=\"color: #cc0000;\">Note: <\/span>If you find any trouble regarding appearance of 3 comment box, kindly change the comment setting as per instruction. Go to Setting &gt; Post and Comment &gt; In field of comment location select option &#8220;<b>Embedded<\/b> or <b>Full Page<\/b>&#8221; and check it respectively..<\/div>\n<!-- \/wp:html -->\n\n<!-- wp:heading {\"level\":4,\"align\":\"left\"} -->\n<h4>Credit link:<\/h4>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n\nWe have added a Credit attribution link is this gadget, Please it a humble request you all to do not remove it. No doubt, it is completely free for you all but, we also need your corporation to spread this widget to other who need it so please support us.\n\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"level\":4} -->\n<h4>Final Words<\/h4>\n<!-- \/wp:heading -->\n\n<!-- wp:html -->\nHere in this widget i had used &#8220;onclick&#8221; events to disqus comment, it means disqus comment will \u00a0load only when visitors click on disqus button. So as to it will not take unnecessary loading time. By adding Multiple comment system widget in blogger blog , Visitors have more space to share their thoughts, view, suggestions or query due to multiple logins facilities available to them. Share your point of view should we add multiple comment box to blogger blog or not?\n<!-- \/wp:html -->","protected":false},"excerpt":{"rendered":"There is a debatable topic on selecting comment box for blogger blog, there are numbers of comment platform&hellip;","protected":false},"author":1,"featured_media":14899,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"csco_display_header_overlay":false,"csco_singular_sidebar":"default","csco_page_header_type":"default","footnotes":""},"categories":[5,3],"tags":[],"class_list":{"0":"post-9","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-blogging-tips","8":"category-widget-generator","9":"cs-entry"},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.heerentanna.com\/blog\/wp-json\/wp\/v2\/posts\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.heerentanna.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.heerentanna.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.heerentanna.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.heerentanna.com\/blog\/wp-json\/wp\/v2\/comments?post=9"}],"version-history":[{"count":0,"href":"https:\/\/www.heerentanna.com\/blog\/wp-json\/wp\/v2\/posts\/9\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.heerentanna.com\/blog\/wp-json\/wp\/v2\/media\/14899"}],"wp:attachment":[{"href":"https:\/\/www.heerentanna.com\/blog\/wp-json\/wp\/v2\/media?parent=9"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.heerentanna.com\/blog\/wp-json\/wp\/v2\/categories?post=9"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.heerentanna.com\/blog\/wp-json\/wp\/v2\/tags?post=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}