Display Facebook comments on your blog and let Facebook users comment
on your blog without signing up for Blogger or other services.
To add Comment box linked with facebook looks like below follow given steps
1. First you need to create a Facebook App for your blog. In order to do this go to https://developers.facebook.com/apps
15. Click "Close"
16. Enjoy!
To add Comment box linked with facebook looks like below follow given steps
1. First you need to create a Facebook App for your blog. In order to do this go to https://developers.facebook.com/apps
2. In the top right of your screen click on the "+ Create New App" button as shown in the screen shot below:
3. You will be presented with the screen below in which you need to choose:
4. You will then be asked to pass the "captcha" test.
5 . You will see the page displayed below;
- Make a note of your App ID or copy it
- Where is says "App Domain" enter "blogspot.com". (If you host your blog on your own domain name then enter your domain name here)
- In the "Website" section where it says "Site URL" enter the address of your blog e.g. "http://modernhackerss.blogspot.in/"
- Click "Save Changes"
6. After saving the changes to your Facebook app, you will see a confirmation message in a yellow box at the top of the webpage.
7. Change the code below by replacing FACEBOOK-APP-ID with your Facebook App ID number which you copied at step 5.
<meta content="FACEBOOK-APP-ID" property="fb:app_id" />So my modified code looks like this:
<meta content="341696982607815" property="fb:app_id" />
8. Go to your blog dashboard on Blogger.com; Select "Template" then click on "Edit HTML"
9. You will then see the code in your template. Try to locate the <head> tag as shown in the screen below:
10. Just below the <head> tag paste your modified code from step 7. Here is how my code looked like after this change:
11. Now find <div class='post-footer-line post-footer-line-3'>
11. Now find <div class='post-footer-line post-footer-line-3'>
if its not found then find <data:post.body/>
12. Paste the code below immediately after the tag you found at step 15(or 15.a xor 15.b)
<b:if cond='data:blog.pageType == "item"'> <div id="fb-root"></div> <script>(function(d){ var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; d.getElementsByTagName('head')[0].appendChild(js); }(document));</script> <fb:comments width='450' colorscheme='light' expr:title='data:post.title' expr:href='data:post.canonicalUrl' expr:xid='data:post.id'/> </b:if>
So the resulting code would look like this:
Optional: To change the width of your comment box in the code above change width="450" to whatever you see suitable for your blog.
Optional: To change the color scheme of your comment box you can change the word "light" to "dark" for the attribute colorscheme='light' which gives you the two coloring schemes available for Facebook comment boxes.
13. You now need to add the Facebook Namespace declaration in your code. If you go the top of your code you will see a tag as <html as shown below:
You need to add the code below right after the <html tag
xmlns:fb="https://www.facebook.com/2008/fbml"
So it would look like this instead:
<html xmlns:fb="https://www.facebook.com/2008/fbml"Here is a screen shot of the code after the change:
Note: The namespace added in the code above is used for all Facebook
widgets and apps. So you only need to add this into your code once,
regardless of how many different FBML widgets you use.
14. Click "Save Template"
16. Enjoy!
0 comments:
Post a Comment