A brief walkthrough on the process of creating facebook comment box on blogs.
Copy the highlighted part in your blogger template.
Note: It should be ONLY ONE. Don't do it if u have already done it before!
Instruction2:
Now copy the highlighted part just below the <body> tag .. find it by searching (Ctrl+F) the term "<body "
Copy/Paste the code from below! (highlighted blue+green)
green part is my own fb app called 'Commenterata'
<div id='fb-root'/>
<script>
//<![CDATA[
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=573472319372353";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
Instruction3:
Optionally, you can add a recommendations bar too by pasting the highlighted text given below. You have to paste it just below the code given at the previous instruction.
<div calss='fb-recommendations-bar' data-href='https://getlostproblems.blogspot.com' data-readtime='30' />
Now,
Instruction5:
Keep scrolling down until your reach 'Html/Javascript' title. Click on
Instruction6:
Finally, add the code below here:
<div class="fb-comments" data-href="http://getlostproblems.blogspot.com" data-width="650" data-num-posts="10"></div>
Instead of following Instruction4 and onwards; You can just follow the first 3 instructions, then when you create posts, select 'HTML' near the 'COMPOSE' tab. Then add the code given at Instruction6 at the end of your HTML codes.
Important Note: After you paste this code, NEVER EVER save or select preview the page before publishing the page because fb registers a URL only once. If it is found offline on the first try, it wont be live and working later.
Copy the highlighted part in your blogger template.
Note: It should be ONLY ONE. Don't do it if u have already done it before!
Instruction1:
On the html tag that looks like this:
<html b:version='2' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://ogp.me/ns/fb#'>
Just paste the part highlighted in blue to the code that looks like the one above in your blog's template.
Now copy the highlighted part just below the <body> tag .. find it by searching (Ctrl+F) the term "<body "
blue part is the structure code. Some sites may give slightly different
alterations but this one is 100% compatible for all cases tested so far!green part is my own fb app called 'Commenterata'
<div id='fb-root'/>
<script>
//<![CDATA[
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=573472319372353";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
Instruction3:
Optionally, you can add a recommendations bar too by pasting the highlighted text given below. You have to paste it just below the code given at the previous instruction.
<div calss='fb-recommendations-bar' data-href='https://getlostproblems.blogspot.com' data-readtime='30' />
Now,
- replace https://getlostproblems.blogspot.com with your own website.
- replace 30 with your desired time in seconds. This is a delay limit. If the user stays in your page for 30 seconds, facebook will automatically recommend some other pages to read. See a live example at this page.
Instruction4:
Now on your dashboard, go to Layout and select "Add a Gadget"
Keep scrolling down until your reach 'Html/Javascript' title. Click on
Instruction6:
Finally, add the code below here:
<div class="fb-comments" data-href="http://getlostproblems.blogspot.com" data-width="650" data-num-posts="10"></div>
Now,
- replace http://getlostproblems.blogspot.com with the page URL where ou want the comments to appear.
- To make the comment box active on THIS page that you are currently reading,
I replaced the given URL with http://www.glpnepal.blogspot.com/2013/12/createFBcmntBox.html - replace 650 with the width of the desired comment box. Recommended to be much less than the width of the page.
- replace 10 with number of comments you want to display at once.
EXTRA NOTES:
FEEDBACK
Think something is still missing in this post? Tell us your problem/opinion. We'll fix it right away!
Leave your comment
Post a Comment
You don't need ANY account or registration to comment here. Please drop your comments below to improve the quality of our posts. You can also give us suggestions and ask us about your problems.