Add Facebook share button with counter

This tutorial will show you how to add a Facebook share button to each blog post in a Blogger blog. The button comes with a counter (optional) that shows a live count of how many times a post has been shared -a way to gauge the post popularity.

This button lets people share the containing post without leaving your blog. It will detect the correct post URL regardless of the type of page you are at -be it home page, individual/post page or any other page.

facebook share counter

Now let us proceed,

  1. Go to Template > Edit HTML > Proceed.
  2. Back up your template.
  3. Tick the  Expand Widget Templates checkbox on top right corner of the template HTML window.
  4. Find the following code in your HTML, this is the code for your post content:
  5. Paste the Facebook button code immediately below (after) it:
    <!-- Facebook share button Start -->
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <div style='float:left;padding:5px 5px 5px 0;'>
    <a expr:share_url='data:post.url' href='' name='fb_share' type='box_count'>Share</a><script src='' type='text/javascript'></script>
    <!-- Facebook share button End -->

    Update: [July 2010] Add conditional tag to prevent button from appearing on static pages.

  6. Configure button

    Choose the type of button by replacing the value of  type attribute (in line 4) with the corresponding code below.

    FB button Code
    fb share box count box_count
    Share button count button_count
    facebook share button button
    facebook share icon icon

    Note: The counter will only show up after the count reaches 3.
  7. Button repositioning
    The steps above positioned the button on bottom left of each post. You can change the positioning if you like:
    • Position it on top of post
      Insert the button code before (instead of after) <data:post.body/>.
    • Position it on the right
      Change the float in line 3 from left to right.
  8. Displaying button on static pages
    • To also display the button in static pages, remove the conditional tag -code line 2 and 6.
  9. Preview, you should see the button appear at the end each post.
  10. If you like what you see then click Save.


P.S. Having trouble with Facebook picking up wrong description for your shared links? Go to Facebook share showing wrong description –solved! to fix it.

129 comments to "Add Facebook share button with counter"

joeknows May 30, 2010 at 8:33 PM    

thanks very simple and easy

Greenlava May 30, 2010 at 11:40 PM    

You're welcome. Just test-shared your Pagani Zonda post -ok.

Nick May 31, 2010 at 9:46 AM    

good info

John May 31, 2010 at 10:29 AM    

thank you. used it at

PumpkinButtKitty June 1, 2010 at 9:52 PM    

Thank you! Went very smoothly, just like all the great instructions you give us do!
Have a wonderful week!

Greenlava June 2, 2010 at 11:42 AM    

My pleasure

CezarB. June 6, 2010 at 5:48 AM    

Thanks mate!

Library News June 22, 2010 at 11:55 AM    

hi thanks for your help so far, but I have noticed when i share something on FB from my blog it picks up a bit of text from the sidebar which I would prefer it didn't, is it possible to pick what information is shown.

Greenlava June 22, 2010 at 2:22 PM    

@Library News
I'm afraid you don't have any control on what being picked up. But you can opt to remove or replace the text by clicking on it (in the share window).

hybrid roots July 15, 2010 at 12:19 AM    

Hi, do you know how to add this to emails? Specifically the Share counter button? I'm trying to add it but the code has javascript which I'm assuming I can't use for emails/newsletters?

Any help is appreciated.


Greenlava July 15, 2010 at 11:38 AM    

@hybrid roots
No button, just the link. Add this code in your email:

for example:

BioGal July 16, 2010 at 7:01 PM    

Is there any way of placing the button along side the other one I have (your tweetmeme-and-counter one)? On my blog it has placed it below, making my posts extra long...


Greenlava July 16, 2010 at 8:51 PM    

I've just noticed you placed the buttons directly in your posts. That's why you're having issues with the button alignment.
Okay here's what you do,
First, put float:left back into both buttons.
Second, insert a line break [br/] (replace "[" with "<" and "]" with ">") before the first button.

BioGal July 16, 2010 at 9:13 PM    

