Add Facebook Like and Send Button To Blogger Blogs

Yesterday while chatting with a friend of mine, I have discovered that even today, some blogs lack this social plugin. When I questioned him why he answered me that he didn’t know how to add it. So I promised to write a tutorial for him. Recently Facebook has combined both its like and send buttons into a single plugin, making it more easy for webmasters to add both the buttons with a single three lines code. Furthermore, this code also has an easy option to easily remove the send button by a little editing. Now let’s learn to add this beautiful plugin to blogger.

Add The Plugin To Blogger

It depends on where you would like to add the plugin. If you want to add it as a widget to the sidebar, footer, etc then follow the tutorial below,
  1. Go To Blogger > Layout > Add a Gadget
  2. Select HTML/javascript
  3. Now add the following code,
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/
all.js#xfbml=1"></script><fb:like href="" send="true" layout=
"button_count" width="450" show_faces="false" font=""></fb:like>
  • If you wish to hide the send button then set replace send=”true” with send=”false“.

6.  Hit save and you are done!

If you want to add the plugin below or above your posts, then follow the tutorial below,

  1. Go To Blogger > Template > Edit HTML
  2. Backup your template
  3. Check   
  4. Search for <data:post.body/>
  5. If you wish to add the plugin below the post titles then add this code above <data:post.body/> and if you wish to add the plugin at the end of your posts then add this code below <data:post.body/>.
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.
js#xfbml=1"></script><fb:like href="" send="true" layout="button_count" 
width="450" show_faces="false" font=""></fb:like>
  • If you wish to hide the send button then set replace send=”true” with send=”false“.
    6.  Hit save and you are done!

Troubleshooting

If in case this plugin isn’t working then add the following code right below the <body> tag,

<div id="fb-root"></div>
<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 = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

I have written this post in a great hurry so if any mistakes are there, then please ignore. If you are facing any problem in the installation or need help customizing the plugin, then please do not hesitate to ask. 🙂

 

Leave a Reply

Your email address will not be published. Required fields are marked *