Herself’s Webtools

Webtools for Webmasters: Scripts, HowTos, Templates, Plugins, Widgets, Tips and Useful Information

Herself’s Webtools header image 1
← How to add Del.icio.us links to your posts How to add ‘reddit’ links to your blog posts →

How to add ‘StumbleUpon’ links to your blog posts

May 14th, 2007 · 13 Comments

First backup your template.

Go to Layout->Edit HTML and click download full template.

Blogger

<a expr:href=’”http://www.stumbleupon.com/submit?” + “url=” + data:post.url + “&amp;title=” + data:post.title’ target=’_blank’> Stumble it!</a>

For Blogger go to your Template->Edit HTML and click expand widgets.
Find <p class=’post-footer-line post-footer-line-3′/>
It’s about three quarters of the way down in most templates.

Then just add the above code just below that line.

Wordpress

<a href=”http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>”> Stumble it!</a>

You will want to edit your template to add the link.
Go to Presentation->Theme Editor

Select Main Index Template, or index.php or what ever the index page is called in your template.

Find the section that has the postmetadata add the above code in there somewhere that looks nice on your template.

See also:
How to add Digg Links to Blogger and Wordpress Posts
How to add Del.icio.us Links to Blogger and Wordpress Posts
How to add Reddit Links to Blogger and Wordpress Posts

Tags: blogger · blogger template · hack your template · how to · wordpress

13 responses so far ↓

  • 1 Wei-Yee Chan // Jun 10, 2007 at 2:58 am

    Thanks for the tip! :-)

  • 2 herself // Jun 11, 2007 at 4:14 am

    You’re welcome!

  • 3 M // Jun 13, 2007 at 3:43 am

    Clearest explanation so far! Consider yourself stumbled.

  • 4 Wei-Yee Chan // Jun 13, 2007 at 8:04 am

    I’ve decided to add a link to this blog on my blog, if you don’t mind.

    >http://chanweiyee.blogspot.com/2007/06/interesting-links-13th-jun-2007.html 

  • 5 herself // Jun 13, 2007 at 11:45 pm

    Thank you!

  • 6 trumpethope19 // Nov 23, 2007 at 8:07 pm

    Maybe I’m a complete blonde, but I’ve read several instructions from several different bloggers online on how to add stumbleupon to my blog and I still don’t get it.

    Do I go to the CSS editor for the theme? (I’m on Wordpress) I can’t find any other type of editor.
    Thanks for the help.

  • 7 admin // Nov 24, 2007 at 9:46 am

    It’s ok, my fault.

    1) If you are using Wordpress then in the Admin area go to Presentation
    2) Click on Theme Editor
    3 ) Go to your index.php template
    You will find a section ( every template is different ) that looks like this

    < ?php the_content(...something);?>

    Put it directly under that
    4) You will also see a file called single.php Do the same thing to that file.

    * backup your template first!!! ( ftp to your site and download it )

  • 8 trumpethope19 // Nov 24, 2007 at 5:46 pm

    Thats the problem. When I go to Presentation there is no Theme Editor to click.

    There is: Themes, Widgets, Extras, Custom Image Header and Edit CSS.

    Is there a program I have to download first to get all of this to work or something?

  • 9 admin // Nov 24, 2007 at 10:43 pm

    I see the problem - you are hosted on the Wordpress.com site. They only allow very limited editing of templates.

    I see they do have a del.icio.us widget but no Stumble upon.

    I played around with it for about a half hour and I don’t see an easy way to add Stumble Upon links. Wordpress doesn’t allow PHP in posts and there is no way to get to the template.

    I don’t see a way to add Stumble links except by hand for every post as long as your blog is hosted there.

    If you replace
    < ?php the_permalink() ?> with the link to the post

    and replace
    < ?php the_title(); ?> with the title of your post

    You can do it by hand for each post.

  • 10 Rodwilliams // Mar 22, 2008 at 6:30 pm

    Please help me. I have carefully searched the body of template after clicking the “expand” box. I can not find

    It is just not there. the closest I find is

    I am using blooger
    thanks, rod

  • 11 herself // Mar 23, 2008 at 12:07 pm

    What I do when I have a huge file to search ( like the Blogger templates ) is to copy and paste the text into your favorite text editing program on your home machine - then search for the text you are looking for.

    I just tried doing this with Firefox and it did not expand the template. If you, like me, are using the beta Firefox, try a different browser. It did expand in Safari for me. So perhaps you can’t find it because your browser did not expand the template for you?

    The place you are looking for is about 2/3rds of the way down the template. Usually right near the line that says ‘quickedit pencil’.

  • 12 MinkMama // Jun 15, 2008 at 2:56 pm

    Hi there, I was overjoyed to find such clear and simple instructions on how to do this because I don’t appear to be able to do a lot of this stuff from the info I’m given by tools like Stumble Upon. However when I went to look for the code:

    it wasn’t in there. I used the control f function and it just wasn’t there.

    I am using Blogger, and the template I am using is Rounders 4. Should I be looking for a slightly different piece of code or am I being really dumb?

    I really want to add the Stumbleupon, Delicious, Reddit etc. functions on to my blog - I am trying to get to know all this web 2.0 stuff so that when I start my business I can add a blog, and try to do it properly.

    So even if I am being really silly, please help!

    Thank you so much,

    MinkMama

  • 13 ljmacphee // Jun 15, 2008 at 3:54 pm

    Right now Blogger is giving me errors when I try to edit the template, but…

    In Rounders4 look for the line
    div class=’post-footer’

    under that is post-footer-line-1

    I can’t test now but just under one of those lines should be about right. Go there, try it, you may have to play with it and go up or down a line or two. But you want it in that general area.

You must log in to post a comment.