Okay, thanks. I didn't have any square brackets [ or ] in the code, so I couldn't replace them. So I tried putting the code (after replacing float:left; twice) directly after the bit that looked like it was about the post footer < d i v c l a s s = ' p o s t - f o o t e r ' >

and it worked!

I may have learned something important about computers today, but since I can't be sure I did the right thing, I don't think it counts! :)

Thanks for your help - it looks a bit mucky - pushing the labels, etc. to the right, but it'll do!

Thanks again.

Lan July 18, 2010 at 5:57 PM    

Hi! I have a question.

I used this fb counter on my blogsite at together with the retweet button with counter. The retweet button is showing the bubble up even if the counter is on "0", however with facebook, it is not showing counter at all, just the share button.

Can you please help me.

I would really appreciate it.



Greenlava July 18, 2010 at 9:22 PM    

The count shows up when it reaches 3.

Van Dog August 8, 2010 at 12:57 AM    

Great! Finally found a way to use exactly what I want, where I want. Thank you!

Greenlava August 8, 2010 at 1:53 AM    

@Van Dog
I'm glad your quest ended here.

opie @ tok wie August 15, 2010 at 6:37 PM    

tq².. likes it.. ^_^

Greenlava August 15, 2010 at 7:21 PM    

@opie @ tok wie
Thanks...and do come again :)

GC August 18, 2010 at 2:52 AM    

Hi! I have an issue with this button and I'm hoping you have the answer!

I added a share button to my site ( however instead of sharing posts it shares the whole blog. What am I missing?

Thanks for your help!!

Greenlava August 18, 2010 at 8:19 AM    

Your code is missing this attribute:
please copy the code in full.

GC August 18, 2010 at 10:46 AM    

Thank you for the quick reply. I've added in the missing bit of code but now instead of sharing the post it is sharing the comments made on the do resolve this?

Thank you!!

Greenlava August 19, 2010 at 8:43 AM    

That's weird...and I have no idea why. Anyway it does share the correct url (your post url), albeit with a wrong snippet.

Khairi August 22, 2010 at 4:08 PM    

Hi GL,

I use this on my blog The button shows no number (eventhough the post shared few times) but it only shows them when I click the button (to share). Do you face this?

Greenlava August 22, 2010 at 4:52 PM    

See reply 16.

atif August 30, 2010 at 10:47 PM    

I want to share my posts on my facebook page.Not in FB profile.plz guide me how.

Greenlava August 31, 2010 at 8:28 AM    

You can't change the button to do that. Import your posts into Facebook page instead.

dr angel September 16, 2010 at 1:36 AM    

THanks alot.....

Bidoluhayat September 24, 2010 at 6:54 PM    

thank you so much, this is my 5th attempt, I tried some other solutions from other web sites. But this one was what I have been looking for. Thanks again...

Greenlava September 24, 2010 at 7:18 PM    

@dr angel
You're welcome.

Happy to hear that :)

Anonymous,  October 1, 2010 at 1:04 PM    

like the other have said before me, thank you so much! Everything worked a stated. Quick question: Do you have code for adding digg? I really like the look of and now thanks to you I have fb and twitter, but I can't find the digg one? I hope you can help :)

Greenlava October 2, 2010 at 12:21 AM    

This is the code for Digg, square button. Replace code line 4 with it.

[script type='text/javascript']
[script src='' type='text/javascript'][/script]
[a class="DiggThisButton DiggMedium"][/a]

I believe uses their own custom button.

Anonymous,  October 5, 2010 at 4:00 AM    

gives me this message when using the digg code:

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Element type "data:post.url" must be followed by either attribute specifications, ">" or "/>".

Greenlava October 5, 2010 at 7:06 PM    

From reply #33
should've been

and you need to replace all "[" and "]" with "<" and "<".

Anonymous,  October 6, 2010 at 8:01 AM    

very good, thanks! It works great. Just one question though: It looks like I have to add this code to all my seperate pages? The other two twitter & facebook codes added the icon button to every page in my blog after editing the html of the main template. Am I correct in thinking I need to add this digg code to each page seperatly? Thanks!

