Pages

Blogspot Tutorial: Add StumbleUpon Button in Posts

Add StumbleUpon Button in Blogger for Traffic

StumbleUpon is a popular social bookmarking site where users share their favorite web pages. You can add StumbleUpon button in the footer of each post. This button would make it easy for readers to share your blog content with the rest of the world. This can drive more traffic to your blog.

Lets Add the StumbleUpon Button!


1- Log in to your Blogger account and go to Design then Edit HTML tab.

2- Check Expand Widget Templates option and the page will automatically refresh.

3- Find the following line of code:

<data:post.body/>

The above code might be in this form:

<p><data:post.body/></p>

4- Paste the following code right after the above code:

<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; +data:post.url'><img alt='StumbleUpon' border='0' src='http://www.stumbleupon.com/images/small_su_logo.png'/>
</a>


5- Save your template and you're done.

Want More Buttons?


StumbleUpon has introduced many new badges/buttons with clear instructions, feel free to give 'em a try. Here is the link:

http://www.stumbleupon.com/buttons/

33 comments:

  1. didn't work - message to say the code was not well formed

    ReplyDelete
  2. @ Anthony James Barnett, sorry my bad...

    I missed a "/" which was causing this error, paste the code again, it is ok now...

    ReplyDelete
  3. It works!! Merci beaucoup, mille merci (many thanks)...

    ReplyDelete
  4. @ Annick Labeca, you're welcome....

    ReplyDelete
  5. Every other tutorial on this subject said to replace the post.body code with the SU code, thank you for posting this! Finally got it to work.

    ReplyDelete
  6. Fantastic. It worked for me. Another site had REPLACE that line of html, rather than post your code UNDER it.
    I now have it running on my site.
    Thanks for the help.
    Si

    ReplyDelete
    Replies
    1. it absolutely did not work for me! No response but at the same time no change. see for yourself http://sherina89.blogspot.com
      I know you are probably crazily busy but please help me.

      Delete
    2. Hi Sherina, you've other buttons installed, don't worry about Stumbleupon button.

      Delete
  7. Woo-Hoo! I did it! Like others stated, paste the code AFTER said code. Do not replace it like it says on StumbleUpon site. Thanks :)

    ReplyDelete
  8. I don't seem to have that line of code (I searched for it using Ctrl-F). Can I insert this like somewhere else?

    ReplyDelete
  9. @ Marian, make sure you first check the "Expand Widget Templates" box and then search for <data:post.body/>. It must be there because this tag is responsible for the body of your post!

    ReplyDelete
  10. Man, I have been trying to figure this out for literally weeks. Thank you so much, truly!

    ReplyDelete
  11. Thank you so much for your post! I wanted to put the button as a gadget at the top of my Blog page, so I pasted your code into the HTML/JavaScript gadget & it worked perfectly!!

    ReplyDelete
  12. Unfortunately, I cannot find that line of code, I am using the color paper if that can help you help me.......Please help!

    ReplyDelete
  13. Hi Mural,

    Please gimme your blog address!

    ReplyDelete
  14. http://moosicalbovine.blogspot.com/

    I meant to say color paper template...........

    ReplyDelete
  15. Hi Mural,

    Search for <data:post.body/> but make sure to check Expand Widget Templates before that.

    ReplyDelete
  16. This is well-done advice. I easily added the HTML to my blog: http://dappervagabond.blogspot.com/

    A tip I came up with to quickly find the correct spot in your blog's HTML to insert the StumbleUpon button is:

    Right click inside your blog's HTML
    Select all
    Copy
    Paste into a word document
    Do a search for the HTML you're looking for (the post/data string)
    Note about how far down in the document it is
    Scroll about that same distance down in your blog HTML
    It helps to also note the two lines ahead of the post/data script.
    Hope you all have as easy of a time at it as me.

    ReplyDelete
  17. @ Mayla, instead of doing that just check Expand Widget Templates and search for the code in the template by pressing Ctrl + f keys.

    ReplyDelete
  18. How U Create Comment Box This Way Tel Me The Code

    Send on My Mail Id: online.internet01@Gmail.com

    ReplyDelete
  19. @ News Guru, which comment box you are talking about???

    ReplyDelete
  20. I Am Asking Abt Which Is Below The Mention "Other Recommended Posts on Hacks, Social Bookmarking, Tutorials" Point [How Posted Comment Scroll Give Me Coding Abt This]

    ReplyDelete
  21. @ News Guru, this is a Related Posts hack, search Google and you'll find a lot of these hacks for Blogger.

    ReplyDelete
  22. why can't i get this to work!!!!? help me

    ReplyDelete
    Replies
    1. Hi Dana, this is an outdated tutorial. Please email me your template file, I'll try to help.

      levisinside0@gmail.com

      Delete
  23. Thanks so much - it worked for me! If I want to add a facebook like button for each post, can I just add it where the Stumbleupon code finishes? Thanks so much:)

    ReplyDelete
  24. When I log into my Blogger account I don't see an option for "Design". Would this be the Template? If so, I'm not seeing an "Expand Widgets Template" choice either. Help! :-) Where should I be looking?

    ReplyDelete
    Replies
    1. Hi Judy, Blogger has recently made some changes. Just go to the "Template" section. Click "Edit HTML" and search the code mentioned in the tutorial. Please note that the code might be in following form:

      <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>

      Delete
  25. I couldn’t find data:post:id or any of the other terms. Could it be that they replaced the word “post” with “blog”? I see that in a similar set up. My blog is www.ask-roxy.com

    ReplyDelete
    Replies
    1. Hi Roxanne, sorry for replying so late :( Well, this is an outdated tutorial and since StumbleUpon is not so popular anymore, I've not updated the tutorial. Kindly use Blogger's default sharing buttons.

      Regards,
      Bilal

      Delete