Facebook has now officially introduced the Retweet like facebook buttons for your blogs or sites. These facebook 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
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
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
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
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 check the check box which says “Expand widget templates”
3.Find this piece of code
If you were unable to find this code in your template,then look for the first occurrence 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 :)
Also Check out :
Link: Additional Share Button Styles on the Facebook Developers Wiki
Permalink :Facebook Share Count Buttons for Blogger
Wow that's a very good news Aneesh.
By the way, the intergration of Adsense in this page is just perfet, well done Aneesh.
Great Aneesh Nice to know about the Facebook share count widget for blogger
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
@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.
@Anshul added manually with line breaks turned off
Thank's
thanks for posting a nice tricks
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 :)
very good
thank aneesh... i will try it into my blog
@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..
I thought this was a facebook fan counter..Still waiting for that to come out.
Just what I wanted! Thanks, it was easy.
I was looking for this for along time thanks for this.
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
When you make new post dude? we waiting ;)
Thanks for letting me know about this. I didn't know that a button like this was even possible.
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.
Thanks for sharing such nice information about facebook buttons. You described it very beautifully.
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
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...
sorry forgot.... this is my site gimme a solution plz
http://therapidsharelinksworld.blogspot.com/
@-=KSK= count will be shown only after the postgets shared 2-3 times
Thank You for sharing...
in my blog template didn't Show.. it this why?
http://www.mukhtar.web.id
I have done this on my blog but It does not seems to work properly?
i'm new to this blog and i enjoyed reading your informative posts..
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
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.
Hi Aneesh why aren't you updating your blog.I am waiting for your next great post.
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...
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
Cool, i like this :) Thank you Aneesh
@Daily Mobile ,@Blogging Tips
i am busy with my studies.. will be back soon :)
@Ian Draper
thanks :)
thanks
hi aneesh.. i like this blog and tutorial.. visit my blog from indonesia. keep blogging thanks aneesh..
Where did you find all the info you have! You are a pro! thanks for sharing. Certainly you do serious research! Thanks again!
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.
Facebook is a great source of traffic. Awesome post dude, written in simple english
We need New post mate!
Good job...thank you!
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
Awesome..this is very helpful, thanks
Thanx for sharing.... :)
hi, it worked but when sharing the content being shared is the 'about me' stuff not the post itself...
httP://scorpwriters.blogspot.com
THANKS FOR THE TIPS!
write you a new post this year? ; /
"Perhaps you can write to me"
T.S.Elliot
great posting, thank's for sharing
very nice widget....
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
thanks..
this great posting
It helps, thanks for this article sharing great idea.
thanks man ;)
Thanks so much! I've been looking for this for a LONG time, and it worked on the very first try. Rock on!
good news for me..take care . . .visit me back...
wooow Thanks, thank you very much.... :)
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.
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.
Thanks for the tips
It works.. Thanks :)
Hi.. I was wondering if you can aLso help me.. I use wordpress for my blog.. I would like to include this button also..
@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.
Thank you the facebook button works great and makes it much easier to share my posts.
Mike
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?
this site is very helpful..tks a lo
well done
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 )
Thanks!! Just the way i wanted it.
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
@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.
Why it always minimize. Is there any trick so it remain open.
http://www.wallpaperspub.net/
That is too good for me and very useful. So thanks for sharing with me. http://bbspanish.com/
thanks and sorry my english dos,nt help me to thank you much
your very good my name is mahmoud
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?
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!
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
@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.
I can't get this to work on my blog. Please help???
First it will show share count but. it will automatically disappears. when I re visit my page. Why this is happening??
Hey Aneesh this counter really doesn't works. Why? It will disappears when I refresh the page...
@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.
Oh! got it. thanks for the quick reply Aneesh :)
Oh I have got it with my great thanks and pleasure
thanks alot for this info
Thanks a lot anneesh. After visiting over a dozen sites, it was yours that was finally helpful!
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/
Hi Aneesh,
Thanks so much for this tool. I wonder if you can help me with a simple trick related to this. I can see that when I share your page on facebook, the first paragraph shows up as a meta description. When I share any pages from mine (www.howdoigetto.blogspot.com), the global meta description shows up. Can you help me tweak this?
Can it be done by adding a code to my template? Thanks!
Reply to last comment by me:
It worked. Thanks for the tutorial.
nice info, thank's
Beautiful, thank you. That was so easy
Thank you so much for giving us these such crystal clear steps. I installed it on my blog and it is working fine.
Thank you again!
www.beontheroad.com
How about another question? I think your post almost answers what i'm trying to do, but i'm not a programmer just trying to find some data to present to my programmer for implementation. I'd like to include a within the footer of my website a "facebook fan count". I believe this will add an incentive to users considering clicking our facebook icon. "join XXXX fans on our facebook page" for example. I want the XXXX to be automatically populated with our facebook fan count. I want to do the same with twitter. Any insight you can provide would be helpful.
Thanks
@Anonymous - This post is not related to what you are asking but it can be done using the Facebook and Twitter APIs. Refer this link
Hi Aneesh - not sure if you saw my comment above but would just want to post it again. I hope you can help me:
Thanks so much for this tool. I wonder if you can help me with a simple trick related to this. I can see that when I share your page on facebook, the first paragraph shows up as a meta description. When I share any pages from mine (www.howdoigetto.blogspot.com), the global meta description shows up. Can you help me tweak this?
Can it be done by adding a code to my template? Thanks!
@How to get to - that is because you have added the same meta tag(duplicate tag) on every page of your blog. You have to either remove th meta or wrap them within conditional tags so that they appear on home page only.. Refer - http://www.bloggerplugins.org/2008/06/meta-tags-for-blogger-blogspot.html
Thanks Aneesh, I wonder why I wasnt able to see this post of yours while going through your site. I shall try this:)
Thanks so much. it is very helpful
I put this in my blog and it works great. However, when I click on the icon to share on facebook, it is not pulling up my description or the images. I share each post on FB and need this to work. Can you look at my html and tell me what is going wrong? http://adhdmomma.blogspot.com I did look at the link you last posted in these comments and pasted it in but it didn't change anything.
Thank you very much for your help. I have installed facebook share button into my blog which I could not through http://www.facebook.com/note.php?note_id=149643928371 as it has suggested to paste the code somewhere in different place.
really nice article and easy to understand .. Really big thanks.
The button works, with one exception: It doesn't display the number of times people have shared. I tried pressing the button on three or four blogger blogs besides my own. Same problem on all of them.
@Necessary Distractions - count will be shown only after the post gets shared 3 or more times(so it wont show counts like 0 1 or 2)
Hi Aneesh, just a quick question. I just got a custom domain and noticed that the number of facebook shares went back to zero. Is it the case or will it get updated in the next few hours? Thanks!
@Going anywhere in Metro Manila - it wont get updated. The urls have changed. so the sahre counts will start again from zero.
@Aneesh. Of course, I see someone has commented on that already. Sorry about that. Should have read the the comments more thoroughly :P.
PS. I'd love to see a tutorial on how to implement the new faceebook "Like" button on blogger. I tried to put it on my blog today, but I didn't quite succeed. :(.
@Necessary Distractions - Tutorial on adding the Facebook "Like" Button on Blogger - http://www.bloggerplugins.org/2010/04/facebook-like-button-for-blogger.html
Very Nice Tutorial...
Great work
I was looking for this
Thanks
http://www.urdusms88.blogspot.com
Thanks so much it worked great :)
I even managed to place it on the right side instead of the left side!
Such a good explanation.THANKS
How to i add this in Classic Template?
thanks a lot blogger plugin....it looks cool. on my blog hacker9.com.
also am looking for retwit button here.,,thanks
i think no need to install FB like & other page..just install wibiya bar in ur blogger then easy to share via differnt social networking websites... u visit my blog... http://howstats.blogger.com
Thnx a lot. Will you please tell me how to add share it at the end of the post. My e mail ID is vishkumawat93@gmail.com.
And my blog is http://blogginggallery.blogspot.com/
Thanks for post I tried this but it's not working for me it's mess up even I'm not using div .. I just use script code. please advice
Nice :)
Visit mine , I've implimented it..
www.tricksterminal.com
But its not showing in the blog's main page =((
And its coming under d footer :((
@ D Post Creator!
Any help on dat?
Please reply?
My Blog Link: www.tricksterminal.com
d FB Share is not coming in the Main Page!! :(
HELP!
thanks man.. atlast its working .. But d template i use is not allowing me to keep it in the top..
the posts comes a little below it :(
Anyways, thanks! :)
www.tricksterminal.com <-- Dont forget to check! :)
Thanks man, this is the easiest way I've ever done something like this, your instructions are short but precise and clear.
Again thanks.
We added this like button but it doesn't show how many shares has been happend till now. i can see the same problem at your article. is it a facebook problem?
Maybe someone can help me out. thxs in advance
When i share my post from my blog, the image appear in the facebook is different from my website logo, how can my website logo appear as a image when i share my post in facebook??
Please suggest
I am so glad that I found your blog. I've been looking for a facebook button for a while now. Thanks for the post.
Your the man! Thanks! :D
I'm thrilled with this information and have installed both the "Like" and "Share" buttons. Thanks SO MUCH!!!
Strange. After clicking the share button, facebook shows as the description, the first comment for the post instead of the actual description of the post. Any ideas?
thankyou, this is what i'm looking for
cool i addded this on my blog thanks author..
Much appreciated tips my good sir. Keep up these nifty little posts.
I love this! I've properly inserted the button, but when someone posts it on facebook, the summary it's giving is people's comments about the blogspot, not the actual blog. Anyway to fix this? http://bit.ly/bJ7uvB
In my case.. why does it show only the "share" button? and after you click it.. that's the time it only shows the number share count..
@Jaztien - you need a minimum of 3-4 shares on that post for that to show up automatically :)
No need of b:if ?
Thanks for sharing this tutorial~~
thanks a lot working perfect on my blog
http://www.homoeopathyart.blogspot.com
I had try some base on tutorial above but still cant work.
When i put the code before the seconds of tags :
div class='post-header-line-1'/
And finally worked.
Now you can see in my blog http://tambelan.blogspot.com.
I have a big problem...
When I put the buttons(for twitter and blogger) you can see in all: 0 tweet. I tweet it and now you can see 1 tweet. BUT WHEN I REFRESH THE WEB, I HAVE 0 TWEET AGAIN!!!
I'm going crazy because of this!!
ANSWER ME PLEASE!!
http://kordream.blogspot.com/
-->nanaoppa@gmail.com
Post a Comment
Please don't spam on here..