The Blogs of My Life October 6, 2010 at 8:08 AM    

I have the digg button working on all pages, I forgot to remove the lines #2 & #6. Your a hero! Thank you again :)

Greenlava October 6, 2010 at 11:24 AM    

No, just do what The Blogs of My Life (in reply #37) did.
Or is The Blogs of My Life you?
I'm confused :)

dr angel October 11, 2010 at 6:54 PM    

The button where u placed is i'd rwally like it...Master teach me hoe to do it?

Greenlava October 11, 2010 at 7:11 PM    

@dr angel
You mean my homepage-only Facebook share and retweet button?

Valerie October 17, 2010 at 6:00 AM    

Hi, I feel stupid asking this, but I have no idea what this means:
"Choose the type of button by replacing the value of type attribute (in line 4) with the corresponding code below."

I know I have to plug-in the code I want, but I don't understand where in line 4 I'm supposed to put it.


Greenlava October 17, 2010 at 12:46 PM    

This is the default type attribute:
so you want to replace "box_count" (the value of the attribute) to the one in step 6.

Valerie October 17, 2010 at 10:24 PM    


Sorry for the silly questions, I'm still uncomfortable with HTML codes. :~)

Nancy December 13, 2010 at 9:26 PM    

My button shares the correct post title and thumbnail but shows text from the first comment instead of text from the post. Any ideas?

Greenlava December 13, 2010 at 9:32 PM    

This is your lucky day. I have a post just for that :)
Facebook share showing wrong description -solved

Franchesca December 24, 2010 at 4:13 AM    

Thanks!!! Your code is the one that finally worked after many failed attempts! x

Chris December 30, 2010 at 12:56 PM    

Thanks! but when i click on it it says in the popup: Enter link you want to share, can't i do that automaticly? like for example the twitter button has a href="" tag of like:

href="; ?>&via=wpbeginner&count=horizontal"

Thanks for the code!

Greenlava December 30, 2010 at 11:36 PM    

Thanks for leaving a comment :)

It's working fine now.

Yana January 6, 2011 at 9:16 AM    

Thanks you, I love this :)

vibiz January 6, 2011 at 9:17 AM    

great post,, you're smart!

Pranab January 6, 2011 at 11:11 AM    

Hello Greenlava,
greetings !!
I have spent this whole night being awake to put the social networking share buttons in one line adjacent to each other and to put a text "share this" before them. but of no help. u have been always a great help. once again u r requested to help me out to do the same. my blog is
thanking you,

Greenlava January 6, 2011 at 2:07 PM    

You're welcome.

Well if you insist :)

Here is my answer.

Pranab January 7, 2011 at 10:48 PM    

Dear Greenlava,
Greetings !
tried your method but it is returning this msg:
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Element type "div" must be followed by either attribute specifications, ">" or "/>".

Please help !
Thanking you.

Greenlava January 8, 2011 at 5:59 PM    

Looks like you left out a closing div tag.

Pranab January 9, 2011 at 4:40 PM    

Hey !! thanks a ton ! Greenlava.. it worked :-)

Karin E Jansson January 17, 2011 at 7:02 PM    

This tutorial looked great to me, because I want a share-button, not a like-button. (am I right in that a share-button makes it show up on the newsfeed, and like-button only on the persons page?). Anyway, when I have followed the instructions and then choose preview, my blogpage is blank. I can see my header, the background, and the gadgets on the side, but all posts are gone. What could I be doing wrong?

Karin E Jansson January 17, 2011 at 7:34 PM    

Yey, I managed to install the share-button, thanks!!. However, I would like the like-button as well. How do you combine the two? I tried to just insert the code for the like-button before the share-button (which was already there), but what happaned was that the like-button looked fine, but the share-button had moved to the right, and looked kind of distorted.

Greenlava January 17, 2011 at 9:31 PM    

