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

392 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. 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
  5. Never mind, just figured out the problem (click "expand widgets" button!) :) :)

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

    ReplyDelete
  7. 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
  8. 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
  9. what do you mean by modded ???

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

    ReplyDelete
  10. its awesome bro, thanks for share.

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

    ReplyDelete
  12. @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
  13. cool apps would definitely try this one. keep on sharing

    ReplyDelete
  14. 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
  15. Hey, i can't find these codes on my expanded widget html.

    please hep! thanks!

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

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

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

    ReplyDelete
  19. 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
  20. 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
  21. Thank you for the post. A very good tutorial. It works fine.

    ReplyDelete
  22. 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
  23. 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
  24. @Εκείνος - 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
  25. thanks alot 4 dis but i want tweat button like u hav on top of ur post

    ReplyDelete
  26. 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
  27. Great, and thanks for the style advice IlLusioN!

    ReplyDelete
  28. ""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
  29. i am new in blogger. i've apprehensions about adsense program.
    does it really pay? Has anybody here been paid?

    ReplyDelete
  30. 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
  31. 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
  32. Perfect, it worked! now let's spread the news

    ReplyDelete
  33. 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
  34. Thnx for the share. it works with my template!!!

    ReplyDelete
  35. 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
  36. 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
  37. 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
  38. It worked perfectly for me! Yay!

    ReplyDelete
  39. 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
  40. It is nice option to have but blogger could improve them. They are too small in my opinion to have any impact.

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

    ReplyDelete
  42. Done great, solved the bug, thanks

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

    ReplyDelete
  44. 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
  45. Awesome little bit of code. Thank you! How do you edit the code to add the word "Share" like yours?

    ReplyDelete
  46. great!!!!!!!!!!!

    visit
    www.himkannu.blogspot.com

    ReplyDelete
  47. 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
  48. @ 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
  49. 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
  50. Wow, I wrote code. And it worked! Thanks.

    ReplyDelete
  51. 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
  52. Any chance of getting more share buttons, like Reddit, Delicious, Stumble Upon, etc.?

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

    ReplyDelete
  54. @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
  55. 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
  56. thanks for helping ...very nice......

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

    ReplyDelete
  58. 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
  59. 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
  60. Okayy...! I got it...
    Thanks so much for your sharing :)

    ReplyDelete
  61. 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
  62. 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
  63. Best Reply you get from this site!
    This site just rocks :))

    ReplyDelete
  64. 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
  65. 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
  66. Thank you so much! It worked so perfect and it was easy to understand. Following this blog. Jessica

    ReplyDelete
  67. 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
  68. 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
  69. works great, thank you. How would I get it all black background vs the default white?

    ReplyDelete
  70. You are my hero--- Thank you!!

    ReplyDelete
  71. 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
  72. @aneesh, brilliant tip on the standardize widget advice, worked like a charm...

    ReplyDelete
  73. 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
  74. 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
  75. 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
  76. 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
  77. It works great for me and my blog is: www.samhaiti.blogspot.com

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

    ReplyDelete
  79. 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
  80. @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
  81. Great post! I followed your instructions in step 5, the third option and it still didn't show up. Any other suggestions? Thanks!

    ReplyDelete
  82. the Printerfriendly button would be a great improvement

    ReplyDelete
  83. Thank you! Worked perfectly.

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

    ReplyDelete
  85. 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
  86. Thanks for the line 3 fix for modded templates!

    ReplyDelete
  87. 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
  88. works like a charm, many thanks folks!

    ReplyDelete
  89. 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
  90. Thanks the widget wasn't showing up! Your tutorial really helped!!

    ReplyDelete
  91. 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
  92. Worked well for me, thank you!

    ReplyDelete
  93. Thanks gentleman..... kirtanchauhan.blogspot.com

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

    ReplyDelete
  95. 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
  96. Best blog ever ! I love this blog ! I Love U !

    ReplyDelete
  97. 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
  98. 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
  99. @Mikedot

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

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

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

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

    ReplyDelete
  103. Great tip. Thanks.

    ReplyDelete
  104. 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
  105. 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
  106. 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
  107. 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
  108. @Anonymous and others - i have added the solution to the post :)

    ReplyDelete
  109. 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
  110. Thanks for your post I was able to get my buttons working because of it.

    ReplyDelete
  111. 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
  112. Perfect solution, I had it working within seconds: thanks for sharing!

    ReplyDelete
  113. 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
  114. Thanks for sharing the buttons and code :)

    ReplyDelete
  115. 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
  116. 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
  117. it's exactly what i need.
    thanks for your sharing.

    ReplyDelete
  118. 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
  119. Thanks a million!
    This was really helpful and well-explained.

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

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

    ReplyDelete
  122. 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
  123. 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
  124. finally the share button appeared!!! So happy thanks!
    xoxo
    MrsM

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

    It works great :-)

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

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

    ReplyDelete
  128. 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
  129. 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
  130. 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
  131. 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
  132. 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
  133. @Gilda - do a search for "facebook like" in the search box at the top :) you will find what you need :)

    ReplyDelete
  134. 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
  135. Just added my share buttons...THANKS A MILL!!! was going crazy .....

    ReplyDelete
  136. 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
  137. @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
  138. 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
  139. thanks a lot! worked fine!

    ReplyDelete
  140. 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
  141. 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
  142. gr8 buddy
    I have a customized template and your code worked so fine

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

    ReplyDelete
  144. 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
  145. Thanks a lot... I have been searching for this for a long time..

    pls check my site.. www.banktestcoaching.com

    ReplyDelete
  146. 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
  147. it works. thanks.
    you can check my blog.

    ReplyDelete
  148. 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
  149. 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
  150. Thanks this helped alot :D
    mozartskull

    ReplyDelete
  151. 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
  152. THANK YOU!!! I spent 1 hour trying to figure it out - until i found this post! thanks!

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

    ReplyDelete
  154. 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
  155. I am having a problem like others before me...when I share the post it is bringing in the first comment, not the blog entry. Any idea how to fix? THANKS!

    ReplyDelete
  156. Thanks for these instructions. Great! The 'share this' one didn't work for me though.

    ReplyDelete
  157. In the name of my blog, thank you for your information, it was very useful.
    Greetings from Romania ;)

    ReplyDelete
  158. Hi Aneesh,

    I was able to use your code to have the buttons show up. But! I do not have the following line of code so I can add the text 'Share' before the buttons themselves. Is there a workaround for this?

    b:if cond='data:post.sharePostUrl'

    Also, the buttons are in black & white but turn color when I hover. I am assuming I can just alter the 'on mouse over' bit, right?

    Thanks in advance for any help you can give me! :)
    Jen

    ReplyDelete
  159. @IlLusioN can u tell me please when i need to add your code? thx

    ReplyDelete
  160. @d3v1l, do you mean Blogger Share Buttons extended or share buttons design changing?

    css code put before ]]></b:skin>


    I did a small tutorial up here

    ReplyDelete
  161. Thank you so much.. It workd so well. Best regards.

    http://sunmang.blogspot.com/

    ReplyDelete
  162. thanks. it's finally working. you could also mention that it is possible to add the share buttons in the footer. adding the code below the



    adds the share buttons under the post, and not in the footer. anyway, the hack is great and it's working :)

    ReplyDelete