How To Add A Facebook Like Button On Blogger


   This is a short tutorial on how I managed to add a Facebook Like Button to all my posts. All codes can be found in the Facebook Developers website (Link Button Code). We will be using the codes for XFBML format. Just add the highlighted codes on your blogsite and that's it :)

  1st: Go to Template -> Edit HTML -> click Proceed -> click "Expand Widget Templates"

  2nd: Add xmlns:fb='http://ogp.me/ns/fb#' to the <html> tag of your blogsite.

  Like this (there would be existing xmlns on your blogsite's <html> tag just add the one for fb at the end):

  <html b:version='2' class='v2' expr:dir='data:blog.languageDirection'
    xmlns='http://www.w3.org/1999/xhtml'
    xmlns:b='http://www.google.com/2005/gml/b'
    xmlns:data='http://www.google.com/2005/gml/data'
   xmlns:expr='http://www.google.com/2005/gml/expr' 
   xmlns:fb='http://ogp.me/ns/fb#' >

   3rd: Insert the following code after the <body> tag of your blogsite:

  <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> <-- the body tag on my site

  <!-- fb like button -->
  <div id='fb-root'/>
 <script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
  fjs.parentNode.insertBefore(js, fjs);
 }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>
<!-- end fb like button -->

   4th: Insert the following code after the <div class='post-footer'> tag of your blogsite:

<div class='post-footer'>  <-- div class on my site
<!-- fb like button -->
<fb:like expr:href='data:post.url' send='false' show_faces='true' width='450'/>
<!-- end fb like button-->

  If you can't see the <div class='post-footer'>, make sure you have checked "Expand Widget Templates".

  Save the template and you're done :) Refer to the Facebook Developers website (Link Button Code)
if you want to change the appearance of the Link button. Just change the correct codes :)

 UPDATE - 26-Oct-2014:

  With my new blog template I'm now using the HTML5 implementation of the Facebook Like button.

   1. Go to Template -> Edit HTML -> click Proceed -> click "Expand Widget Templates"

   2. Add the following code just before the </body> tag of your HTML:

      <div id='fb-root'/>
      <script>
      //<![CDATA[
        (function(d, s, id) {
         var js, fjs = d.getElementsByTagName(s)[0];
         if (d.getElementById(id)) return;
         js = d.createElement(s); js.id = id;
         js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
        fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
     //]]>
   </script>

    3. Add the next code after <div class='post-footer'> :
 
    <div class='fb-like' data-action='like' data-layout='standard' data-share='true' data-show-faces='true' expr:data-href='data:post.url'/>

    That's it, you will now have the Facebook Like button on your page.
 

3 comments

  1. Alonso CotaJanuary 8, 2012 at 4:06 PM

    Thanks for the tutorial!! :D
    nice blog!! :D i like it n,n
    I started a blog with my girlfriend, and i hope you can check it, and if you like it can follow us!c:
    Have a nice day!!!


    http://august19th.blogspot.com/
    http://august19th.blogspot.com/
    http://august19th.blogspot.com/
    http://august19th.blogspot.com/
    http://august19th.blogspot.com/

    ReplyDelete
  2. AnonymousJanuary 26, 2013 at 3:40 AM

    Awesome! Its really awesome piece of writing, I have got much clear idea on the topic of from
    this article.
    Look into my web blog ; free facebook like

    ReplyDelete
  3. AnonymousFebruary 22, 2013 at 12:19 AM

    This piece of writing is genuinely a pleasant one it assists new the web viewers,
    who are wishing for blogging.

    My blog: avoir plus de vues sur youtube

    ReplyDelete