@Karin E Jansson
1. Yes that's correct, a Like only appears on a person's profile page, under Recent Activity.
2. To push the Share button down, you need to add clear:none; in code line 3's style attribute (after the padding) of the Share button:
float:left;padding:5px 5px 5px 0;

float:left;padding:5px 5px 5px 0;clear:none;

Karin E Jansson January 17, 2011 at 9:52 PM    

No, I must be doing something wrong, it still looks the same.

Greenlava January 17, 2011 at 10:37 PM    

@Karin E Jansson
Ooops clear:none; what the... It should be clear:both;
I need coffee :)

Karin E Jansson January 17, 2011 at 10:38 PM    

This is what the code looks like when I only have the share-button:

[data:post.body/] [!-- Facebook share button Start --]

[b:if cond='data:blog.pageType != "static_page"']

[div style='float:left;padding: 5px 5px 5px 0;']

[a expr:share_url='data:post.url' href='' name='fb_share' type='button_count']Share[/a}[script src='' type='text/javascript'/}



[!-- Facebook share button Start --]
[div style='clear: both;'/] [!-- clear for photos floats --]

and that seems to work just fine, however, I don't know if the "clear for photos" should be there (I don't want photos to show up when people share a post).

When I then copy your code for like-button, insert it before the share-code and add clear:none;, it looks ok, until I remove the line numbers (I'm guessing I'm supose to remove these? Otherwise it says 1 2 3 4 5 6 7 around and near the button). When I remove the numbers, and preview, the share-button has moved to the right side and looks distorted.

Karin E Jansson January 17, 2011 at 11:36 PM    

So sorry for harrassing you... I tried to start over, removed both buttons and then added them again, but the problem is still the same; the share-button becomes stretched out (vertically). I have removed the like-button, maby I should settle with that...

Greenlava January 18, 2011 at 12:30 AM    

@Karin E Jansson
You copied the code improperly. You should've clicked the <> icon on top right of the code.
Anyway I've posted the code on Facebook, so you could just copy and paste. It's here.

Karin E Jansson January 18, 2011 at 12:52 AM    

You are a genius!
Thank you!!!

(A small donation has been made)

Greenlava January 18, 2011 at 1:05 AM    

@Karin E Jansson
Not a genius just yet.
You need to correct something, go back to the Facebook discussion.

Thanks for the donation :)

TallyHelper January 18, 2011 at 1:07 AM    

Thanks a lot for this tip. its working on my page at

Logan January 23, 2011 at 8:01 AM    

Hey. I'm having a problem with the buttons alignment. I want them one on each side, as they are now. But I want a paragraph or two below, so that they don't look glued to the text. (you can check
Oh, and I would like to know how to eliminate that extra space after the post between the buttons and the tags, published, etc. info.

Any tips?

Greenlava January 23, 2011 at 8:57 AM    

You are referring to the Like and Tweet buttons right?
Insert a line break [br/] before the Like code and reduce the iframe height from 100px to 65px.

Logan January 23, 2011 at 9:16 AM    

Thank you so much. I think It did the trick ;)

Real Estate Analysis February 2, 2011 at 11:50 PM    

Thanks for the info. I wanted to add the facebook share button on my real estate website for a while now, and reading this post - I see that it will be more simple than I thought! Do you have also something about google buzz button? with counter as well?

Greenlava February 3, 2011 at 2:30 AM    

@Real Estate Analysis
Yes I do, here it is: Add Google Buzz button (with counter) below post.

Rupak,  February 22, 2011 at 8:46 PM    

Hi i am trying to use the script to share a post but when i click on the share button it opens up a window but all i get is a box saying Enter the url you want to share but on the top i can see this :

Any suggestions and by the way i am also using the like button script as well side by side with the this share button script.

Thank You in advance!!!

Greenlava February 23, 2011 at 12:08 AM    

The share URL is incorrect. Your URL is:

Is your platform other than Blogger?

Alexis Design March 3, 2011 at 12:40 AM    


