Pages

Tuesday, 12 January 2016

Add Facebook Comments Box To Blogger Blogs - New method!

UPDATES: 

1. If you wish to completely hide the blogger comments form then read Replace Blogger comments form With Facebook

2. Show both Facebook and Blogger Comments inside Tabs! 

In 2009 Facebook developers introduced their best social plugin called "Facebook Comments Box". This plugin can be embedded in any website or blog and visitors can use their IDs of Facebook, Yahoo, AOL or Hotmail to leave a comment at your site. This plugin did show a lot of problems when it was embedded in Blogger Blogs in initial days of its development but now thanks to our fellow friend Max from Allblogtools this plugin has been finally bloggerized to work just perfect with any Blogger hosted blogs. I have edited Max's coding in some areas and have mentioned some more interesting options that will help you use the Facebook comments box in parallel to your old Blogger Comment form so that you may loose no previous comments and provide users with multiple options of commenting from different platforms.


Interesting? Lets now learn how to embed this extremely useful comment form in Blogspot blogs. Kindly follow the simple steps below,

1- Get a Facebook Application ID

  1. Go To Facebook Developers Page
  2. Submit your blog URL and give it a name. Keep Site name as your "Blog Title" and Site URL as your "blog address"
site-url
     3.   Hit "create app" button and proceed
     4.   After submitting the security check code you will see this page,
app-id
       5.   Save that App ID in a notepad because we will need that latter. Now Click the link near the top-right corner of the same page that says "Developer Dashboard"
image
      6.  One the new window that appears click the Edit Settings link ,
edit-settings
        7.  Then go to Website option and write your Site Domain as blogspot
website
       8.  Save Changes and jump to the next step of this tutorial

2- Adding the Facebook comments Box to Blogger

Now its time to do embed the comments box in your blog templates. So follow these easy steps,
PS: Please make sure your blogger comment form is embedded below posts. For doing this first go to Blogger > Settings > comments > and then choose embed comments below posts. After doing this follow the tutorial below.
  1. Go To Blogger > Design > Edit HTML
  2. Backup your template
  3. Check the "Expand Widget Templates" box
  4. Search for <html and just after it give a space and add this code,
xmlns:fb='http://www.facebook.com/2008/fbml'
  5.  Next search for 
<body>
Note: In New Blogger Designed templates the same code looks like this,
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
Find any one of these codes and just after it paste the code given below,
<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>


  • Replace YOUR_APP_ID with your Facebook application ID that you saved in a notepad.
    6.    Next search for  </head> and just above it paste the following code,
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='ipostforu' property='og:site_name'/>
<meta content='BLOG-LOGO-IMAGE-LINK' property='og:image'/>
<meta content='YOUR_APP_ID ' property='fb:app_id'/>
<meta content='http://www.facebook.com/ipostforu' property='fb:admins'/>
<meta content='article' property='og:type'/>


Make these changes:
  • Replace ipostforu with your blog title/Name.
  • Replace BLOG-LOGO-IMAGE-LINK with the image link of your logo. Your logo will look good if it is in gif format and having this size ->  40px by 40px . This logo will appear next to your post title on Facebook profiles of your visitors like this,
logo
  • Replace YOUR_APP_ID  with the your Facebook Application ID that you saved in notepad
  • Replace http://www.facebook.com/ipostforu with your Facebook user profile link
    7.    Now Search for this,
<b:includable id='comment-form' var='post'>
    8.    Just after it paste the code given below,
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='padding:0px 0px 0px 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='520'/></div>
<div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:510px;'>Facebook Blogger Plugin: Bloggerized by <b><a alt='blogger templates' href='http://www.allblogtools.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='blogger templates'>AllBlogTools.com</a></b> Enhanced by <b><a alt='blogger widgets' href='http://www.mybloggertricks.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>MyBloggerTricks.com</a></b></div></div>
</b:if>
  • If you want to use the dark scheme then simply replace light with dark
  • To change the Comments box size, change this value width='520'
  • To change the footer credits size, change this value width:510px
  • Keep a difference of 10 pixels between the box size and footer size. For example if you set box-size to width='600' then set footer-size to width:590px
      9. Save your template and Bingo you are Done! See your blogs to find a beautiful comment box waiting to be touched. =)

