Posted By Max On Saturday, November 28th, 2009 In   Blogger Tricks and Hacks

A lot of my friends and visitors asked my about how to add share on facebook button in blogger (blogspot),
And this question repeated many times specially after I posted a tutorial about How To Add Retweet Button To Blogger (Blogspot ).
Today we’ll learn how to do it in a very easy way.

This is the official facebook sharing button and here are it’s features.

• 2 Styles. Button Or Link
• With / without Counter.

Go to this page click here,
And make your button ( customize it ). there are some easy options and you can check the preview button to see your button.
See the following image to see the button different styles.

After Finish you button customization, please copy your button code and go to the next step.

Log into your blogger account, and go to Layout >> Edit Html.
Before doing any thing you must check Expand Widget Templates box.
And find the next Code

<div class='post-header-line-1'/>

And after it, paste your button code we made the button it in step 1

What, If you didn’t find the code above in your template, The try to find the following,

<data:post.body/>

And paste the button code Before it.

That’s It.

click here to see demo.
please share and follow me if you found this tutorial useful for you.

• 19 responses so far!
•      loxodon ( 7:45 PM on 11/28/09 )

  thanks, very useful !

•      Beben ( 3:40 AM on 11/29/09 )

  sippp…Max…

•      Ehtesham ( 1:47 PM on 11/29/09 )

  This is awesome!!!

•      imitrex ( 2:45 PM on 12/1/09 )

  works for me

•      Lout de Chevalier ( 9:37 AM on 12/8/09 )

  Thanks very useful trick

•      Zaky ( 11:29 PM on 12/13/09 )

  Thank….

•      taufiq ( 8:50 PM on 12/22/09 )

  terima kasih buat infonya!

•      Max ( 5:34 PM on 12/25/09 )

  Thanks all for your nice comments.

•      alex ( 12:45 AM on 1/2/10 )

  thanks for sharing such useful information, it really worked for me.

•      peter ( 12:49 AM on 1/2/10 )

  the tips really helpt, thanks

•      Max ( 7:24 PM on 1/2/10 )

  @ Alex and peter, i’m glad you likes it.

•      Jeremy ( 12:34 AM on 1/21/10 )

  I tried adding a Retweet and Facebook Share button today but the Facebook Share was placed on the right side of the Retweet button instead of below. How do I move it below so you have all the buttons vertically aligned?

•      Eky Dakka ( 9:32 AM on 1/21/10 )

  Hi, I am a newbie, is it works for wordpress blog?

•      jeff ( 10:36 AM on 1/23/10 )

  Thanks, it looks very well

•      Max ( 4:21 PM on 1/24/10 )

  @ Jeremy what you need to do is to enter the next code between buttons codes,

  </br>

  @ Eky Dakkasure you can, but you have to know some info about codding to be able to edit your wordpress theme.

  @ jeffthanks jeff.

•      rajaganapathi ( 1:02 PM on 1/28/10 )

  i had added this to by blog after my posts shown 2 times first normal then facebook button
  and post now i had deleted.. please solve this problem.. thank you..

•      Anup ( 5:41 AM on 2/6/10 )

  Hey! Max I have added your linked widget on my blog…It’s looking good. Don’t forget to see it

•      GRITTOMON THOMAS ( 12:29 PM on 2/6/10 )

  Itz really helpfull…….thxxxxxxxxx

•      codruta ( 11:01 AM on 2/7/10 )

  I put both buttons, Retweet and Facebook and between them the code , as you said to Jeremy, but it shows me an error message “The element type “div” must be terminated by the matching end-tag”

  what can i do?
  thanks