I have a small problem: I put your code for FB share in my HTML, but the FB button appears on each post box of the home page, but not on the post's page. I would like it to be the other way around. How can I fix this problem?

My blog's address is:

Thank you in advance,

Greenlava March 4, 2011 at 11:55 AM    

@Alexis Design
Are you referring to the share button on the sidebar? Try this: Display widget on specific pages in Blogger

Anonymous March 11, 2011 at 7:22 AM    

hi! i ve added the button but i get this on the share window that pop-up
that means that it cant find the link of the post and share it....
you can check it in my blog
help pls!!

Greenlava March 11, 2011 at 8:47 AM    

It's working fine from here.

Anonymous March 19, 2011 at 7:11 PM    

i know :) thanks for the button :)

Donald March 22, 2011 at 10:35 PM    

It works with my new blogger site. Thanks for the button code!

counter for Blogspot March 27, 2011 at 7:32 PM    

Very informative post.I tried it and it works.Thanks for sharing the code.

julie April 15, 2011 at 10:37 PM    

Thanks! So simple. I'm always amazed when these things actually work! : )

Mimi,  April 19, 2011 at 3:04 AM    

When I added the share button on the blog, it shows up okay, but it is showing the same number from the previous blog post and the new blog post. Can it be changed to show only the "shares" for the current blog post?

Greenlava April 21, 2011 at 10:58 AM    

It looks like there's something wrong with your code cause the buttons only share the homepage.
Where did you add the code? Did you add it in your posts?

Anonymous,  May 4, 2011 at 8:51 PM    

you are doing a great job.. keep it up

Patrick May 14, 2011 at 6:27 AM    

Works as you say.Thanks for the html.I will grab your link too and add to my site

Greenlava May 15, 2011 at 2:10 AM    

Thanks, I appreciate it :)

Anonymous,  May 22, 2011 at 7:52 AM    

This is excellent. By the way is there anyway to find out who shared my page?

kakane May 27, 2011 at 8:39 PM    

good, thank you, that helped alot

Greenlava May 27, 2011 at 10:07 PM    

I'm afraid you can't.

Anonymous,  July 3, 2011 at 7:52 AM    

thank you :) for code I was looking this

Everything™ZM July 5, 2011 at 2:50 AM    

nice INFo

zee July 10, 2011 at 5:26 AM    

I dont have post.body tag. I also tried to add the code in one of the page elements but it doesnt work. I am also using blogger. Where should i place it? Any help. to view the source for an idea, u can follow my blog link. i have added all the rest of the buttons except fb share.

Greenlava July 10, 2011 at 11:55 PM    

The code is meant to be added into a Blogger template.
However if you want to add it as a widget (HTML/Javascript widget), you can. Just remove the "expr:share_url='data:post.url'" attribute in code line 4.

Google Plus Info July 27, 2011 at 9:00 PM    

thanks for this tuts

Kashmier July 29, 2011 at 8:39 AM    

Thank you this was great. I added a single button to the page but this is just what I wanted. Also I did not know you can click on the text in the share window to change it or delete it. The link still works in the title. I saw someone mentioned a retweet button is there such a thing. I added a bunch of neat things today here

I am not sure how I am supposed to be using the static pages but it seems like the button I added to the top of the blog shows the count for each static page.

Thanks a million

Thanks for your effort on collecting these information's. Very helpful to us.

Technosalons August 31, 2011 at 1:02 AM    

Thanks man i like it!!!!! September 11, 2011 at 2:09 AM    

thank you

Anonymous,  September 15, 2011 at 1:58 PM    

Thanks. Useful information.

Randy September 21, 2011 at 4:44 AM    

I love the idea of this, but I'm having a small problem. when I preview with this code, the Share button pulls up into the last line of text of each post... any idea how I can fix this? I've added your code right after the line "data:post.body/

Any help is appreciated.

Greenlava September 23, 2011 at 1:53 AM    

I see you've fixed that by placing the button in post-footer. But now the "x comment:" pulls up.
You can fix that by adding a line break [br/] after the last line of the code (in step 5).

@EnamorEileen October 6, 2011 at 1:42 PM    

Hello, i tried adding a FB like (and twitter) button and it shows the exact number (27&3) on every single post. Also, i'd prefer to place these buttons at the bottom of the post rather than the top. I was wondering how to fix this or take the buttons out but when i try to, it gives me an error msg. Am i missing something? Pls help! Thx in advance, Eileen

Greenlava October 6, 2011 at 5:26 PM    

Looks like you use the default codes for the buttons. For those buttons to work on Blogger multi-post pages, you need custom codes:
Add Facebook Like button to Blogger and Add Twitter tweet button to Blogger posts.

Anonymous,  November 1, 2011 at 8:14 PM    

Thanks for the coding

kathyjames November 15, 2011 at 9:12 AM    

So far so good the Facebook share is not displaying the bubble count?

Greenlava November 15, 2011 at 12:08 PM    

The bubble will appear when the count reaches 3.

Anonymous,  November 24, 2011 at 8:15 PM    

Hi ,i fallowed your suggestions
my share was working but i unable to display description of page i used meta tag also but was not calling,
how can i display Title and description .
in shared pages


Greenlava November 25, 2011 at 8:08 AM    

Have you read this post?
Facebook share showing wrong description –solved!

Dody Farial December 4, 2011 at 2:09 AM    

thanks, work on my blog

farnville news December 4, 2011 at 5:00 AM    

thanks a lot buddy that was really help full

hotandfastnews December 15, 2011 at 5:33 PM    

thanks very simple and go ahead

Misty Dady December 22, 2011 at 6:39 AM    

Thank you Greenlava :)

I have "like" buttons on each individual post, the likes show up on Facebook when people click them. Since I added the Share button just now, I noticed that it reflects the same number of "likes" on each post. Is this supposed to happen, or is there a way to differentiate between likes and actual shares?

Thanks in advance,

Greenlava December 22, 2011 at 5:27 PM    

@Misty Dady
Yup, they do share the same counter, so there's no way to differentiate Likes and Shares.

sally brown January 23, 2012 at 9:52 AM    

Thanks for the info. This helped me put a FB share button on my site. Sally

Miguel February 7, 2012 at 10:31 AM    

I have been looking for this since then... this is great and the best way to put fb share button.

Banqueting hall February 11, 2012 at 4:37 PM    

A real informative blog like this is an exceptionally cool helping resource for a needy information seeker like me! Thanks a lot.. April 13, 2012 at 7:12 AM    

This One is the Top blog in Blogger platform. I ever seen.

Video Masi April 21, 2012 at 2:04 PM    

thanks for the code . Its work on my site :)

Ali June 6, 2012 at 4:05 AM    

how can i add it in wordpress

Arjun July 11, 2012 at 8:21 PM    

Thanks .. It worked !

kathirsrs September 7, 2012 at 7:55 PM    

Great works simple. Thanks

TotoSal October 20, 2012 at 6:36 AM    

Very Nice Post admin

Mohsin Rasool November 28, 2012 at 8:35 PM    

Worked perfectly.. thanks

Food Taste and Recipe December 1, 2012 at 1:00 PM    

I could not find in HTML is there any other way? Please help

Rasel Rony February 1, 2013 at 7:38 PM    

I've successfully added the Facebook share button thanks for the post

Savan April 18, 2013 at 7:04 PM    

Awesome Article
Thank you..... :)

drivermax June 6, 2013 at 12:49 PM    

Wow, wondеrful blog layout! How long haνe you been blоgging for? уou maԁе bloggіng lοoκ еаsy. The ονеrall look of your websitе іs wоnderful, as well аs the сοntent!

عشاق التقنية July 24, 2013 at 9:19 AM    

wow. great share button man

Chris March 16, 2014 at 12:14 AM    

Really helpful and insightful information - many thanks!

Post a Comment

We love to hear from you! Leave us a comment.

To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.

Click to go to top Click to comment