Thursday, August 09, 2012

How to Add Facebook Like and Send Button to Your Blog and Posts

I have been extremely lazy for ...ummm... all my life? Anyway, there are a lot of tutorials on the Internet about how to add the Facebook Like and Send or just Like button to your blog. The tutorial  below is my attempt at it.



I am finally writing this post because I didn't get my headphone to work so, I have nothing to stop me from falling asleep.




Facebook Button in "Light" Background.


How to Add Like and Send Button to Your Blog Posts?

Description: Use this code if you want a Like and Send button for each post and page on your blog. This means suppose you have written  two blog posts, each will have a different facebook like counter.

 <script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/><fb:like action='like' colorscheme='light' expr:href='data:post.url' font='' layout='standard' send='true' show_faces='false' width='450'/>

This code will keep a track of how many times each post on your blog has been liked. Clicking on send will attach that post to your Facebook message and you can send it across to your friends.


How to Add Like And Send Button to Your Blog?

Description: When you use this code, a like and send button will be displayed on your blog and it will show the total number of likes your blog has received. (The difference between this and the previous code is that this code will not keep a track of the individual likes on your blog posts.)


<div class="fb-like" data-href="http://www.write_the_name_of_your_blog_here.com/" data-send="true" data-width="450" data-show-faces="false" data-font="arial"></div>

Facebook Like and Send Button in Dark Background:

If your blog uses blacks and grays or you just don't prefer the buttons in a light background; you can use the code below for getting Like and Send button in dark background:

Facebook Buttons in a Dark background.
Like and Send Buttons for Individual Posts: (This will act the same as the first code mentioned above)

 <script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/><fb:like action='like' colorscheme='dark' expr:href='data:post.url' font='' layout='standard' send='true' show_faces='false' width='450'/>

Like and Send Button For Your Blog: (This will work same as the second code mentioned above)

<div class="fb-like" data-href="http://www.Write_the_name_of_your_site_here.com" data-send="true" data-width="450" data-show-faces="true" data-colorscheme="dark"></div>

**Please make sure that the name of your site is written exactly like it is and there are no spaces. Eg- http://x-x-x.blogspot.com or http://www.x-x-x.com

Where Should I Paste This Code?

* If you want the button to be displayed on all the posts:


  1. Download your template(just in case something goes wrong).
  2. Dashboard>>Template>> Edit HTML>> Proceed. 
  3. Check the "Expand Widget Template" box.
  4. Find  <data:post.body/>
  5. Paste the Facebook Like and Send code written above  the <data:post.body/> tag.
  6. Save the edits.


*If you want to display the like button only at one place:

  1. Dashboard>>Layout>> Add a Gadget.
  2. Add the HTML/Java Script Box.
  3. Copy and paste the Facebook like and send  code.
  4. Place the gadget where you would like to display the Like Button.


Would you prefer if I wrote a post only about adding the "Like Button" and no send button?


P.S.-Yes, these codes work because I use the same and if you want, you can click on the "Like" and see for yourself!