Blogger has officially announced sharing buttons. These buttons let your readers share posts on social networks like Twitter, Facebook & Google Buzz. These sites bring traffic and are important for search engine rankings. The great thing is that the share buttons automatically shortens post URL/address because Twitter allows only 160 characters per tweet.
How to Add Share Buttons?
Adding share buttons under Blogger posts is very easy. Just go to Design | Page Elements. Edit the Blog Posts gadget and enable Show Share Buttons option. Click the following image to see full size:
What to Do If Share Buttons Doesn't Appear?
If you're using an old template then there is a chance that share buttons won't show up even if you've enabled them. So, go to Design | Edit HTML and check Expand Widget Templates option. The page will automatically refresh. After that, find this code:
<data:post.body/>and REPLACE it with the following code:
<data:post.body/>
<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>Important: After that save your template and go to Page Elements tab. Click Edit on the Blog Posts widget. A new window will appear, in that window check the option which says Show Share Buttons. Save your changes and now you'll be able to see share buttons on your blog.
How to Show Share Buttons Only on Post Pages!
By default, share buttons will appear on all pages. It might look a little messy and some people might want share buttons to appear only on post pages. To do that, you need to add a simple if-else condition. Instead of the above code, add this code after
<data:post.body/>:<b:if cond='data:blog.pageType == "item"'>
<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>
</b:if>If you've any problem, feel free to leave me a comment.
Update! Share Buttons are Grey
Many of you guys are complaining that the share buttons are appearing in Grey color. Well, don't worry about that because that's how they should appear. I don't know any method (yet) to make them colored. By default, they are Grey and will only become colorful when you'll bring mouse over them.
I'm having an issue where the share buttons are showing up right after my post instead of hanging out next to the comments/labels/so on... do you know what could be causing this? I'm using an old template.
ReplyDelete@ Daniella Echeverria, gimme your blog address and also tell where you want the share buttons to appear!
ReplyDeletegood job. thanks for the info this is cool.
ReplyDeletesame problem as daniella.
ReplyDeleteFinally, This is exactly what I've been waiting for. The EASIEST code that i have EVER add to my template!!!! Thanks for the simple step by step instructions. Bravo!!!!
ReplyDelete@ Carlota, please provide your blog address!
ReplyDeleteThank you for your help. The share buttons are no longer invisible. However I have the same problem as Daniella and Carlota. They appear right underneath the post title, instead of next to the comments/labels, etc. and they end up interfering with the formating of the post.
ReplyDeletePlease take a look at www.bombance.net to see what I mean. Thank you!
@ MC, just check Expand Widget Templates and search for this line of code:
ReplyDelete<div class='post-footer-line post-footer-line-1'>
Then paste the share buttons code right after it. The result will look something like this:
<div class='post-footer-line post-footer-line-1'>
<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>
I had been wondering what the problem is. Glad I was able to google this page and find the solution!
ReplyDeleteThanks - this solved my problem easily. :)
ReplyDeleteI could not find "data:post.body html anywhere...I found a whole blurb of html that I think referred to all teh share buttons but they are not showing up. I have no idea if I have an "old" template or not! Any suggestions?
ReplyDeleteI am using a new template and none of the features of configure blogposts are showing up.
ReplyDeletehttp://torydrroy.blogspot.com
I have the same problem too. Also, the buttons are GRAY...
ReplyDeletethanks!
@ Kathleen Ellis, make sure you've checked the box Expand Widget Templates. After that only search for <data:post.body/> and place the code right after it.
ReplyDeleteThanks for helping out with this. I was having the problem with it not appearing, then appearing in the wrong place, but I was able to fix it by following your advice.
ReplyDeleteI tried putting in the share button code using your first method and am having no luck. My website is <a href="http://www.waynecountylife.com>www.waynecountylife.com</a>.
ReplyDeleteThanks for any assistance. I'd like the share buttons to appear below every post.
@ Seth C. Burgess, if share buttons doesn't appear then you've to manually add the code as described above.
ReplyDeletesame problem as daniella
ReplyDeletehtttp://torydrroy.blogspot.com
About where will I find ?
ReplyDelete@ Roy Eappen, send me your template and also mention where do you want the share buttons to appear.
ReplyDeletelevisinside0@gmail.com
Hey! Good work, but I have the same problem as Daniella, and I don't even know if I use an old template.
ReplyDeletePlease help!
http://aleka-rock-rose.blogspot.com/
Sarah.
Oh, and I would like them to appear the normal way, under the labels I guess.
ReplyDeleteSarah.
Sorry, I saw that it wouldn't look too good under the labels, maybe beside them or beside comments...
ReplyDeleteThanks!
Hi there, I got the share buttons on but they are also all grey and in a little bit of a strange spot as well. PLease advise! Thanks!
ReplyDeleteHi Bilal,
ReplyDeleteI'm having the same problem as Daniella.
Thanks for the initial help with the share button, but now the buttons are appearing within my blog text, and not with the other boxes such as 'comments' and post details. Could you help?
(My blog: http://hydrangeagirl.blogspot.com/)
Just wondering... Is there away to make the "share buttons" in color? Mine are gray until you scroll over them.
ReplyDeletehttp://thepinckney5.blogspot.com/
@ stylebirds & MamaPink, the share buttons will remain grey until you hover mouse upon them and I don't think if there is a way to change this.
ReplyDeleteNite tut! Easy to follow. Thanks!
ReplyDelete@ Sunshine Sarah, send me your template file.
ReplyDeletelevisinside0@gmail.com
@ Hydrangea Girl, send me your template file.
ReplyDeletelevisinside0@gmail.com
Thanks
ReplyDeleteI use the
ReplyDeletecode after to push it down a little further. If its not enough space,I add it twice.
Doesn't put the buttons exactly where they are supposed to be because I'm using an old template too,but it makes it more manageable.
:)
Annie
Thanks very much. It was driving me crazy, because I could not figure out what I was doing wrong.
ReplyDeleteThat fixed it, easily.
Great stuff! Thanks for all the help! :)
ReplyDeletegr8 work... thank u for the solution :)
ReplyDeletethanks so much for this! :) I tried several tips, none of them helped, some even tried to wreck my blog... This works as a charm! Could I add the text "Share:" before the buttons?
ReplyDelete@ Blu11, in Edit HTML tab, check Expand Widget Templates. Then search for the share buttons code which is:
ReplyDelete<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>
After finding the code, you have to add the word "Share:" like this:
Share: <div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>
Thank you, Bilal! :) Works perfectly!
ReplyDeletethank you so much!
ReplyDeleteI tried putting this directly in the template itself since Im using the very old blogger template... still, the buttons are not showing up... help me!
ReplyDelete@ Hazel Manzano, make sure after adding the code, you've also enabled the buttons from Page Elements tab as explained above.
ReplyDeleteThank U. Very useful!
ReplyDeletethank you thank you thank you! worked for me :)
ReplyDeletethank you very much for the tips, the sharebuttons finally showing up,
ReplyDeletethank u so much ...
ReplyDeletewhat an excellent post! thank you so much!
ReplyDeleteThankx for the instructions, was very helpful.
ReplyDeleteGod I hope blogger does something about the greyed out look of the Share buttons, looks a little silly!
What were they thinking??
Greyed out Buttons! You can barely spot them. Thumps down! But better than nothing. :)
ReplyDelete@ James Felic, you're right, Blogger must improve these buttons.
ReplyDeletedo you know how to customize what they show when you click on them?... mainly the one to retweet... I only want my post title {right now it includes both my blog title and post title} and I want to add my Twitter handle "via @_____"
ReplyDeleteI've tried all of your suggestions and none of them seems to work, but I appreciate your thoughtfulness in trying to help with such problems. If you could take a look at http://sugarbowlacademy.blogspot.com and see why you think the Share buttons aren't appearing I'd be MOST grateful. Thanks in advance. - Peyton Jobe
ReplyDelete@ Peyton, send me your template file:
ReplyDeletelevisinside0@gmail.com
@ Lesa McMahon {MyFreeEducation}, I don't know how to customize these buttons. However, for full control, you can use the official Twitter buttons:
ReplyDeletehttp://www.betatemplates.com/2010/08/blogspot-how-to-add-official-twitter.html
Thanks, I'll keep searching. I may just have to remove the Twitter icon and add other RT option that can be customized.
ReplyDeleteHey!
ReplyDeleteI never had a problem with my share buttons, but today I enabled a new template, tweaked some of the fonts, and now my "Facebook share" doesn't work. The buttons are there, and I shared to Twitter just fine, but it won't share to Facebook.
Any help would be SO appreciated.
candelierious.blogspot.com
@ Lis, that's a strange problem. Did you tried by reinstalling the code from this tutorial??? Maybe that will help.
ReplyDeleteHello there :)
ReplyDeletePlease could you help me to see if we can fix my code so the share buttons will appear?
I have tried all the above and nothing is working.
The templates which I designed for both my blogs is from Artisteer.
My link is www.livingonfruit.blogspot.com and
www.fruitilicoushealth.blogspot.com
Your help is much appreciated - thank you in advance.
Julie.
@ Julie Groenewald, send me your template file.
ReplyDeletelevisinside0@gmail.com
I think they're pretty nice, but they would be much better if we could pick colors or replace the images.
ReplyDeleteHi Bilal,
ReplyDeleteThanks for sharing this :) it's really helpful, finally the buttons show up in my blog...
but my problem now is when I use the "if" command, they invisible again T^T
my link is http://argentyue.blogspot.com
you can see that in my pages (about me, contact, etc)...the share buttons also show there...
I wonder if there is any other way to hide those button on pages?
Thanks,
Ying ^_^
@ Xing Ying, please subscribe to my YouTube channel. I'll post a video within a week regarding this :)
ReplyDeleteI have tried this, but still instead of having the share buttons, I get a big ugly white space. I've tried it in multiple browsers. What am I doing wrong? D:
ReplyDeletehttp://www.minipennyblog.com
@ Chaplinnn, please send me your template file.
ReplyDeletelevisinside0@gmail.com
this has been bothering me for a long long time...thank you!
ReplyDeleteI tried all trick paste the code, add share : but nothing is work. my share button still blank space. This frustrating me for weeks. Please help. Thanx.
ReplyDeleteThis has been a big help, but is there a way to place the share buttons on the same line as the Posted By and Comments. I've arranged them in one line on the page elements page but the share buttons are on it's own line underneath the posted by and comments. Thanks
ReplyDeleteThank you so much for explaining the part about why it might not work and how to fix it.
ReplyDeleteThank you so much!
ReplyDeleteHi,
ReplyDeleteThis is great info, thanks. Wondering if you can tell us how to add the Email this page, Share button on one line?
Thanks again
@ Jaenne, email me your template file.
ReplyDeletelevisinside0@gmail.com
This comment has been removed by the author.
ReplyDeleteHi there,
ReplyDeletethank you for this article.
I tried everything as you said, but my buttons are still not showing up.
My blog is: http://livplusdaveequals.blogspot.com/
Do you have any ideas what to do?
Thanks again Liv
Thank you Bilal, this worked for me. I wish they would show up were they are supposed to but since they are not I will take it the way they are!!
ReplyDeleteThanks again
Ildi
I did what you said to do above and they are still not showing up :( If you have any suggestions feel free to e-mail me. averyolive1@gmail.com
ReplyDeletethank you..it's working
ReplyDeleteI'm having massive problems. Can't find where to insert code. Where you said to place it doesn't seem to exist on my page. http://nextdoorcritic.com
ReplyDelete@ Ildi-The craftin mama, Avery Olive, cherrycheery & Sammy V, please check this post:
ReplyDeleteNeed Help? What is the Best Way to Get Help From ME?
Do you have any idea what I have to do, to make the buttons show?
ReplyDeleteI have truly tried your instructions step by step but it's still not working.
I guess it is because of the template. There must be some other code in there, that I have to change, maybe?
http://livplusdaveequals.blogspot.com/
Thanks for your time.
Thank you so much for your help!
ReplyDeleteAmazing how you fixed the problem so quickly after I gave you the admin rights to my blog. It looks great.
You've fixed my issue! THANK YOU!!
ReplyDeleteThis worked thanks. I do have another question. I can't leave comments on Blogger blogs when using Firefox, but no problem when using Chrome or Safari...any idea of how to fix this?
ReplyDelete@ Geri Centonze, well, generally speaking, some templates are not compatible with all browsers that's why you, and many others, face such issues.
ReplyDeletethanks a lot!
ReplyDelete