Facebook comment form is very powerful tool to increase the time a visitor spends on your site or blog. With the lovely "Love" logo and the inscribed sentence "We love Comments" added to it, it becomes very hard for a reader to finish reading a post without wanting to comment. This comment form from facebook have a feature that allow you receive a notification upon comment by any reader that visits and comment on your post. With this facebook comment form, you can be certain of your communication with your blog readers.I want you to follow me through the following steps
STEP 1: Visit Facebook developer page .
You may be asked to verify your account, choose any of the verification options to complete the verification.
Afterwards you will see a small form, enter your blog name (You can type any name or blog tittle).
Then, enter your blog url with an ending slash in Site URL (for instance:www.kutufam.com/)
Click on Create application.
Make sure you put the "/" sign at the end of your blog url as indicated in the picture below.
When you are successful, you should see a page displaying your application infomation. Copy the APP ID as indicated in the picture below and save it in a notepad.
STEP 2: Login to you Blogger dashboard and click on Layout/design; Edit HTMLand tick the small "Expand Widget Templates" box. Using "CTRL+F", search for the code <body> OR <body expr:class='"loading" + data:blog.mobileClass'> and paste the code highlighted below directly under it and save the template.
Replace the APPID in the code above with your APP ID provided from Facebook which you copied in Step 1 and save the template.
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=141084445958514&xfbml=1"></script>
After adding the code, your code should now look like:
STEP 3: Still in Design/Layout > Edit HTML and tick the small "Expand Widget Templates" box. Using "CTRL+F", search for the code <data:post.body/> and paste the "comment form code" highlighted below directly under <data:post.body/> and save the template.
<b:if cond='data:blog.pageType == "item"'>
<p align='left'><a href='http://www.ogbongeblog.com'><img alt='' class='icon-action' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkk7zfP-SKdiashGKNxDGr9UAvry2x4ujxrWygcTnU193Tt6XJOPuJ6_ffL22jrUJdiBxKegBRk2ZkX6wIeWQApoNOqb3ntOuOEUtpF1x2h53mGr9VIsdE8wiPp29LyXsvcWaQ5tW2bKk/s320/commentpix.png'/></a></p>
<fb:comments expr:href='data:post.url' numposts='10' width='500'/>
</b:if>
You can adjust the WIDTH to any size you want (@ 500 ok ).
SAVE your template and view one of the POSTS on your blog. You should see the comment form with your picture embed, if your are on facebook.
NOTE
Change my URL in the above code(www.kutufam.com) to yours, else if a visitor clicks on, it will go to my blog homepage
That's all. SAVE your template and view your blog.
How about the Notifications?
You must add some codes to your blog HTML so you can be receiving facebook notifications and also to be able to moderate the comments.
Login to you Blogger dashboard and to Layout /design; Edit HTML and tick the small "Expand Widget Templates" box. Using "CTRL+F", search for the code <b:skin><![CDATA[/
Directly above it, copy and paste the code below.
<meta content='100000926733256' property='fb:admins'/>
<meta content='222138191171956' property='fb:app_id'/>
How do I get my Facebook Profile ID?
STEP 1: Visit Facebook developer page .
You may be asked to verify your account, choose any of the verification options to complete the verification.
Afterwards you will see a small form, enter your blog name (You can type any name or blog tittle).
Then, enter your blog url with an ending slash in Site URL (for instance:www.kutufam.com/)
Click on Create application.
Make sure you put the "/" sign at the end of your blog url as indicated in the picture below.
STEP 2: Login to you Blogger dashboard and click on Layout/design; Edit HTMLand tick the small "Expand Widget Templates" box. Using "CTRL+F", search for the code <body> OR <body expr:class='"loading" + data:blog.mobileClass'> and paste the code highlighted below directly under it and save the template.
Replace the APPID in the code above with your APP ID provided from Facebook which you copied in Step 1 and save the template.
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=141084445958514&xfbml=1"></script>
After adding the code, your code should now look like:
STEP 3: Still in Design/Layout > Edit HTML and tick the small "Expand Widget Templates" box. Using "CTRL+F", search for the code
<b:if cond='data:blog.pageType == "item"'>
<p align='left'><a href='http://www.ogbongeblog.com'><img alt='' class='icon-action' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkk7zfP-SKdiashGKNxDGr9UAvry2x4ujxrWygcTnU193Tt6XJOPuJ6_ffL22jrUJdiBxKegBRk2ZkX6wIeWQApoNOqb3ntOuOEUtpF1x2h53mGr9VIsdE8wiPp29LyXsvcWaQ5tW2bKk/s320/commentpix.png'/></a></p>
<fb:comments expr:href='data:post.url' numposts='10' width='500'/>
</b:if>
You can adjust the WIDTH to any size you want (@ 500 ok ).
NOTE
Change my URL in the above code(www.kutufam.com) to yours, else if a visitor clicks on, it will go to my blog homepage
That's all. SAVE your template and view your blog.
How about the Notifications?
You must add some codes to your blog HTML so you can be receiving facebook notifications and also to be able to moderate the comments.
Login to you Blogger dashboard and to Layout /design; Edit HTML and tick the small "Expand Widget Templates" box. Using "CTRL+F", search for the code <b:skin><![CDATA[/
<meta content='100000926733256' property='fb:admins'/>
<meta content='222138191171956' property='fb:app_id'/>
You will have to change the two numbers highlighted in red and yellow in the code above.
Replace the222138191171956 in the code above with your appID which you copied in Step (1) earlier on in this tutorial and replace the100000926733256 with your Facebook Profile ID.
Replace the222138191171956 in the code above with your appID which you copied in Step (1) earlier on in this tutorial and replace the100000926733256 with your Facebook Profile ID.
How do I get my Facebook Profile ID?
Login to Facebook, right click on your profile picture..
Choose copy link location and paste in a notepad, so you will see something like http://www.facebook.com/album.php?profile=1&id=100000926733256.
The 100000926733256 is the id.
SAVE your template.
What about the default comment form by Blogger?
The default comment form could to be deleted or leave it, I recommended that you leave it because some readers may may like to use both, so you have two ways of getting replies about a post. Contacts
What about the default comment form by Blogger?
The default comment form could to be deleted or leave it, I recommended that you leave it because some readers may may like to use both, so you have two ways of getting replies about a post. Contacts
Thanks for sharing this information.
ReplyDeleteThank u, do visit this blog regularly u will get what u want
ReplyDeleteHey there! Do you know if tthey make any plugins to protect against hackers?
ReplyDeleteI'm kinda paranoid about losing everything I've worked hard on.
Any recommendations?
My blog; adobe photoshop cs6 crack
Yes there is a plugin which protect you from hackers
DeleteThanks for showing me the way.
ReplyDeleteYou are welcomed do visit regularly
ReplyDeleteI am actually thankful to the owner of this website who has shared this fantastic information most Informative article. You explain everything in deeply and easiest language.
ReplyDelete