How to add Facebook Like button to Website / blog?

Facebook like button on blogs and websites allows people to tell their Facebook network about your website or blog posts. When people click this like button (integrated with your blog posts), Facebook puts your blog post URL on their profile quoting that they like your blog post. The screen shot below demonstrates how it works.

This post will tell you how to add Facebook like button to Website or blog the easy way.

Easily add Facebook like button to website / Blog?

Facebook officially provides a plugin to generate like button for your website, and you can grab the button code and put it on your website or blog. Visit Facebook Like button Plugin and grab your like button code. I’m also giving the Facebook Like button code in this post with a little bit of advance usage for websites and certain blogging platforms, you can directly copy and paste this code according to your need and get it start working for you straight away.

Before proceeding, make sure you created a back-up of your blog or site template.

Facebook Like button for Website (Static Websites)

Edit your Website in HTML mode and place one of the following codes you prefer in there:

Facebook Like button for WordPress – iFrame version

<iframe src="//www.facebook.com/plugins/like.php?href=&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=21&amp;" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>

Facebook Like button for WordPress – HTML5 version

<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>
<div class="fb-like" data-send="false" data-width="450" data-show-faces="true"></div>

Facebook Like button for Website – XFBML version

<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>
<fb:like send="false" width="450" show_faces="true"></fb:like>

Save the changes.

Facebook Like button for WordPress

Go to your theme directory and open single.php in editing mode. Put the below given code just * above / below <?php the_content(); ?>:

Facebook Like button for WordPress – iFrame version

<iframe src="//www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=21&amp;" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>

Facebook Like button for WordPress – HTML5 version

<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>
<div class="fb-like" data-href="<?php the_permalink(); ?>" data-send="false" data-width="450" data-show-faces="true"></div>

Facebook Like button for WordPress – XFBML version

<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>
<fb:like href="<?php the_permalink(); ?>" send="false" width="450" show_faces="true"></fb:like>

Hit “Update File” button.

Facebook Like button for Blogger

Log in to you Blogger account and go to Blogger Dashboard » Design » Edit HTML. Find <data:post.body />, paste the following code * above / below it:

Facebook Like button for Blogger – iFrame version

<b:if cond='data:blog.pageType == "item"'>
<iframe src="//www.facebook.com/plugins/like.php?href=+data:post.url+&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=21&amp;" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>
</b:if>

Facebook Like button for Blogger – HTML5 version

<b:if cond='data:blog.pageType == "item"'>
<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>
<div class="fb-like" data-href="+data:post.url+" data-send="false" data-width="450" data-show-faces="true"></div>
</b:if>

Facebook Like button for Blogger – XFBML version

<b:if cond='data:blog.pageType == "item"'>
<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>
<fb:like href="+data:post.url+" send="false" width="450" show_faces="true"></fb:like>
</b:if>

Save Template.

Pinterest Pin it button for Tumblr

Go to your Tumblr Dashboard » Edit » HTML. Find {blocks:Posts} and paste the following code * above / below it:

Facebook Like button for Tumblr – iFrame version

<b:if cond='data:blog.pageType == "item"'>
<iframe src="//www.facebook.com/plugins/like.php?href={Permalink}&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=21&amp;" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>
</b:if>

Facebook Like button for Tumblr – HTML5 version

<b:if cond='data:blog.pageType == "item"'>
<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>
<div class="fb-like" data-href="{Permalink}" data-send="false" data-width="450" data-show-faces="true"></div>
</b:if>

Facebook Like button for Tumblr – XFBML version

<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>
<fb:like href="{Permalink}" send="false" width="450" show_faces="true"></fb:like>

Click Update.

Customizing Facebook Like button

You can alter following values to customize your Facebook Like button:

Parameter	Values
send= or data-send=	Set true / false to show / hide Facebook Send button along with the like button, default value is true
layout= or data-layout=	Set button_count for button view, box_count for big box view, default value is standard which shows a phrase “be the first to like…” or “200 people like this…”
width= or data-width=	Set 450 if you’re going with layout=box_count / data-layout=box_count or send=true / date-send=true for big box view, default value is 450.
show_faces= or data_show_faces=	Set true to show faces of the people who pressed the like button, default value is true
colorscheme= or data_colorscheme=	Set dark for the dark theme, default value is light
font= or data_font=	It’s default value is arial, but you can customize it to verdana, tahoma, lucida grande, Nsegoi ui, trebuchet ms for a different font style.
action= or data_action=	It corresponds to the verb displaying on your Facebook like button. It’s default value is like, you may also use recommend to change the like button to Recommend button.

* above / below: Wherever you want to make it appear either above the post or at the footer of the post.

Quick Tip: Use Ctrl + F or Command + F to find the code in your browser.

Also add Facebook Send button, Facebook Share button, Twitter tweet button, and Digg button to your website or blog, if you haven’t added them yet.

Also see Educational Social Media Graphics and join TechAbly at Facebook.