Friends here is Tutorial That Display Facebook comments on your blog and let Facebook users comment on your blog without signing up for Blogger or other services.
To integrate Face-book Comments on your blog, you need to have a Face-book account and a Blogger account with a blog.
so friends here we go with step by step
1. First you need to create a Facebook App for your blog. In order to do this go through this link 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. Now You will be presented with the screen below where you need to choose:
- A name for your app which can be anything you like; I have chosen "Imsubhublogspot"
- A namespace for your app this can be anything you like as well but it must be in all lower case letters without any spaces. I have chosen "imsudipsubhu". Don't worry about what these attributes do, but just know that they are necessary for any Facebook App.
- Do NOT tick the web hosting option. This is not necessary for our comment application.
Once you have entered all the details click "Continue"
4. You will then be asked to pass the "captcha" test ,Enter the correct letters or numbers the click "Submit".
If you have not setup your Facebook account with a mobile phone number you will see the message below.
If you don't see the message (that means you have already setup your account with a mobile telephone you will be able to attempt Next task 5. )
5. So Friends you will see the page, from that page :
- 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://imsubhu.blogspot.com/"
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.
Now your Facebook App is ready. Just make a copy of the App ID as you will need this number when integrating the Facebook comment application into your blog.
7. Change the code below by replacing FACEBOOK-APP-ID with your Facebook App ID number which you copied at step 5.
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="203832293077633" property="fb:app_id" />8. Go to your blog dashboard on Blogger.com; Select "Template" then click on "Edit HTML" as highlighted in the screenshot below:
9. You will receive a popup with a few options. Click on the "Proceed" button as shown below:
10. You will then see the code in your template. Try to locate the <head> tag.
11. Just below the <head> tag paste your modified code from step 7. Here is
how my code looked like after this change:
how my code looked like after this change:
12. Click "Save Template"
13. Now you need to add some more code to your template (this is the actual
code for the Facebook comment section below your blog posts). Go to you blogger dashboard for your blog then select "Template" > "Edit HTML" > "Proceed" to view your HTML code (i.e. follow steps 8 and 9)
13. Now you need to add some more code to your template (this is the actual
code for the Facebook comment section below your blog posts). Go to you blogger dashboard for your blog then select "Template" > "Edit HTML" > "Proceed" to view your HTML code (i.e. follow steps 8 and 9)
14. Tick the "Expand Widget Templates" checkbox .
15.
Find the code below in your template code using Ctrl+F shortcut and
paste the code into the search box. Warning: Do NOT try to type the
text below as your web browser could freeze.
15.a) Depending on the blogger template that you are using it is possible that the above search fails. In that case search for this tag:
<div class='post-footer-line post-footer-line-3'>
15.a) Depending on the blogger template that you are using it is possible that the above search fails. In that case search for this tag:
<p class='post-footer-line post-footer-line-3'>
15.b) if the search at step 15.a failed then search for the following tag:
<data:post.body/>
16. Paste the code below immediately after the tag you found at step 15(or 15.a or 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:
17. 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.
18. Click "Save Template"
19. Click "Close"20.So Friends lets enjoy Your New Facebook Comments on Your Blog.
Hope this will help You. copyright@imsubhu
