Display Facebook comments on your blog and let Facebook users comment on your blog without signing up for Blogger or other services.
This tutorial assumes that you have a Facebook account and a Blogger account with a blog.
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:
- A name for your app which can be anything you like; I have chosen "JT Blog Comments"
- 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. 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. i.e. type in the letters in the image in order for Facebook to verify that you are a human and not a spamming computer program. Enter the correct letters or numbers the click "
Submit".
4.a) 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 below skip to step 5 (that means you have already setup your account with a mobile telephone). For those of you - such as myself - who come across this message, click on the link in the red box which says "mobile phone".
4.b) You will then see the screen below;
- Select your country
- Enter your mobile phone number
- Then click the "Confirm" button
4.c) You will be taken to the page below and at the same time receive a text message(SMS) on your mobile phone.
Enter the code from the SMS you received on your mobile phone in the box and click "
Confirm"
4.d) You will then see a success message as shown below stating that your account has been verified. Close this page and go back to where you left off when you came across the popup at step (4.a).
4.e) Follow instructions in step 3 again.
4.f) Follow only the first part of step 4 which is only entering the skewed text displayed in the image. Then jump to step 5.
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://bloggerpost3.blogspot.com"
- 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.
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.
<meta content="FACEBOOK-APP-ID" property="fb:app_id" />
So my modified code looks like this:
<meta content="336995009681830" 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 as shown in the screen below:
11. Just below the <head> tag paste your modified code from step 7. Here is 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)
Update 21/04/2013: Since 11th of April 2013 step 14 is no longer necessary. This check-box has been removed and instead each widget can be expanded using an arrow to the left of it. Also there is a drop down menu at the top of the editor which allows you to select the widget that you want to scroll to in one click.
14. Tick the "
Expand Widget Templates" checkbox as shown below:
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.
<div class='post-footer-line post-footer-line-3'>
The screenshot below shows how it would look:
If you were able to find the tag that you searched for jump to step 16.
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 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.
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. Enjoy!
Moderating comments, Administration options and housekeeping
Visit this URL
http://developers.facebook.com/tools/comments in order to view all the posted comments on your blog. This is the screen you will see:
If you click the "
Settings" link on the above page you will be presented with a few options that are self explanatory such as adding Moderators for your blog or allowing users with different logins to leave comments(e.g. Yahoo or Hotmail logins). Here is a screenshot of the settings page:
Removing Blogger Comments
Although I would not recommend to anyone that they remove blogger's default commenting feature, if you choose to do so you can easily hide or show it from your blogs dashboard by going to
- Settings
- Posts and comments
- Comment Location then select "Hide"
- Make sure to click "Save Settings"
If the screenshots are too small to read, you can click on them to enlarge them.
If you run into any problems, let me know in the comments' sectio.
UPDATE (17/01/2013)
Adding a Facebook Comment Section For Stand Alone Pages on Blogger
If you have a stand alone page then the above procedure for adding Facebook comments will not work as the above approach only applies for blog posts and not "pages". So in order to obtain the Facebook comment section on stand alone pages you need to follow the steps below in addition to the above steps. (Note that the steps below need to be repeated for every single page whereas the above guide which only includes blog posts will cover all your blog posts. Note 2; blog posts and blog pages are two different things)
1. Go to your page then select "Edit" as shown in the screen shot below:
2. Once you go through to the edit page, look at the URL in the address bar at the top of your browser. You will see an address similar to this:
http://www.blogger.com/blogger.g?blogID=363170316363135703#editor/target=page;pageID=1979633926023450196
3. Make a note of the last number from the URL address. (This will be unique to your own page so don't copy the number I have shown here.) In my example the number is 1979633926023450196.
4. Click on the "HTML" tab as shown on the screen shot below:
5. Now you will see the HTML code behind your page. Go to the bottom of this code and "Cope & Paste" the following text:
<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 colorscheme="light" href="http://bloggerpost3.blogspot.com/p/jenson.html" title="Blog" width="450" xid="1979633926023450196"></fb:comments>
6. The above code is an example used for one my blog pages so you have to change
3 parts that are highlighted (in red) in the above code to suit your own blog page.
6.a. The URL of your blog page. (In my example it's http://bloggerpost3.blogspot.com/p/jenson.html)
6.b. The title of your page. (In my example it's Blog)
6.c. The page id of your page. This is the number that you made note of in step 3. (In my example it's 1979633926023450196)
7. After you have entered the code in your page it should look like the below screen shot so just press update and your page should be ready for facebook comments.
If the screenshots are too small to read, you can click on them to enlarge them.
If you run into any problems, let me know in the Facebook comments' section ;)
.png)
Posts
