image

Blogger has been rolling out new features to improve the looks and usability of the blogs. Blogger is now testing out a new Social Sharing icon set consisting of Email, Blogger,Twitter(with goo.gl shortener),Facebook and Google buzz buttons. The set looks simple and elegant with some cool mouse over effects. These Sharing buttons are now available in your regular dashboard.If you need to take a peek at these new sharing icons, then take a look at my post page(and try sharing it :P ).

You are still reading. So i guess that you are really interested in implementing these Sharing buttons on your Blogger Blog.

Then don’t wait. Just follow these simple steps

  1. Login to Your Blogger Dashboard
  2. Go to Design > Page Elements and Click on the Edit Button near the Blog Posts Gadget and check the “Show Share Buttons” Option image
  3. You can Drag and Drop the Share buttons and place it where you want.image
  4. Now if everything went right, then you should be able to see the Share buttons on your Blog. If not then read on. :)
  5. If it didn’t appear then don’t worry, That is because you are having a modded template. Just Go to the Edit HTML page under the Design Tab , Check the “Expand Widget Templates” Option and locate
    <p class='post-footer-line post-footer-line-3'>

    Or if that is not there then find

    <div class='post-footer-line post-footer-line-3'>

    Or if that is not there then find

    <data:post.body/>

    and place the following code just below any of these lines[whichever is present in your template].

    <div class='post-share-buttons'>
      <b:include data='post' name='shareButtons'/>
    </div>
    and Save your template.

Google + 1 Button Doesn’t show up

1. If it doesn’t show up, then replace the share button code first.To do that, look for

<b:includable id='shareButtons' var='post'>

in your template. Now delete everything including this line, till the very next occurrence of

</b:includable>
(including this line)

Now we can add a new b:includable block there. So paste the following code there instead of the old b:includable block

<b:includable id='shareButtons' var='post'>
  <b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.emailThisMsg/></span>
  </a></b:if><b:if cond='data:top.showBlogThisButton'><a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.blogThisMsg/></span>
  </a></b:if><b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.shareToTwitterMsg/></span>
  </a></b:if><b:if cond='data:top.showFacebookButton'><a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.shareToFacebookMsg/></span>
  </a></b:if><b:if cond='data:top.showOrkutButton'><a class='goog-inline-block share-button sb-orkut' expr:href='data:post.sharePostUrl + &quot;&amp;target=orkut&quot;' expr:title='data:top.shareToOrkutMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.shareToOrkutMsg/></span>
  </a></b:if><b:if cond='data:top.showBuzzButton'><a class='goog-inline-block share-button sb-buzz' expr:href='data:post.sharePostUrl + &quot;&amp;target=buzz&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=415,width=690\&quot;); return false;&quot;' expr:title='data:top.shareToBuzzMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.shareToBuzzMsg/></span>
  </a></b:if>
  <b:if cond='data:top.showDummy'>
    <div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>
  </b:if>
</b:includable>

2.Save the template, and see if the Plus One button is showing up.If it is then you are done. Otherwise proceed to step 3.

3. Locate

</head>

and just above that paste the following code

<script src='https://apis.google.com/js/plusone.js'/>

and Save the template.Now you should see the +1 buttons on your blog.

Optional Tweaks

  1. Show the Sharing Buttons on Post pages only - Find the Following Code in your template
    <div class='post-share-buttons'>
      <b:include data='post' name='shareButtons'/>
    </div>
    and wrap it within conditional tags as
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='post-share-buttons'>
      <b:include data='post' name='shareButtons'/>
    </div>
    </b:if>
  2. Hide Some of the Sharing Buttons – If you want you can hide some of these buttons using CSS. For example to hide the Blogger sharing button, add the following code above ]]></b:skin> in your template
    .sb-blog{display:none}

    sb-email , sb-twitter, sb-facebook, sb-buzz and sb-blog are the different Button Classes. If you hide the mail or buzz buttons, then it might look a little bad as these have rounded edges,

  3. How to add the text “Share this:” before the Share Buttons? – This was one of the questions asked in the comments.So here is how to do it.Go to Design > Edit HTML and “Expand Widget Templates”.Look for

    <b:includable id='shareButtons' var='post'>
    Just below that add
    <table border='0'><tr><td><b>Share this : </b></td><td>
    Now Look for the first occurrence of
    </b:includable>
    that comes after that. Just above that add
    </td></tr></table>

