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

66 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!

Positively Nigeria said...

Hi Aneesh,

I tried to put the "Facebook Share Button Style 1" on my blog here: http://positivelynigeria.blogspot.com but for some reason the "count square" is not visible...it only shows the "f share" button.

Please help. Thanks.

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!

JajQo said...

write you a new post this year? ; /

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...

Technology news | Computer and Internet Information said...

wooow Thanks, thank you very much.... :)

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

Post a Comment

Please don't spam on here..