Close Menu
My SiteMy Site
  • Home
  • Reviews
  • Computers
  • How Tos
  • Travel & Lifestyle
  • Phone ROMs
  • Contact
    • Advertise
    • About Us
Facebook X (Twitter) Instagram
My SiteMy Site
  • Home
  • Reviews
  • Computers
  • How Tos
  • Travel & Lifestyle
  • Phone ROMs
  • Contact
    • Advertise
    • About Us
My SiteMy Site
Home»Blogging»How to Add Facebook Comments Box form to Blogger Blogs
Blogging

How to Add Facebook Comments Box form to Blogger Blogs

Oscar FrankBy Oscar Frank3 Mins Read
Share
Facebook Twitter LinkedIn WhatsApp Pinterest Email

The Facebook comment form is one of the recent blogging resources facebook has developed for bloggers, and it helps the bloggers in getting most comments and more social media exposure.

This Facebook comment plugin looks simple, cool and it allows users to comment on your blog by logging into Facebook, thus giving more traffic and exposure since there comments with links to your blog would be posted on their walls.

Simply follow this guide to add this to your blog.

1. Login to facebook, then go to Facebook developers page to create a new app.

2. Now create a new app with your blog details as Your Blog Name for App Name and Your Blog Title for AppNameSpace, then click on continue.

3. Now after it’s been created, note down your APP ID.

4. Now go to your blogger dashboard –> template –> Edit Html (Tick expand widget template option).

5. search(Ctrl+F) for <html  and replace it with the following code.


<html xmlns:fb='http://www.facebook.com/2008/fbml'

6. Find For <body> tag and add the following code just after it.


<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : &#39;YOUR_APP_ID&#39;,
status : true, // check login status
cookie : true, // enable cookies to allow the server to
access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement(&#39;script&#39;);
e.src = document.location.protocol + &#39;//connect
.facebook.net/en_US/all.js&#39;;
e.async = true;
document.getElementById(&#39;fb-root&#39;).
appendChild(e);
}());
</script>

7. Now search for </head> and add these open graph meta tags just above it.


<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='Oscar Mini' property='og:site_name'/>
<meta content='YOUR_BLOG_LOGO_IMAGE_LINK' property='og:image'/>
<meta content='YOUR_APP_ID ' property='fb:app_id'/>
<meta content='http://www.facebook.com/oscarmini' property='fb:admins'/>
<meta content='article' property='og:type'/>

Note::

  • Replace Oscar Mini with your blog name.
  • Replace YOUR_BLOG_LOGO_IMAGE_LINK with your blog logo image url.
  • Replace YOUR_APP_ID with your app id.
  • Replace http://www.facebook.com/oscarmini with your Facebook page url.

8. Now search for <data:post.body/>, then directly below it, copy and paste the code below


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='padding:20px 0px 5px 0px; margin:0px 0px 0px 0px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div> <fb:comments colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='550'/></div>
<div style='color:#fff; background-color:#bbb;border: solid 1px #ddd; font-size:10px; padding:3px; width:550px;'><a href='http://oscarmini.com/how-to-add-facebook-comments-box-form-to-blogger-blogs' target='_blank'><b>Wanna get this to your blog? Clik Here</b></a></div></div>
</b:if>

If your template has more than one <data:post.body/>, paste the above code below each seperately, save and view your blog till you get the one that works for you

9. Save your Template and View your Blog.

10. And you are done.

You’ve successfully added a facebook comment box plugin to your blogger blog with my 10 steps. SImply hit the share buttons to show your appreciation

blogger Blogger tips blogging programming Social Media

Related Posts

TikTok Faces Unexpected Ban in Senegal, Sparks Global Curiosity

August 11, 2023

Triller Takes on TikTok: Filing for Public Listing

August 4, 2023

TikTok E-commerce: what happens to the existing TikTok shops?

July 26, 2023
View 2 Comments

2 Comments

  1. JP on March 15, 2013 7:08 am

    Hey, great post and it really helped me get the facebook comments working on my blog. I wanted to get some SEO out of it but the iframe issues (search engines won’t crawl iframes) made this impossible and, of course, the only way I could find to pull the text of the comments was through php scripts (which blogger doesn’t support). Soooo, i wrote a php script and threw it on my server and then called it as an object on my blogger template and viola! – it worked.

    In kind, I thought I’d share it with you and maybe add a little value to your already great post. Just paste this code in your blogger template above or below the commenting code and it should be good to go. If you want to view the results temporarily change the opening div tag to just <div> and refresh the page(s) to see how Facebook feeds the text. Hope this helps some of you!

    One more note, the php script grabs the referring URL(of wherever you’ve put the html script) so it should work for any and all posts/pages dynamically (including canonical URLs) – I thought that was a nice touch 😉

    <!– BEGIN Graph API comment pull and text insertion in an invisible div for SEO purposes –>

    <div class='separator' style='clear: both; display: none; text-align: center;'><object data='http://sukithookahs.com/get_comment_text.php&#039; height='60px' type='text/html' width='450px'>

    </object></div>

    <!– END Graph API comment pull and text insertion in an invisible div for SEO purposes –>

    A final note, I AM NOT a programmer so this isn’t the prettiest thing in the world, but it works great…

    Reply
    • Oscar Frank on March 16, 2013 7:15 am

      That was Awesome. Thanks for finding time to share your findings with us. You Rock Dude.

      Reply
Leave A Reply Cancel Reply

Recent Posts
  • 6 Sports Apps You Must Have On Your Phone
  • Valencia Travel Guide: All You Need to Know About This Spanish Gem
  • TikTok Faces Unexpected Ban in Senegal, Sparks Global Curiosity
  • The Apple GPT & Apple’s Chatbot Mysterious Debut
  • Triller Takes on TikTok: Filing for Public Listing
Get Exclusive Tech Insights!
My Site
Facebook X (Twitter) Instagram YouTube
© 2025 Oscarmini Co. Designed by illBytes.

Type above and press Enter to search. Press Esc to cancel.