Got into Trouble with implementing the sharing buttons? Ok leave a comment here and i will try to help you out. :)

405 comments :

  1. No need yo go to draft.blogger.com because even if we activate the sharing buttons there, they won't show up !

    Once we add the second code, we can activate or deactivate theme from Page Element witout going to Draft.Blogger.com

    ReplyDelete
  2. @Soufiane - the sharing buttons will show up(once you check that option) if you are using an un-modded template. Wont show up if its a modded one.i had tested it.

    ReplyDelete
  3. it dosnt show on options.. :(

    ReplyDelete
  4. @johnken - you are on the regular dashboard. logon at http://draft.blogger.com

    ReplyDelete
  5. Neither of the codes you mention appear in my html code so I'm not sure where to insert it. When I check the box it doesn't show up :( http://ediblecville.blogspot.com Thanks for any help!

    ReplyDelete
  6. Never mind, just figured out the problem (click "expand widgets" button!) :) :)

    ReplyDelete
  7. @Libby - updated the post as well :)

    ReplyDelete
  8. I've use this new feature before. But its not work on my blog. The buttons doesn't appears. I dont know why, so I deciding to put the button manually :(

    ReplyDelete
  9. I would love to include these sharing buttons but I tried to find the two snippets of code in step 5 above and neither seems to be present. Any ideas? I'm http://www.inerikaskitchen.com/ Thanks!

    ReplyDelete
  10. Sorry, I hadn't refreshed the page and thus hadn't seen Libby's comment - once I expanded my widget templates it worked fine! Thanks for the tips! I love this site by the way!

    ReplyDelete
  11. what do you mean by modded ???

    Just add the second code, then they will show up in "Page Element" in Blogger standard version ...

    ReplyDelete
  12. its awesome bro, thanks for share.

    ReplyDelete
  13. thanks for sharing this post! I finally have sharing buttons for my blogs!

    ReplyDelete
  14. @Soufiane - if you are using a standard blogger template(without much tweaks to the widgets), then there is no need to add any code to your template.

    ReplyDelete
  15. cool apps would definitely try this one. keep on sharing

    ReplyDelete
  16. As I work on wordpress and i prefer put social buttons manually, by the way this is really god news for blogger platform user now they can also attract users. Thanks for updates.

    ReplyDelete
  17. Hey, i can't find these codes on my expanded widget html.

    please hep! thanks!

    ReplyDelete
  18. Hey there!
    The buttons are showing up but they're not active. I must've taken a left turn somewhere...

    ReplyDelete
  19. thank you so much for this :)

    ReplyDelete
  20. Thanks this worked great (I had to search for the second piece of code).

    ReplyDelete
  21. it doesn't appear on my site.. please check http://astercollection.blogspot.com thankyou

    ReplyDelete
  22. Hi there!


    If you want to change the appearance to 'flat' style (no border and hover effect), add this to your CSS section:


    .sb-email {
    background-position:0 -66px !important;
    }
    a.sb-email:hover {
    background-position:0 -66px !important;
    }
    a.sb-email:active {
    background-position:0 -66px !important;
    }
    .sb-blog {
    background-position:-21px -66px !important;
    }
    a.sb-blog:hover {
    background-position:-21px -66px !important;
    }
    a.sb-blog:active {
    background-position:-21px -66px !important;
    }
    .sb-twitter {
    background-position:-42px -66px !important;
    }
    a.sb-twitter:hover {
    background-position:-42px -66px !important;
    }
    a.sb-twitter:active {
    background-position:-42px -66px !important;
    }
    .sb-facebook {
    background-position:-63px -66px !important;
    }
    a.sb-facebook:hover {
    background-position:-63px -66px !important;
    }
    a.sb-facebook:active {
    background-position:-63px -66px !important;
    }
    .sb-buzz {
    background-position:-84px -66px !important;
    width:22px;
    }
    a.sb-buzz:hover {
    background-position:-84px -66px !important;
    }
    a.sb-buzz:active {
    background-position:-84px -66px !important;
    }

    sample see on my blog: www.Leechermods.com

    ReplyDelete
  23. It worked but I cannot move around the buttons. Even if they seem to move in the Blog Posts Gadget preview, when I save it and see my Blog, they are stuck at the bottom of the posts. Any ideas? Thank you.

    http://girizo.blogspot.com/

    ReplyDelete
  24. Thank you for the post. A very good tutorial. It works fine.

    ReplyDelete
  25. Great help, thanks. I would also mention that I typed SHARE just before adding the new code. Makes the purpose of the buttons more obvious.

    ReplyDelete
  26. Hi and thanks, what about the rating stars - do you have a code for these too? I got the sharing buttons to work by applying your code tag, but it seems that the rating stars also do not appear, when you add them on the dialogue. It would be great if you could help with the code for these too, please :)
    Thanks again.
    /Irene

    ReplyDelete
  27. @Εκείνος - the moving around can be done on standard templates. If you are having a template with highly modified widget codes, then it wont work. Btw there is a slolution(but it may make your blog go worse so take a backup of the template before trying it out.)Click on the "Revert widget templates to default" on the Edit HTML page. and the widget code will be standardized.

    ReplyDelete
  28. It worked just fine. Thank you so much!

    ReplyDelete
  29. thanks alot 4 dis but i want tweat button like u hav on top of ur post

    ReplyDelete
  30. i can't move my share button..please help me http://diadiriku.blogspot.com

    ReplyDelete
  31. For those having problems with the widgets not showing up, if you click on "Revert widget templates to default" just below the HTML section, they will show up.

    The problem I'm having is that when a post is shared via Facebook or Buzz, it only shares the picture from the post, but not the title or the brief synopsis like yours. I'm guessing this is because I have a heavily customized site.

    Any suggestions for getting these to work?

    ReplyDelete
  32. Great, and thanks for the style advice IlLusioN!

    ReplyDelete
  33. ""Go to Design > Page Elements and Click on the Edit Button near the Blog Posts Gadget and check the “Show Share Buttons” Option""


    i dont see Design or page element etc in my dash board???

    ReplyDelete
  34. Thank you so much for posting this--and for alerting me about it with your tweet.

    ReplyDelete
  35. i am new in blogger. i've apprehensions about adsense program.
    does it really pay? Has anybody here been paid?

    ReplyDelete
  36. I am a regular visitor to your blog, like all your post this post is also very good. I will give 10 out of 10 marks.

    ReplyDelete
  37. I used the above on 2 of my blogs and it worked BUT I had to disable because right under the share buttons was a piece of text "ZZ"
    It happened on both blogs...I disabled and tried again with the same result. HELP. I want to use this feature.

    ReplyDelete
  38. Perfect, it worked! now let's spread the news

    ReplyDelete
  39. Is there code you can put in the 'add CSS' option on template designer ie without having to go to the raw template code? The html provided above doesn't work there (probably not surprising to you).
    http://rocketdungeon.blogspot.com/

    ReplyDelete
  40. Thnx for the share. it works with my template!!!

    ReplyDelete
  41. Thanks for the fix. Very helpful.

    Is there a way to move the sharing buttons out of the blog text and into the area with "posted by" and "labels"?

    http://maidstoneinvicta.blogspot.com/

    ReplyDelete
  42. thanks for your information..

    ReplyDelete
  43. This is a nice feature, but it would be broad-minded of Google to include a share button for WordPress and other blogs as well as Blogger!

    ReplyDelete
  44. I'm using a old templet called "thisaway_rose". I clicked on the "Expand Widget Templates" and then saved... I didn't see any changes. Now I know a little about HTML since i've been tweeking my blog for 3yrs and nowhere in my HTML code could I find the three codes listed above.

    Now i'm wondering if your codes only apply to the newly designed templets? I absolutely do not want to change templets because of all the problems everyone's experiencing and I like my blog as is but would love to have all the new features added to my post.

    ReplyDelete
  45. It worked perfectly for me! Yay!

    ReplyDelete
  46. great!!! but... when I share to facebook, instead of showing the text of my post in the preview, it appears the comments left for that post! any idea as to why this happens? thank you so much!

    ReplyDelete
  47. It is nice option to have but blogger could improve them. They are too small in my opinion to have any impact.

    ReplyDelete
  48. Thanks for giving all the options, it worked for me.

    ReplyDelete
  49. Done great, solved the bug, thanks

    ReplyDelete
  50. u give me a lot of options to choose..
    they're all great..
    keep moving forward..

    ReplyDelete
  51. my problem is that since I applied this the 'old' singular facebook 'like' button disappeared even though I haven't removed its code. Anyone an idea? Cheers

    ReplyDelete
  52. Awesome little bit of code. Thank you! How do you edit the code to add the word "Share" like yours?

    ReplyDelete
  53. great!!!!!!!!!!!

    visit
    www.himkannu.blogspot.com

    ReplyDelete
  54. The buttons are in black and white until you roll the mouse over them. Can something be done to make them appear in colour at all times?

    ReplyDelete
  55. @ Petrichor

    add this to your blogger template css section, shows the color on mouse over always. see demo blog: http://leecher-news.blogspot.com
    edit template, select Expand Widget Templates, add just before ]]></b:skin>

    .sb-email {
    background-position:0 -22px!important;
    }
    .sb-blog {
    background-position:-21px -22px!important;
    }
    .sb-twitter {
    background-position:-42px -22px!important;
    }
    .sb-facebook {
    background-position:-63px -22px!important;
    }
    .sb-buzz {
    background-position:-84px -22px!important;
    width:22px;
    }

    ReplyDelete
  56. I have a modded template so not sure if this is the issue, but when I am on the Edit Blog Post section and try to move around where the Share buttons appear it doesn't work. They always appear at the bottom of the post. I would like them to appear on top.

    ReplyDelete
  57. Wow, I wrote code. And it worked! Thanks.

    ReplyDelete
  58. Many thanks, although it was a bit of a challenge to find the line to change in my blog, the fix worked perfectly.
    I very much appreciate your efforts and advice.

    ReplyDelete
  59. Any chance of getting more share buttons, like Reddit, Delicious, Stumble Upon, etc.?

    ReplyDelete
  60. Thank you so much !!!
    u r genius :)

    ReplyDelete
  61. @RadicallyDreaming
    more share buttons with more services such as Digg, Google Bookmarks, Reddit, Delicious, StumbleUpon:
    sample: http://emulemods.blogspot.com/ - see instructions on http://p2pclients.blogspot.com/2010/06/blogger-share-button-extended.html

    ReplyDelete
  62. Thanks for the examples, worked great to add the buttons. However, when I try to restrict to post pages only, the buttons don't show up at all.

    Any other suggestions?

    ReplyDelete
  63. thanks for helping ...very nice......

    ReplyDelete
  64. how do i put "SHARE:" before the buttons?

    ReplyDelete
  65. Very much appreciate the help. For others trying the fix, please note that you may have to scroll pretty far down to find the right line of code that you need to append to. In the case of my blog, it was the second string you mentioned that appeared, i.e.
    div class='post-footer-line post-footer-line-3'
    Nice to have the share links at the bottom of each post. As others have requested, I hope Blogger eventually adds other buttons " i.e. Digg, Reddit, Delicious, StumbleUpon.

    ReplyDelete
  66. I already put both buttons. One problem is that when I put tweeter and Facebook button and between them the code , but it shows me an error message “The element type “div” must be terminated by the matching end-tag”. I try lot and lot.

    ReplyDelete
  67. Okayy...! I got it...
    Thanks so much for your sharing :)

    ReplyDelete
  68. I posted the first time on July 1st and I still haven't been able to make mine work.
    My blog - http://lilyseymour.blogspot.com/

    ReplyDelete
  69. I activated these buttons but couldn't see them, and your instructions worked great, although I must add that if you have the "link within" widget at the bottom of each post, this will post the share buttons above it and it looks weird. Try inserting that code one line further below than instructed here. Worked for me!

    ReplyDelete
  70. Thanks for the instructions!

    ReplyDelete
  71. Best Reply you get from this site!
    This site just rocks :))

    ReplyDelete
  72. Hello

    I implemented the code and the buttons show up, but they show up after my text and not after the complete message...
    Maybe you can see what i mean: www.rubevdb.blogspot.com
    Can someone help me?

    ReplyDelete
  73. I tried to do this from your post,
    and everything from your comments as well

    I still cant get this to work, any advice for me?

    ReplyDelete
  74. Thank you so much! It worked so perfect and it was easy to understand. Following this blog. Jessica

    ReplyDelete
  75. This was an excellent piece of information, without any qualms, at all! I did have the same problem of the share buttons not showing up. This method has worked good. Thanks again! I'm hooked to your site. Cheers! :-)

    ReplyDelete
  76. This worked, thank you so much!

    And for those who say the code shows up after the text and you would prefer it to be in the post footer, look for < p class='post-footer-line post-footer-line-1' > or something similar and put the code right after that. Aneesh mentions this in the original post, but like my template, you may not have line-3 in your code.

    ReplyDelete
  77. works great, thank you. How would I get it all black background vs the default white?

    ReplyDelete
  78. You have done a good job. But not working for me!

    ReplyDelete
  79. Hey, thks a lot! It's working now @ http://luxuryhaven.blogspot.com! Cheers :)

    ReplyDelete
  80. This is NOT working for me. I followed your instructions but the buttons still will not show up on my Blog! HELP PLEASE!!!! I want to use this feature.

    ReplyDelete
  81. @aneesh, brilliant tip on the standardize widget advice, worked like a charm...

    ReplyDelete
  82. Whoo thank for this!! Been trying to get them to show for ages!

    @Frank Brill, the Digg etc buttons can be added already - see http://p2pclients.blogspot.com/2010/06/blogger-share-button-extended.html for examples

    ReplyDelete
  83. Thanks for the tip! One question. If I wanted to preface the buttons with the word "Share:" (or whatever), what would code would you suggest? I've tried several things to add a title to that line and can't seem to find the right code/placement.

    ReplyDelete
  84. nice. when i click share to twitter, it only shares blog name and link. why have a share button under each post of if i cannot post to twitter with blog TITLE as well. anyone know how to configure this?

    ReplyDelete
  85. Can I modify the placement of and add color to the Share buttons?

    I have a StumbleUpon badge right beneath my blog post, but the share buttons show up in B&W further down, beneath "Labels."
    The SU badge code is placed right under
    <..+ div class='post-body entry-content'> (..+ and spaces added to avoid scripting error so I could post this code), so that section looks like:

    <..+ div class='post-body entry-content'>
    <..+p ..+ >< ..+ data:post.body/>< ..+ script src='ht..+tp://w ww. stumbleupon. com/hostedbadge.php?s=1'/>
    <..+ div style='clear: both;'/> <..+!-- clear for photos floats -->
    < ..+ /div>

    1. Could the share button code you provided be inserted after the SU code? Where exactly?

    2. Can the share buttons show up in color? How?

    3. Is this code < ..+ ! -- notes -- > OK to insert anywhere in the template or extended template if I want to add notes to myself?

    ReplyDelete
  86. It works great for me and my blog is: www.samhaiti.blogspot.com

    ReplyDelete
  87. Doesn't work on my very modified blog:-( Tried but no dice

    ReplyDelete
  88. Hi!
    I was wondering why I can't move the share buttons. I modify their position from "edit blog posts" in blogger layout edit, but nothing happens. I would like to place the buttons under the labels (so at the end, just before the comment form) and i would like to have a small title above (like you have) with "Share" or something that i can modify.
    Any ideas?

    ReplyDelete
  89. @Richard Huggins
    @Bogdan
    The buttons appear below the labels if you post the code after
    <..+div class='post-footer-line post-footer-line-3'>
    ..+ added here to avoid error "Your HTML cannot be accepted: Tag is not allowed:DIV" so I can post this message.

    I placed the code after my StumbleUpon code, but the buttons don't appear on the same row, but beneath the SU button. How can I move them in line with SU?

    ReplyDelete
  90. Great post! I followed your instructions in step 5, the third option and it still didn't show up. Any other suggestions? Thanks!

    ReplyDelete
  91. the Printerfriendly button would be a great improvement

    ReplyDelete
  92. Thank you! Worked perfectly.

    ReplyDelete
  93. Thanks a lot. The workaround worked for me.

    ReplyDelete
  94. I have fudged my own template around a bit. I appreciate this info on how to get the sharing buttons to show up. I cannot get my labels to disappear, even when I unclick them. Do you have any advice on that?

    Thanks, Lisa

    ReplyDelete
  95. Thanks for the line 3 fix for modded templates!

    ReplyDelete
  96. Got it to work at last thanks to this couple of lines of code but i wouls like to add "Share" if possible. thanks again.

    ReplyDelete
  97. works like a charm, many thanks folks!

    ReplyDelete
  98. Thanks for the fix - it was driving me crazy that I could get the share buttons on one of my blogs but not the other. Now all is well. :-)

    ReplyDelete
  99. Thanks the widget wasn't showing up! Your tutorial really helped!!

    ReplyDelete
  100. i have tried adding the code, can see it in the preview, but when I try to save the changes, they disappear. Please advise.

    ReplyDelete
  101. Worked well for me, thank you!

    ReplyDelete
  102. Thanks gentleman..... kirtanchauhan.blogspot.com

    ReplyDelete
  103. @IlLusioN Thanks for the code for making the buttons colored. The gray buttons just look inactive.

    ReplyDelete
  104. How to move the buttons to the top of the post.

    If you already have the "quick edit pencil" displayed on your blog (Design, Page Elements, Edit blog posts, show quick editing)...

    then use Design and Edit HTML, and add the same 3 lines of code that are described earlier in this blog, but put them just above the comment "".

    You can see this at: Seek-Lord.blogspot.com

    ReplyDelete
  105. Best blog ever ! I love this blog ! I Love U !

    ReplyDelete
  106. if you want these icons to be in a different area on your posts then you need to put the code he has above in the correct place in your HTML coding. see my blog for an example: http://www.freek12edu.com/

    it could be under the post header, post body or post footer. to center it, use the proper HTML for centering.

    ReplyDelete
  107. I'm using a custom template for my blog and it works fine, but my only problem with it is that the share buttons show up at the bottom of my blog and not next to my blog time stamp information.

    mikedot.blogspot.com

    Can someone help me with this? Thanks.

    ReplyDelete
  108. @Mikedot

    Try adding the Share button code above or below
    <div class='post-footer-line post-footer-line-3'>

    ReplyDelete
  109. Doesn't work for me.. Using the Jellyfish Blogger template

    ReplyDelete
  110. Thanks! The coding help in step 5 worked perfectly for my blog. Appreciate the help! :)

    ReplyDelete
  111. Can you help? Mine is still not working.

    ReplyDelete
  112. Great tip. Thanks.

    ReplyDelete
  113. how do i make the buttons flush left, aligning with all teh other left hand things above it? there is a bit of a space..it's making me crazy...help?

    ReplyDelete
  114. the share buttons are showing up, but they won't line up in one straight line. view here to see what I mean: http://bloomingonbainbridge.blogspot.com/

    How can I fix this? I need them in one line, not two. Any help is appreciated.

    ReplyDelete
  115. Now that I added the code my share buttons are shown but no one can leave comments anymore. I click on the comment button & nothing happens

    ReplyDelete
  116. Thanks - worked perfectly, even making the buttons show up in color. As a few others have asked, "How do you get the word SHARE to appear?"

    ReplyDelete
  117. @Anonymous and others - i have added the solution to the post :)

    ReplyDelete
  118. When I click on 'Like', do others see my name or do only I see it?

    I'm hoping for the latter since you're tutorial worked perfectly and I'd like to add 'like' to my blog.

    ReplyDelete
  119. Thanks for your post I was able to get my buttons working because of it.

    ReplyDelete
  120. share buttons are shown in same line just after my text.
    Also in my blog i pasted given code after
    as my blog did not contain rest of two..
    plz solve this problem out.




    Also quick editing tool is not shown up even it is checked in blog posts options.

    ReplyDelete
  121. Perfect solution, I had it working within seconds: thanks for sharing!

    ReplyDelete
  122. Thank you very very very very much.... I am glad to see the official sharing buttons... First they were not appearing, but as I did what you said, It worked. ..Thanks .. Good Site. But how do you know so many small things???

    ReplyDelete
  123. Thanks for sharing the buttons and code :)

    ReplyDelete
  124. I used your code but now I can't place it where I want it to go. It's way there in the bottom and I want to raise it higher above comments. I tried just dragging it in elements but it wouldn't work. Any suggestions?

    ReplyDelete
  125. oh, and before you reply to my comment I should say THANK YOU THANK YOU for this tutorial. So useful. I really appreciate the time.

    ReplyDelete
  126. it's exactly what i need.
    thanks for your sharing.

    ReplyDelete
  127. Having a problem getting this to show on my modified classic template. not sure if im missing a certain DIV CLASS.
    When editing the html I have no option to turn on widgets as its an old template.
    Any suggestions where to put the code? all the locations mentioned dont appear on my template.
    my blog is http://electriczoo.blogspot.com
    thanks

    ReplyDelete
  128. Thanks a million!
    This was really helpful and well-explained.

    ReplyDelete
  129. Thanks dude .. its worked for me ...

    ReplyDelete
  130. Worked great! I love all these tutorials!

    ReplyDelete
  131. I am using customized lay-out, my question would be how to remove them on my CSS? I will cut them (whole set widget sharebutton) then save template but they remain.

    ReplyDelete
  132. Ok. After following 1 - 3 it didn't work, so I followed steps 4,5, found , placed the code. It worked..

    ...but, the Buttons are located close flush under the last line of the post body, above "read more>>" It's a little distracting fo my visitors

    In Edit I have dragged and dropped the buttons to the very bottom of post under comments etc. However, after Saving, the buttons are back where they were at the start. I have done the usual ie; cleared cache etc Nothing seems to work.

    Is there some way of tweaking the placement of the code in my template/widget?

    How do I make the buttons stay where I put them?

    My blog is: http://magnetic-island-weddings-help.blogspot.com/

    ReplyDelete
  133. finally the share button appeared!!! So happy thanks!
    xoxo
    MrsM

    ReplyDelete
  134. Aneesh, thank you for your answer from June 26, 2010 2:52 AM!

    It works great :-)

    ReplyDelete
  135. Many thanks, it appeared after interting the code

    ReplyDelete
  136. Hi..thanks alot..now its working in my site http://aztricks.blogspot.com

    ReplyDelete
  137. Thank, got it working. How do to move the sharing button to the right side instead of the left?

    ReplyDelete
  138. When I share on facebook it shows a snippet of a comment instead of the post...how do I fix this? Thanks for your code and help.

    ReplyDelete
  139. I fixed with point 5. Now they dissappear. But not on the right place. Same as some persons above! What to do?

    traktatie.blogspot

    ReplyDelete
  140. My share buttons were working just fine until yesterday. The Facebook share button is picking up the text of the first comment of each post instead of the text/photo from the post itself.

    ReplyDelete
  141. Hi,
    I am trying to change the standard share buttons of blogger to the Twitter horizontal counter button. I have tried to put the code below the share codes on the footer But twitter counter button is not working right on the footer. It doesn't take the link of the post to tweet. It shows the main page as a tweet link. Can you help me to modify the code please?

    The code I am trying to modify is:
    http://twitter.com/goodies/tweetbutton

    ReplyDelete
  142. Thank you so much! working fine now!

    Do you have any instructions for the 'facebook like' counter button too? to be placed on the post footer?

    ReplyDelete
  143. @Gilda - do a search for "facebook like" in the search box at the top :) you will find what you need :)

    ReplyDelete
  144. Thanks a million! :)
    I think I'm almost there! I got the Facebook share count right although the facebook like button goes in the post. I couldn't make it lining up with the twitter count on the post footer beside of the author!

    And couldn't get the addthis bookmarking to work as twitter button. It doesn't line up and doesn't pick the post data. Takes only the main page address to share/bookmark!

    I am also trying to put 'Love it' counter button as the link below!

    What I am trying to do is this: Please check the post footer.
    http://carolinesmode.com/stockholmstreetstyle/


    I would appreciate it a lot if it's easy for you to tell me how can I do that!

    Thanks again for your time!

    ReplyDelete
  145. Just added my share buttons...THANKS A MILL!!! was going crazy .....

    ReplyDelete
  146. Hey! I've tried it, but got a problem. When I hit one of those bottoms, I don't get the data:post.sharePostUrl but the real link of my post, and Blogger says the page doesn't exits.

    I mean, where I need something like:

    http://www.blogger.com/share-post.g?blogID=707079334502450236&postID=8477696338422191833&target=blog

    I get:

    http://www.bloggerplugins.org/2010/06/official-sharing-buttons-on-blogger.html&target=blog.


    I hope you can help me =(

    Thank you!

    ReplyDelete
  147. @Marie - seems like you have got some corrupt b:includable code there. Replace it using the code from some other blog of yours.

    <b:includable id='shareButtons' var='post'>
    .....
    ....
    .....
    </b:includable>

    This is how the b:includable looks like.

    ReplyDelete
  148. Hi, Aneesh! Thanks! I've already tried that... I didn't mention that my template has two "Blog" widgets. The ShareButton works perfectly in the main one (summaries), but not in the other (full post) :(

    (= I'd appreciate you help.

    ReplyDelete
  149. thanks a lot! worked fine!

    ReplyDelete
  150. First of all thank u for your useful tutorial!

    i have a modded template. i followed your instructions and it worked! the only problem i have is that i can't move around as i wish the share button and also it appears not in one line.
    http://paroledicioccolato.blogspot.com/
    hope u can help me with this

    ReplyDelete
  151. Thanks for the post. It helped me figure out what was wrong in the code in my blog. Now its working fine.
    http://tryst-with-the-shutter-bug.blogspot.com/

    ReplyDelete
  152. gr8 buddy
    I have a customized template and your code worked so fine

    ReplyDelete
  153. Hello,http://teesmommyclub.blogspot.com/
    I need help. They are there but aren't visible.

    ReplyDelete
  154. How do I use the tip allowing the share buttons to only show on posts, but still have them visible at my blog's address? IE - your tip works when I am at the web address for a specific post only (example: http://jaebrokerage.blogspot.com/2010/10/holiday-season-prepare-now-profit-later.html), but if I am reading the post on the main home page without selecting a specific post(www.jaebrokerage.com), the share buttons do not show up. What code so I need to install to correct this exclusion?

    ReplyDelete
  155. Please help. I have my share button but every time I share a post on FB it brings up info under the link of a different post. It's always the same one. It use to bring up the right one now and then and then it seems like it gets stuck. I have noticed that some peoples blogs only brings up a title link and picture. Is there a way to do that because I would rather have no description of the post then to have the wrong one. People have stopped sharing my post as much because of this because it's confusing to their readers.
    I have tried everything...thanks so much! -Mem

    ReplyDelete
  156. Thanks a lot... I have been searching for this for a long time..

    pls check my site.. www.banktestcoaching.com

    ReplyDelete
  157. Thanks so much this was very helpful...I now have share buttons under each post..BUT..they are in black and white, not color!!!

    Is there a workaround so that I can have the pretty color ones too? I'm on a modified Minima..chicprovence.blogspot.com

    thanks for your help!!

    Kit

    ReplyDelete
  158. it works. thanks.
    you can check my blog.

    ReplyDelete
  159. Hi there,

    Everything has worked except my share icons are appearing on TWO lines, not one. (3 icons on first line, 2 icons on 2nd line!)Please help!! Thank you!

    ReplyDelete
  160. Hi..I've managed to add the buttons. But now I can't find the following line to add the "share this" text. I'm using a custom template.



    Is there another set of codes to look for?

    ReplyDelete
  161. Thanks this helped alot :D
    mozartskull

    ReplyDelete
  162. When I share my blogger post on facebook, it only shows the photo in that post, the title of my blog (instead of the title of post) and the description of my blog (instead of the snipet of the post). What can I do to change this? I tried using the fb share button on my post page and also the URL for that particular post, but no difference.

    ReplyDelete
  163. THANK YOU!!! I spent 1 hour trying to figure it out - until i found this post! thanks!

    ReplyDelete
  164. @ IlLusioN THANK YOU VERY MUCH! Finally I was able to add Digg, StrumbleUpon and Delicious thanks your instruction.

    ReplyDelete
  165. Just wanted to show my appreciation and say thank you for the information to help get my share buttons to show as I was not able to get them to do so. This post helped me get them up! THANK YOU!

    ReplyDelete