Thursday, June 6, 2013

Insert Facebook Like Button In Every Blogger Post

Hi friends, In this post we will learn how to insert Facebook like button in every Google Blogger Blog posts at the beginning and at the end. Social networks have been playing an important role in Blogging for driving traffic. Facebook is one the most liked social network among all the Internet users. Facebook enables you to create a Fan page and share your content on it. When a person like your facebook fanpage, he/she subscribe to your content on Facebook. He / She will be getting updates from your fan page about your Blog and they will visit you. Indeed it is an important source of referral traffic. We all know the importance of traffic for Rankings.
insert Facebook like button in Blogger posts



Wordpress has many built-in plug-in that enables this feature easily. But Google Blogger users have to do this manually by editing their blog's template. It is not a difficult task and if you know a little bit of HTML/XML then it takes a few minutes. You need to follow these steps in order to make it happen:


  • First of all, I recommend you to take backup of your current template so that you can avoid any loss.
  • For backup, go to your Blogger dashboard. Click on template and then Backup/Restore on top-right side. Click on download full template and save it to your computer.
  • Now that you have taken the back up, it is time to choose a Facebook button. VisitFacebook Developers page, it will show like the one below:

customize facebook like button

  • Enter the Facebook page URL and customize your like button style.
  • If you don’t want the send button to appear with the like button, uncheck the send button from above form.
  • When you are done with the customization, you need to click on get code. It would pop-up a window like this one:

Facebook like button code

  • Now copy the code shown above, it is the JavaScript code you need to put in the <body></body> tag. Press CTRL+F to find <body> and paste this code just below it.
Update: Those who are unable to find the body tag like <body>, they should try to find it like this <body
  • Now copy the second code, if you want to put Facebook like button at the end of every post you need to find this code first <data:post.body/>, if it is more than once try finding the last one.
  • Just after the last <data:post.body/> put the code you copied from Facebook developer page.
  • Click on preview and make sure that everything is fine before saving.
  • Now click on Save Template and view any post. You will find Facebook like at the end of every post.
  • If you want to put the like button in the beginning of every post you need to follow the same procedure but put the second code after this line
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'> instead of <data:post.body/>. You can use both of them as well for displaying it in the beginning and ending of your Article.


You just inserted Facebook like button in your blogger blog posts. If you face any problem, you can comment here. 

No comments:

Post a Comment