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.

By Max

I'm Max, The founder and the admin of AllBlogTools.com I'm a very big van of blogging ,design and coding, I think that i'll die next to my computer.

No related posts found

• 62 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

•      Max ( 9:07 AM on 2/12/10 )

  @ Anup, GRITTOMON THOMAS thanks for your kind comments.

  @ codruta please send me the code that you use in your blog. all of it.

  @ rajaganapathi this is a template problem, please remove the codes and add it all over again, if you still meet the same problem, please try to change your template.

•      Lauralee ( 2:12 PM on 2/22/10 )

  Thanks, thanks, and more thanks!

•      irvin ( 12:32 AM on 3/13/10 )

  umm.. how to make it appear inline with article title?

•      Jaydeep ( 2:44 AM on 3/16/10 )

  I added the facebook button but when I open my blog the facebook share number don’t display, but when I click on share then only it shows the number.

•      gryphon14 ( 12:48 PM on 3/27/10 )

  Why does the counter didn’t show up in my button? Any idea? Please mail me

•      Mischo ( 4:19 AM on 4/9/10 )

  yeah! i have same question than irvin: please, how to make it appear inline with article title?

•      Max ( 10:15 AM on 4/12/10 )

  @ Mischo, please add the button code after the follwoing part in your template,

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

  @ previous comments, please not that this problem some times happening here on allblogtools.com too. this is too wired and i’ll look for a solution for this soon.

•      David @ Malaysia Asia ( 9:32 AM on 4/15/10 )

  Very useful tips, thanks very much.

•      Aurna shields ( 1:22 AM on 4/25/10 )

  h ow to make fb share for post url custom

•      Max ( 1:56 PM on 4/26/10 )

  you can do it from the same page. or by the same way, you don’t need to change any thing.

•      Sumanth ( 7:29 AM on 4/28/10 )

  Thanks for sharing…very useful for my blog..

•      Charles ( 9:27 AM on 4/30/10 )

  I have two Blogger blogs using different template, and neither one has or anywhere in it. Anyone else have this problem?

•      Charles ( 9:28 AM on 4/30/10 )

  The post didn’t take my code, but what I meant to say was that the template doesn’t have either of those code lines that you say to insert the counter before or after.

•      Charles ( 9:30 AM on 4/30/10 )

  Never mind, I found my problem.

•      Max ( 5:21 PM on 4/30/10 )

  hi charles, did you checked ” expand template widgets box ” before searching for the code, your template must have it.

•      Max ( 5:22 PM on 4/30/10 )

  hi charles, can you please tell us what was the solution.

•      lynn cherry ( 5:16 PM on 5/4/10 )

  Whoa…that was so easy…but every blog post has the count 11…odd?

•      Ikenna ( 3:00 AM on 5/10/10 )

  I added the widget and it works perfectly, but it appears in line with my blogpost. I want it instead above the post. Help!

•      he ( 2:13 PM on 5/14/10 )

  great article appreciate all the help…quick question: i added the facebook and twitter share buttons but how do i customize them so that it is for each individual post not for the main site?
  thanks

•      citydl ( 1:29 PM on 5/15/10 )

  great trick

•      Kay ( 5:25 AM on 5/17/10 )

  How can I replace the facebook share icon offered by the site to the one I prefer?
  many thanks~

•      Stella Seaspirit ( 10:39 AM on 5/25/10 )

  Thanks! This was so easy to do, just one question, what can I type to get the button at the bottom of my post instead of just below the title?

•      Tatiana ( 5:54 PM on 5/26/10 )

  worked like a charm, but why did it automatically have the number 16? Does it know that I shared on my facebook before…weird?

•      brandy ( 2:58 AM on 5/30/10 )

  Thanks you! Was easy!

•      melaleuca malaysia ( 1:29 AM on 6/2/10 )

  Very simple steps! thanks for sharing!

•      arnold ( 4:58 PM on 6/2/10 )

  i couldn’t find the code to replace in my template. Please help!! and if you know how to add a ‘like’ button with the ‘share’ button it’d be really cool if you could tell me ! THanks

•      Max ( 7:42 AM on 6/3/10 )

  hi arnold, you don’t have to replace any codes, you just have to paste your code after one of the above codes,
  to find it you must check expand template widgets box.

•      Max ( 8:03 AM on 6/3/10 )

  hi he, this will be mentioned in my next tutorials, i wish you can wait.

•      arnold ( 8:52 AM on 6/3/10 )

  hey there max! thnks so much for your quick reply. now the problem is i wanna put the share button with digg, tweet, & buzz like you have on your page posts! but aligned on the right side !! if it’s a lot to ask, please thank you anyways & i totally understand ! take care friend

•      Russell ( 9:06 AM on 6/3/10 )

  I added this no problem. But all of my blog posts started with a 24 in the counter. And every new blog post starts with 24 in the counter. Shouldn’t the counter only count when that specific button is pushed?

•      Russell ( 9:08 AM on 6/3/10 )

  Oh, and no matter which share button I push, it always points to the same old post. It doesn’t share the post that I pushed the button for.

•      jaganmangat ( 9:19 AM on 6/3/10 )

  that was a simple trick and it works gr8…

•      Max ( 10:48 AM on 6/3/10 )

  hi kay, this needs another tutorial , and i wish i can cover it really soon.

•      Max ( 11:18 AM on 6/3/10 )

  hi tatiana, yes, if your post was shared before you add the button, the button will count it.

•      Max ( 1:29 PM on 6/3/10 )

  hi stella,
  just paste the button code after the following code,

  <data:post.body/>

•      bilquer ( 11:03 AM on 6/5/10 )

  Yes, that’s useful staff.But people keep sharing fun vidoes or useless things.They should be interested in kinda this subjects!

•      Max ( 5:54 PM on 6/5/10 )

  ya bilquer, i agree with you, but some time we just have to have some fun.

•      Okkz ( 5:40 PM on 6/8/10 )

  Hello, thx for this article. However, i have some problems integrating the share button correctly.
  I did as you said, and when i click the share button, it only displays my blog’s title, its main address and its description but not the article’s title and its adresse !!

  How can i fix this ?

  Thanks !

•      NOMAD ( 10:49 AM on 6/14/10 )

  It’s work~
  Thanks A lot!

•      sally ( 1:32 PM on 6/15/10 )

  THIS IS FAB! Thank you! ur a life saver!!!

•      toheed ( 11:40 PM on 6/21/10 )

  thank u very much dear! its very useful for me.

•      DebatableFlair ( 1:32 PM on 7/29/10 )

  I am having the same problems as Jeremy. Ive inserted both retweet and facebook share. The later appears under the former. Tried inserting the code and merely getting the message : Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
  XML error message: The element type “b:includable” must be terminated by the matching end-tag “”.

•      calai ( 6:41 AM on 8/2/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?