Integrate Facebook, Disqus and Blogger Comment Together on Blogspot Blog.
Before proceeding you must have to have disqus and Facebook App Id. See Below Tutorial to get your on Facebook App id and Disqus Account.
Now i had assumed that you had your own disqus account username and Facebook App Id, So Now lets start the tutorial.
Step 1: Login in blogger Account. And select Your Blog.
Step 2: Backup Your Blogger Blog. (Learn how to backup Blogger Blog)
Step 3: Navigate Blogger Dashboard > Go to Template > Edit HTML.
Step 4: Find Following Code by pressing CTRL + F.
</head>
Step 5: Just Above </head> tag paste below code.
<script src="http://code.jquery.com/jquery-latest.pack.js">
<script src='http://tipsviablogging.github.io/tvbcommentstyle.js'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
Note:
Replace eblog with with your own personal facebook username.
replce 1212xxxxx123 with your own facebook App Id.
Step 6: Now search for below code.
<div class='comments' id='comments'>
Note:If you find multiple code than paste below code under each
<div class='comments' id='comments'>
code
Step 7:Use Below Integrated Facbook, disqus and blogger tab generator, Copy and Paste Generated Code Just After
<div class='comments' id='comments'>
code.
Step 8: Now we need to add disqus script to show no. of comment on button for it, find below code.
</body>
Step 9: Paste Following code just above </body> tag.
<script type='text/javascript'>
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'Disqus-Site-Name'; // required: replace example with your forum shortname
/* * * DON'T EDIT BELOW THIS LINE * * */
(function () {
var s = document.createElement('script'); s.async = true;
s.type = 'text/javascript';
s.src = '//' + disqus_shortname + '.disqus.com/count.js';
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
}());
</script>>
Replace Disqus-Site-Name with your own disqus site username.
Step 10: Save Your Template, that set.
0 comments: