Facebook Share Count Buttons For Blogger



Facebook has now officially introduced the Retweet like buttons for your blogs or sites. These buttons look much similar to the Retweet buttons by Tweetmeme. Facebook has 5 styles of Sharing buttons. Here we will see two of them.

Adding a Facebook share count button will show a neat count of how many times your blog post has been shared on Facebook.

Facebook Share Button Style 1

facebook-share-button-for-blogger-1

Code for Facebook Share Button Style 1

<div style="float:right;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>  
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>

Facebook Share Button Style 2

facebook-share-button-for-blogger-2

Code for Facebook Share Button Style 2

<div style="float:left;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>  
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>

Facebook Share Button Compact Style 1

facebook-share-button-for-blogger-3

Code for Facebook Share Compact Button Style 1

<div style="float:right;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>  
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>

Facebook Share Button Compact Style 2

facebook-share-button-for-blogger-4

Code for Facebook Share Compact Button Style 2

<div style="float:left;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>  
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>

How to install Facebook Share Count Button on your Blogger Blog?

1.Select one of the Share Button Styles and copy the Corresponding Code.

2.Now login to your Blogger Dashboard and navigate to Layout > Edit Html and expand the widget templates

3.Find this piece of code

<div class='post-header-line-1'/>
and immediately after that place our Facebook share button code(that you copied)

If you were unable to find this code in your template,then look for the first occurance of

<data:post.body/>

and immediately before that paste our Facebook Share button code(that you copied).

5.Save the template and you should get a facebook share count button near each of your blog posts.

If you liked this post and if it helped you in implementing the facebook buttons, then please consider sharing this post on Facebook using the button on the top-right of the post :)

Link: Additional Share Button Styles on the Facebook Developers Wiki

Permalink :Facebook Share Count Buttons for Blogger

Feeds RSS Subscribe to Feeds RSS
Email Get Updates by Email

84 comments:

Soufiane LeBlogger said...

Wow that's a very good news Aneesh.

By the way, the intergration of Adsense in this page is just perfet, well done Aneesh.

Blogging Tips said...

Great Aneesh Nice to know about the Facebook share count widget for blogger

tmongan said...

thats cool! I knew how to put a facebook add as a friend button but this is new for me. Thnx for the know-how

Anshul said...

@aneesh how are you implementing adsense ads in between posts.Adding them manually or just using hack to show only adsense tag to them in between post and the adsense codes are defined in html and adds appear automatically there.

Aneesh said...

@Anshul added manually with line breaks turned off

Semangat Menuju Masa Depan Sukses said...

Thank's

Kamrul Hasan Noor said...

thanks for posting a nice tricks

Sameh Khan said...

How did you make the facebook button come above the twitter button? When I followed the instructions given, They were side by side.

Thanks, btw. It really is a useful addition to my page :)

anderson said...

very good

blogger template place said...

thank aneesh... i will try it into my blog

Aneesh said...

@Sameh Khan
take the codes from this post and remove the opening and closing divs. Now insert this code in the div containing the retweet code..

David Bergeron said...

I thought this was a facebook fan counter..Still waiting for that to come out.

Stacy said...

Just what I wanted! Thanks, it was easy.

blogger seo said...

I was looking for this for along time thanks for this.

Anonymous said...

hey can u tell me how to set comment count on right top corner as in your all post i.e, in Facebook share count has 14, with my its 15, create a facebook.. has 10 comment (show in right top corner of post). it looks nice


how to set this pls pls
pls mail me at sandippatel1110@gmail.com

thanks in advance

Daily Mobile said...

When you make new post dude? we waiting ;)

Nicholas Z. Cardot said...

Thanks for letting me know about this. I didn't know that a button like this was even possible.

Mr. Univesal Tiraf said...

Hey thanks
by using your tutorial i have made my site beautiful

now i want you to help me out

in my site homepage, photo seen in squarebox, is there any way to make this square little bit bigger (456 px *650 px or >than this), so photo will be seen clearly and big enough

here is my site : http://tinymoviez.blogspot.com/

do help fast cause i want to develop my blog

Thanks in advance
pls do help me.

vitamin e said...

Thanks for sharing such nice information about facebook buttons. You described it very beautifully.

Anonymous said...

Hi,

very nice blog, thank you!
Is there a way to include in the "a href" tag the Google Analytics parameters to track click events on these buttons?
Thanx in advance

-=KSK=- said...

hey see my site i implemented it but its just showing the button not the count it shows count once button is clicked...

please gimme a solution...

-=KSK=- said...

sorry forgot.... this is my site gimme a solution plz


http://therapidsharelinksworld.blogspot.com/

Aneesh said...

@-=KSK= count will be shown only after the postgets shared 2-3 times

pangki said...

Thank You for sharing...

Mukhtaruddin said...

in my blog template didn't Show.. it this why?
http://www.mukhtar.web.id

Vu Diu said...

I have done this on my blog but It does not seems to work properly?

Jaypee of enjayneer.com said...

i'm new to this blog and i enjoyed reading your informative posts..

warung informasi said...

i try to install coe facebook share count buttons for blogger style 1 on my blog, why ? no way, is there something wrong or did not support with my blog template please help. thanks

Tomski said...

Nice one greta post I would like to add this to my site here buttonshut.com in the facebook buttons section so that my users can share this on facebook.

Blogging Tips said...

Hi Aneesh why aren't you updating your blog.I am waiting for your next great post.

RIZAL said...

I WANT TO DELETE TEXT BLOGGERTRICKS.COM AT MY BLOG HEADER & I WANT TO REPLACE WITH MY BLOG BANNER OR LOGO. FOR YOUR INFORMATION,MY BLOG IN XML FILE.CAN U TEACH ME HOW?U CAN VISIT MY BLOG IF U WANT TO SEE CLEAR.I TRY MANY TIME BUT ALSO CANNOT,PLEASE...

Ian Draper said...

Thanks for this help and guidance, this is my first visit to your site and it is great, to read how to add code in a simple and easy way l will return and let you know my feed-back.Also will add link to my blogger network.

Kindest regards, Ian

Bang Del said...

Cool, i like this :) Thank you Aneesh

Aneesh said...

@Daily Mobile ,@Blogging Tips
i am busy with my studies.. will be back soon :)
@Ian Draper
thanks :)

alperen said...

thanks

culinaryandtourism said...

hi aneesh.. i like this blog and tutorial.. visit my blog from indonesia. keep blogging thanks aneesh..

Crazyhorse said...

Where did you find all the info you have! You are a pro! thanks for sharing. Certainly you do serious research! Thanks again!

Franklin said...

Facebook is a great source of traffic. Awesome post dude, written in simple english

Daily Mobile said...

We need New post mate!

Albania said...

Good job...thank you!

srikanta said...

Hi, Aneesh it is your another fine work. But when I try for my blog, I get an error 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 reference to entity "alt" must end with the ';' delimiter." Please suggest the solution.
http://catswatch.blogspot.com

Free Samples said...

Awesome..this is very helpful, thanks

Hodda said...

Thanx for sharing.... :)

scorpet said...

hi, it worked but when sharing the content being shared is the 'about me' stuff not the post itself...
httP://scorpwriters.blogspot.com

............ said...

THANKS FOR THE TIPS!

Henrique Normando said...

"Perhaps you can write to me"
T.S.Elliot

the art of linux said...

great posting, thank's for sharing

Hidup Untuk Berbagi said...

very nice widget....

varun said...

Thanks for this great post.
I have a question on "How can we display codes like these in our blogger blog?"
pls i want to know it

sin-anime said...

thanks..
this great posting

all2010movies said...

It helps, thanks for this article sharing great idea.

Farandikha #3 said...

thanks man ;)

I Heart Monster said...

Thanks so much! I've been looking for this for a LONG time, and it worked on the very first try. Rock on!

Lutfi said...

good news for me..take care . . .visit me back...

cronicknitter said...

If you're using Blogger, I put it into my Blogs Setting> Formatting> Post Template

I am tempted to see if there is a more up to date version of this that I'm just not seeing but we'll see. I'm sort of out of paitience with these Widgets right now.

Venexea said...

Since with the new Blogger Templates, I couldn't get either code to show up in my template. So I put the smallest share button in my Post Template under Setting> Formating.

reiner said...

Thanks for the tips

Eky Dakka said...

It works.. Thanks :)

Dean said...

Hi.. I was wondering if you can aLso help me.. I use wordpress for my blog.. I would like to include this button also..

Aneesh said...

@Venexea ,cronicknitter
there is a problem with inserting the code into the post template.
That share button shares the current page being viewed in the browser and not the post. So on the home page the buttons on all posts share the homepage and not the individual post pages.

Adding the code to the template will create separate share buttons for each post.

you can verify it by seein the homepage of Venexea's blog.

Mike Hassard - Kelowna said...

Thank you the facebook button works great and makes it much easier to share my posts.

Mike

Davor Gasparevic said...

Can you give me advice here pls? I've got this blog http://cheap-i-m-ebooks.blogspot.com/, and there I have 3 buttons IN LINE under each blog post title on the right side of the blogpost.

I want them NOT to be IN LINE but IN COLUMN, UNDER each other. Do you know how can I do that in HTML??? Or is it possible at all?

Erwin Rooshartono said...

this site is very helpful..tks a lo

Merda's de Casa! said...

well done

TheDeppest__Ink said...

hello!!!
I really wanted to have it on my Blogger (since it's easier for Wordpress)
I'm so happy, now I feel complete :)
thanks (the same for retweets button )

Deepika said...

Thanks!! Just the way i wanted it.

Swamykant said...

Thanks Aneesh !! However I need a help i have succesfully add the Facebook share button, however I am unable to see the count. Here is one of my post which share with friends regarding the TOp 100 science blogs.

Help me - Here is the link of post - http://www.scientiamag.com/2010/02/eurekas-top-100-science-blogs.html

Any idea, please let me know

Aneesh said...

@Swamykant - as i have said in my earlier comments, the counter doesn't show small counts. I think the minimum count that it would show up is 3 or 4. Wont show the count for 0,1 or 2 shares.

devil said...

Why it always minimize. Is there any trick so it remain open.

http://www.wallpaperspub.net/

Anonymous said...

That is too good for me and very useful. So thanks for sharing with me. http://bbspanish.com/

محمود علام said...

thanks and sorry my english dos,nt help me to thank you much
your very good my name is mahmoud

Nickolas Pickolas said...

How do you get the Facebook share to have correctly pre-populated title, description, and image fields? Your blog actually puts the title of the post into the facebook share title instead of the title of your blog, this is really nice, how did you do it?

Rita Thakkar said...

It is a real educating blog for bloggers like me who are new to the blogging. I have tried many widgets in side bar and at the top of the post but putting in through or within blog post I learnt from your blog. Thanks a lot! God Bless You!

Amitha said...

Hi,

I added this to my site (www.amisampath.com) but it doesn't pick a thumbnail image when sharing on Facebook. Only the page title and URL is picked.

Please give me som hints

Aneesh said...

@Amitha - dont know why. it used to work earlier now the images uploaded via blogger doesnt show up as thumbnails. If image codes for external images are added to the post, thn it show up. Check out my latest post on Google buzz and click the share button, you can see that it takes up the thumbnail. that image is hosted on tinypic. None of the other images come up. Hope that they would get it fixed.

Spore Family said...

I can't get this to work on my blog. Please help???

Anup said...

First it will show share count but. it will automatically disappears. when I re visit my page. Why this is happening??

Anup said...

Hey Aneesh this counter really doesn't works. Why? It will disappears when I refresh the page...

Aneesh said...

@Anup - as i have said earlier in comments, the counter wont show small counts like 1 or 2. It will show the count if the post is shared more number of times.

Anup kayastha said...

Oh! got it. thanks for the quick reply Aneesh :)

For better world said...

Oh I have got it with my great thanks and pleasure

sima49 said...

thanks alot for this info

Estella H said...

Thanks a lot anneesh. After visiting over a dozen sites, it was yours that was finally helpful!

Swamykant said...

Thanks But i have a Problem .. The count bubble is missing eventhough there is some count. Please help me.

Here is my blog - http://www.scientiamag.com/

Post a Comment

Please don't spam on here..