How to Enable Official Share Buttons in Blogspot/Blogger Templates


Blogger has officially announced sharing buttons. These buttons let your readers share posts on social networks like Twitter, Facebook & Google Plus. 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. In this post, I'll explain how you can enable official share buttons.

First, Enable the Share Buttons!


Enabling share buttons under Blogger posts is very easy. Just go to Layout. 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 Do Not 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 follow these steps:
  1. Open the Template section.
  2. Blogger Updated Dashboard
  3. Click the Edit HTML button.
  4. Blogger Edit HTML Button
  5. A new window will open. Click the Proceed button to start editing.
  6. Blogger Proceed Button
  7. Check Expand Widget Templates option. The page will automatically refresh.
  8. 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>
  9. That's it. Click Preview button and you will see share buttons right under the post body. After that, save your template.

Important: After saving the template. Make sure that the buttons are enabled in Blog Posts widget as described in the previous section of this tutorial.

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 == &quot;item&quot;'>
<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.

138 comments:

  1. 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
  2. @ Daniella Echeverria, gimme your blog address and also tell where you want the share buttons to appear!

    ReplyDelete
  3. good job. thanks for the info this is cool.

    ReplyDelete
  4. Finally, 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
  5. @ Carlota, please provide your blog address!

    ReplyDelete
  6. Thank 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.
    Please take a look at www.bombance.net to see what I mean. Thank you!

    ReplyDelete
  7. @ MC, just check Expand Widget Templates and search for this line of code:


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

    ReplyDelete
  8. I had been wondering what the problem is. Glad I was able to google this page and find the solution!

    ReplyDelete
  9. Thanks - this solved my problem easily. :)

    ReplyDelete
  10. I 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?

    ReplyDelete
  11. I am using a new template and none of the features of configure blogposts are showing up.
    http://torydrroy.blogspot.com

    ReplyDelete
  12. I have the same problem too. Also, the buttons are GRAY...

    thanks!

    ReplyDelete
  13. @ 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.

    ReplyDelete
  14. Thanks 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.

    ReplyDelete
  15. I 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>.

    Thanks for any assistance. I'd like the share buttons to appear below every post.

    ReplyDelete
  16. @ Seth C. Burgess, if share buttons doesn't appear then you've to manually add the code as described above.

    ReplyDelete
  17. same problem as daniella

    htttp://torydrroy.blogspot.com

    ReplyDelete
  18. @ Roy Eappen, send me your template and also mention where do you want the share buttons to appear.

    levisinside0@gmail.com

    ReplyDelete
  19. Hey! Good work, but I have the same problem as Daniella, and I don't even know if I use an old template.
    Please help!

    http://aleka-rock-rose.blogspot.com/

    Sarah.

    ReplyDelete
  20. Oh, and I would like them to appear the normal way, under the labels I guess.
    Sarah.

    ReplyDelete
  21. Sorry, I saw that it wouldn't look too good under the labels, maybe beside them or beside comments...
    Thanks!

    ReplyDelete
  22. 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!

    ReplyDelete
  23. Hi Bilal,
    I'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/)

    ReplyDelete
  24. Just wondering... Is there away to make the "share buttons" in color? Mine are gray until you scroll over them.

    http://thepinckney5.blogspot.com/

    ReplyDelete
  25. @ 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.

    ReplyDelete
  26. Nite tut! Easy to follow. Thanks!

    ReplyDelete
  27. @ Sunshine Sarah, send me your template file.

    levisinside0@gmail.com

    ReplyDelete
  28. @ Hydrangea Girl, send me your template file.

    levisinside0@gmail.com

    ReplyDelete
  29. I use the
    code 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

    ReplyDelete
  30. Thanks very much. It was driving me crazy, because I could not figure out what I was doing wrong.

    That fixed it, easily.

    ReplyDelete
  31. Great stuff! Thanks for all the help! :)

    ReplyDelete
  32. gr8 work... thank u for the solution :)

    ReplyDelete
  33. thanks 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
  34. @ Blu11, in Edit HTML tab, check Expand Widget Templates. Then search for the share buttons code which is:

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

    ReplyDelete
  35. Thank you, Bilal! :) Works perfectly!

    ReplyDelete
  36. I 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
  37. @ Hazel Manzano, make sure after adding the code, you've also enabled the buttons from Page Elements tab as explained above.

    ReplyDelete
  38. thank you thank you thank you! worked for me :)

    ReplyDelete
  39. thank you very much for the tips, the sharebuttons finally showing up,

    ReplyDelete
  40. thank u so much ...

    ReplyDelete
  41. what an excellent post! thank you so much!

    ReplyDelete
  42. Thankx for the instructions, was very helpful.

    God I hope blogger does something about the greyed out look of the Share buttons, looks a little silly!

    What were they thinking??

    ReplyDelete
  43. Greyed out Buttons! You can barely spot them. Thumps down! But better than nothing. :)

    ReplyDelete
  44. @ James Felic, you're right, Blogger must improve these buttons.

    ReplyDelete
  45. do 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 @_____"

    ReplyDelete
  46. I'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
  47. @ Peyton, send me your template file:

    levisinside0@gmail.com

    ReplyDelete
  48. @ Lesa McMahon {MyFreeEducation}, I don't know how to customize these buttons. However, for full control, you can use the official Twitter buttons:

    http://www.betatemplates.com/2010/08/blogspot-how-to-add-official-twitter.html

    ReplyDelete
  49. Thanks, I'll keep searching. I may just have to remove the Twitter icon and add other RT option that can be customized.

    ReplyDelete
  50. Hey!

    I 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

    ReplyDelete
  51. @ Lis, that's a strange problem. Did you tried by reinstalling the code from this tutorial??? Maybe that will help.

    ReplyDelete
  52. Hello there :)

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

    ReplyDelete
  53. @ Julie Groenewald, send me your template file.

    levisinside0@gmail.com

    ReplyDelete
  54. I think they're pretty nice, but they would be much better if we could pick colors or replace the images.

    ReplyDelete
  55. Hi Bilal,

    Thanks 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 ^_^

    ReplyDelete
  56. @ Xing Ying, please subscribe to my YouTube channel. I'll post a video within a week regarding this :)

    ReplyDelete
  57. I 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:

    http://www.minipennyblog.com

    ReplyDelete
  58. @ Chaplinnn, please send me your template file.

    levisinside0@gmail.com

    ReplyDelete
  59. this has been bothering me for a long long time...thank you!

    ReplyDelete
  60. I 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.

    ReplyDelete
  61. This 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

    ReplyDelete
  62. Thank you so much for explaining the part about why it might not work and how to fix it.

    ReplyDelete
  63. Hi,

    This is great info, thanks. Wondering if you can tell us how to add the Email this page, Share button on one line?

    Thanks again

    ReplyDelete
  64. @ Jaenne, email me your template file.

    levisinside0@gmail.com

    ReplyDelete
  65. This comment has been removed by the author.

    ReplyDelete
  66. Hi there,
    thank 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

    ReplyDelete
  67. 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!!

    Thanks again
    Ildi

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

    ReplyDelete
  69. I'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
  70. @ Ildi-The craftin mama, Avery Olive, cherrycheery & Sammy V, please check this post:

    Need Help? What is the Best Way to Get Help From ME?

    ReplyDelete
  71. Do you have any idea what I have to do, to make the buttons show?
    I 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.

    ReplyDelete
  72. Thank you so much for your help!
    Amazing how you fixed the problem so quickly after I gave you the admin rights to my blog. It looks great.

    ReplyDelete
  73. You've fixed my issue! THANK YOU!!

    ReplyDelete
  74. This 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
  75. @ Geri Centonze, well, generally speaking, some templates are not compatible with all browsers that's why you, and many others, face such issues.

    ReplyDelete
  76. Thank you!!! This was really helpful. For some reason in Blogger the only templates I can find that have these share buttons already in them is the "dynamic view", which I don't want!

    ReplyDelete
  77. Hi I was wondering if you could help me?

    I am having the same problem and have tried to copy and paste the code etc but they're still not showing up. I have put a new template up so that may be it. Im a complete novice with this but would appreciate your help greatly.

    thisgirlonfilm.blogspot.co.uk if you want to look

    ReplyDelete
    Replies
    1. Hi Liza, your blog is no longer active.

      Delete
  78. YOU ARE AWESOME! Thank you so much for your easy to follow how to!

    ReplyDelete
  79. hey! sorry to be such a bother.. but could you please help me?
    when i expanded the widget template, there were two data:post.body/>
    one was:

    div class='post-body entry-content'>
    data:post.body/> b:if cond='data:post.hasJumpLink'>
    div class='jump-link'>
    a expr:href='data:post.url + "#more"' expr:title='data:post.title'> data:post.jumpText/> /a>
    /div>
    /b:if> div style='clear: both;'/>
    /div>

    and the other:

    div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>
    data:post.body/>
    div style='clear: both;'/>
    /div>

    i've tried putting it at the first one and the second one (one by one) but it didn't work.
    I've tried putting it in both at the same time didn't work out either~
    i'm getting confused with all the codes now~ @.@ hahahaha~

    what should i do?

    ReplyDelete
    Replies
    1. Hi Shaids, please email me your template file:


      levisinside0@gmail.com

      Delete
  80. Hi! Can you please help me? Im having a hard time. My "comments" like is under my "post title" which should be beside like the labels and things like that.. I want it to be under the post itself not the post title. Please? HEEELP!

    ReplyDelete
    Replies
    1. Hi Cece, I've seen your blog. There is no "Comments" under the post title or post body. What are you talking about? Kindly explain :)

      Delete
  81. Thank you! This helped me!

    I have one question though! I'm not able to move "comments", "tags" or the share buttons around.

    How can I move them? For example If I'd like the "comments" link to be aligned right. Or if I wanted tags and comments on the same row and share buttons on top of them.

    Here's my blog: http://www.dluxedition.com

    Thank you!

    ReplyDelete
    Replies
    1. Hi Kittynail, your blog is not opening :( Please check :)

      Delete
    2. Hey! It's not? The address is correct. Please try again: http://www.dluxedition.com. You have to type in the "www", other wise it won't work! :)

      Delete
    3. Hi Kittynail, please email me your template file.

      levisinside0@gmail.com

      Delete
    4. Hey!

      I just e-mailed you the template! Thank you! :)

      Delete
  82. thanks. this was driving me crazy for a while and finally sorted out

    ReplyDelete
  83. Thanks for a very helpful and useful article. I must though point out two problems in the advice: 1) The text talks about "replacing" with som other code, but the example is not "replacing", it is "adding" extra code under . 2) The code to search fore, , was in my blog code to be found two places!! I have added the decriped code the first place and everything seams to work, but the this text is confusing due to the mentioned problems, and what had happeded if I followed it close and had replaced in stead of added, or added the new code the second place in stead of the first place?

    ReplyDelete
    Replies
    1. Hi Martin, Thanks for your suggestions. Unfortunately, I'm no longer accepting any new requests. However, you can get premium support starting from $10.

      Delete
  84. My colored links just recently turned gray. New links don't work, and some of the older links don't work. Why? How do I fix this?

    ReplyDelete
  85. My links/share WERE orange, Now they're gray.

    New links don't work, and some old links don't work.

    ReplyDelete
    Replies
    1. Hi Jay, I've checked your blog and the share buttons are working correctly. Which blog are you referring to?

      Delete
  86. Hi
    I cannot find either of the code pieces mentioned.
    Please help. I am not very tech-savvy but I did check more than once and got a 15 yr old to do it as well. Thanks,

    ReplyDelete
    Replies
    1. Hi Suchismita, share buttons will not appear on your "The Elsa Simba chronicles" blog. However, it should work on "Out of my Mind" blog.

      Delete
  87. thank you soooooo much for this post! Like some of the girls that posted before I had a problem with the share bar showing up.. but after skimming thru the html I was able to get the link right where I wanted it!!!

    ReplyDelete
    Replies
    1. Hi Nicole, kindly link back to betatemplates.com. I'll highly appreciate it :)

      Delete
  88. I could not find "data:post.body" anywhere. I'm using the new template though~

    ReplyDelete
    Replies
    1. Hi yaya, I'm no longer accepting any new requests. However, you can get premium support starting from $10.

      Delete
  89. @bilal need a help pls....
    I have added the share button...
    but its howing in the top right corner of my page,,,,,
    but i want those button just below my post.....

    so pls help me...
    my blog: www.andro-park.blogspot.in

    ReplyDelete
    Replies
    1. Hi Abhijit, I'm no longer accepting any new requests. However, you can get premium support starting from $10.

      Delete
  90. hey! sorry to ask the same question like Shaids Datu-Maki.. but could you please help me?
    when i expanded the widget template, there were two "data:post.body/>"..
    I put the code on the second "date: post.body />" but is not working :(
    please help me :)
    Camelia
    http://cameliasirli.blogspot.ro/

    ReplyDelete
    Replies
    1. Hi camy, I'm no longer accepting any new requests. However, you can get premium support starting from $10.

      Delete
  91. Hi, I have my share buttons on my blog but when I click on them it brings me to a page that says "Sorry the page your looking for does not exsist" ? Confused ...Help Please?

    http://scherylboughton.blogspot.com/

    ReplyDelete
    Replies
    1. Hi Scheryl, I'm no longer accepting any new requests. However, you can get premium support starting from $10.

      Delete
  92. Hi Bilal, I want my share button to appear on every post. I followed your instructions however I still can't see the share button appearing anywhere. I've also enabled the share button but no luck. Please help.

    ReplyDelete
    Replies
    1. Hi Sukhbir, you are using a custom template. That's why tutorials are not working on your blog.

      Delete
  93. Thank you! This did help me with my blog.

    ReplyDelete
  94. HALLELUJAH. That should not have been so hard, but it took me ages to find the solution!

    Thanks :)

    ReplyDelete
  95. Thank you! That worked wonderfully! :)

    ReplyDelete
    Replies
    1. Hi Jamie, thanks for commenting. Please link back to this blog. I'll really appreciate it. Thanks.

      Regards,
      Bilal

      Delete
  96. I am using the "watermark" template, I have enabled the share buttons in the layout, however....they still do not show up in my posts!!
    Blogger has re-designed the page HTML and there is not a button to click expand anymore. I searched for the code anyhow, but no luck.
    Can you help??

    ReplyDelete
    Replies
    1. Hi Sissy, please email me your template file.

      levisinside0@gmail.com

      Delete
  97. Hi

    Do you know if you can get share buttons for posts on the homepage and not just posts?

    therealmandem.blogspot.com

    ReplyDelete
    Replies
    1. Hi Cee, I don't think that is possible :(

      Regards,
      Bilal

      Delete
  98. Same as Sissy, there's no "expand widget" button, there's only "jump to widget" (also didn't get the warning and the "proceed" button). If I knew which one, I'd jump to it!

    I also tried searching for code, no luck.

    Could you update this info? I'm sure many people would like to know! I tried to deal with this months ago and got nowhere, picking it up again...

    ReplyDelete
    Replies
    1. Hi Mycologita, sorry for inconvenience. I'm updating my tutorials one by one. Hopefully this tutorial will also be updated in some days.

      Regards,
      Bilal

      Delete
  99. Wait! Wait! I think I found it! There are very tiny arrows running along the left-hand side of the HTML--it's expanding lines of code--I'll look for the "" there! I bet I find it!

    ReplyDelete
    Replies
    1. Hi there, yes you are right. Actually Blogger has changed the design a bit and I have not updated the tutorial yet.

      Delete
  100. Hi,
    I had the same problem as daniella but then found the post-footer-line post-footer-line-1 code and added it under that, but i wanted it under the comments on its own separate line. do you know how could get it on it own separate line?

    thanks!

    bribyday.blogger.com

    ReplyDelete
    Replies
    1. Hi Brittany, you are using a custom template. You can hire me to fix this issue for a small fee :)

      levisinside0@gmail.com

      Regards,
      Bilal

      Delete
  101. I followed the instructions in the tutorial and the share buttons still won't show up on my blog.

    somigee.blogspot.com

    ReplyDelete
    Replies
    1. Hi Somya, email me your template, I'll see if I can fix it.

      Regards,
      Bilal

      Delete
  102. Hi!

    Can someone help me? I put a template and i did all the changes in but it doesn't work, Following the instructions in this post, I can see the buttons but the whole text of the post disappears... (i can only see the title) Thank U!!

    ReplyDelete
    Replies
    1. Hi Zuecos, you are using a custom template that's why this tutorial is not working for you. Please contact me via email to fix this issue.

      levisinside0@gmail.com

      Regards,
      Bilal

      Delete
  103. Hi! I don`t see my share buttons after blog post. I recently changed blog template (Sora) and I have tried everything but I can not see them ? Can youir help me a little bit. here is my blog - http://magic-sweet-cuisine.blogspot.com/
    Also I have problem with SORA template in the end of the post (you can see their buttons and picture)
    Kind regards,
    Iva

    ReplyDelete

Note: All comments will be moderated.