4 comments:

  1. Blogging is incredible and every blogger playing a great role to introduce new things in blogging. I always like to fly on different blogs and read the strategies of different blogger to understand the blogging in more depth. Being a bloggers I really appreciate your works and no doubt your blog is awesome.
    Love from Asad Niazi

    ReplyDelete
    Replies

    1. =======================================
      81a11b298Here are best materials for you!
      David Smith April 1, 2018 at 10:36 PM
      25 SECRETS TO CAPTIVATE ANY MAN:
      This is one of top secrets that help you get any girl to like you.
      Rated 4.7* by 5600+ students.
      Link: 25 secrets to captivate any man



      John Smith Mar 23, 2018 at 8:36 PM
      14 SECRETS TO BECOME MILLIONAIRE ONLINE IN ONE YEAR
      This is one of best online course about how to become millionaire online.
      It is difficult to become a millionaire, so perhaps this course is only rated 4.4*.
      Source: How to become millionaire online in one year




      Jennifer Lee Mar 21, 2018 at 7:36 PM
      LEARN FREE HOW TO MAKE MONEY ONLINE BY AFFILIATE MARKETING
      This is a free course by Affilorama, the leading internet marketing academy, rated 4.7 * by 87k+ students.
      source: Free training affiliate marketing online




      Juan Carlos Mar 27, 2018 at 8:36 PM
      20 SECRETS TO GET ANY GIRL TO LIKE YOU
      This is one of top secrets that help you get any girl to like you.
      Rated 4.7* by 5600+ students.
      Link: 20 secrets to get any girl to like you





      Mike Jones Mar 29, 2018 at 9:36 PM
      LEARN FREE PIANO ONLINE:
      This course is organized by LearnPianoIn30Days. This site offer 14 days free training for only $1.
      More details: $1 Trial to learn piano in 14 days







      Emma Emily April 2, 2018 at 10:36 PM
      LEARN FREE GUITAR ONLINE:
      This course is organized by Play Worship Guitar. This site offer 21 days free training for only $1.
      More details: Trial 1$ learn guitar online in 21 days




      Peter Ho April 3, 2018 at 14:36 PM
      21 SECRETS TO BECOME FAMOUS MAGICIAN?
      This is best course online about how to become a magician!
      This training course offer free trial and 60 days money back guarantee
      Link: Trial to Learn Mentalism Effects and Magic Tricks




      Jennifer Tran April 3, 2018 at 19:36 PM
      HOW TO LOSE 1 POUND OF BELLY FAT EVERY 72 HOURS?
      yes it can. Bruce Krahn and Dr. Heinrick created this program specifically for men and woman.
      The core of the program is a formula by Heinrick that is supposed to work well against belly fat and its associated health issues
      Here are link: Link: Secrets to lose 1 pound of belly fat every 72 hours




      Brittany Jones April 3, 2018 at 19:36 PM
      HOW TO SELF-DEFENSE WITHOUT ANY MARTIAL ARTS TRAINING?
      yes it can. Real self-defense system, designed By Swat Team Leader, even without any martial arts training.
      Here are link: Link: 16 secrets for self-defense without any martial arts training




      Penny Albritton April 3, 2018 at 19:36 PM
      GET YOUR SEXIESTBODY EVER BY YOGA?
      Here are link: Link: 18 secrets to get your sexiest body ever by yoga

      Delete
  2. How do you seize the mind of the Facebook users? The idea of this post is to make you conscious of the essential Facebook marketing strategies and tools that you need to effectively produce leads and control.
    buy facebook post shares

    ReplyDelete