This blog has moved here: woorkup.com | FOLLOW ME ON TWITTER @woork
Wednesday, December 12, 2007

Add StumbleUpon button in your Blogger's posts

Social Netoworks are a good resources to generate a costant traffic on your site. Personally I receive a good quantity of visits on this site from Digg (45% of total traffic). I already spoke about hou to add digg button in your blogger template in this post, and now I explains how to add a StumbleUpon button in each Blogger's post.

Select a button
You can select various StumbleUpon buttons like these:

StumbleUpon

<img alt="StumbleUpon" src="http://www.stumbleupon.com/images/stumble7.gif" border="0" />

StumbleUpon

<img border="0" src="http://www.stumbleupon.com/images/small_su_logo.png" alt="StumbleUpon">


How you can see, I used the first button on this site, but, if you don't like these images you can find other StumbleUpon icons here.

Add StumbleUpon code into your Blogger Template

First, save a copy of your Blogger template and after, in Modify Template switch into HTML view. Look for this code:

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

... so, copy and paste the following code below the previous line of code:

<a expr:href='"http://www.stumbleupon.com/submit?url="
+data:post.url'><img alt='StumbleUpon' border='0' src='http://www.stumbleupon.com/images/stumble7.gif'/>
</a>

... and save your template.

Your StumbleUpon button is ready to work! Simple, and useful to attract more traffic on your site :)



Add a retweet counter on your website with ReTweet.comAdd a retweet counter on your posts with TweetmemeHow to install Disqus comments into BloggerImprove the default comment system with Google Friend ConnectAdd TwitThis on your Blogger templateAdd Digg vote button on Blogger Template (update)Add delicious button with counter in your blogger postsPlace Google AdSense below post's title on BloggerAdd reddit button with counter in your Blogger template Add Technorati blog reaction on your Blogger templateAdd Mixx button on Blogger templateAdd DZone button on Blogger templateAdd Design Float button on Blogger templateSome Blogger Tips you probably don't knowAdd Yahoo! Buzz button on Blogger Template

blog comments powered by Disqus
bluedreamer27 said...

i am not yet familiar of how to increase blog traffic but i do so love it
how this stumbleupon button will help my blog?

Stef said...

I read a bunch of sites on this, but this was the only one that actually worked for me. Thanks so much for tip!

Emirhan said...

Hi there,
I was trying to add StumbleUpon to my blogger template but unfortunately i couldnt find p class='post-footer-line post-footer-line-3' .

What sould i look for now:)

Any help would be great. Thanks.Emirhan
www.linkvillage.blogspot.com

WalterLyn said...

Helpful tip. Thanks. I'll use it on my BLOG too

SheR. said...

Thanks for your very clear instructions!!! I've added the icons. The help on SU is helpless.:P Thanks again!

spiderman said...

Thanks for the tip. It works. Only problem, I could only link to the picture from Stumble's site i.e. I tried to link to an icon I uploaded on blogger, but it did not work out.

Antonio said...

Hi spiderman, send me the code you added on your blogger tamplete, so I can take a look....

Antonio said...

spiderman, now it works?

spiderman said...

Antonio,

No, it is not working as the icon is not showing, but the alt text.

This is the link to my blog

http://montrealphotos.blogspot.com

You will see the the "Stumble" text is displayed instead of the picture.

I find it strange that it works when the picture is on stumble web site and does not work when the picture is uploaded to Blogger.

Anyways, it is just a minor detail.

Thanks again for the prompt reply.

Antonio said...

Try to change the image src attribute with this: http://www.stumbleupon.com/images/thumbup1.gif

spiderman said...

I was trying to avoid a hotlink to the site of stumbleupon just out of netiquette.

I uploaded the icon to another of my web sites and linked to it. The icon displays now without any problems :)

Claudia Snell said...

Thank you so much!! I'm with stef (above). I tried a bunch of different renditions of getting this to work and this was the only one that did - perfectly!

Thank you, thank you!

Anonymous said...

Since yesterday I've noticed that if i submit a link via the button on my site I'm seeing this page http://www.stumbleupon.com/newurl.php which is appearing after the article submission. Its as if the submission is stopping after you fill in all the details etc. Has something broken?

Antonio said...

To anonymous: are you logged-in?

Anonymous said...

Thanks, I tried tips from other sites and couldn't ever get it to work. The Stumble button is on my site now, but it is sort of crammed on top of my links/comments & mail buttons.
How do I get it to move down a little?
Thanks

Chief Family Officer said...

Thanks so much for the code, it worked perfectly - whereas the code provide by SU itself always produced an error message. Thanks a bunch - I've dugg and stumbled you.

Mo said...

I searched for TWO days on how to do this.
Clearly, the StumbleUpon directions are WAY out of date at their own site.
Your instructions worked perfectly the very first time!
Thank you so much!

Linda said...

I have tried this over and over and over and I just can't seem to get it to work. I can get the button in the right spot but then it doesn't link to anything at all.

My template is a customized one so I have to go directly into the HTML to make any additions. Is there any advice you can make? Friends have been encouraging me to add the Stumble Upon feature but so far - no go!

My blog's URL is http://mouseski.blogspot.com

askmuslims said...

Hey! after playing around i figure it out but the image wasn't working until i saw your comment. thx for your article.

Mountain Sage said...

All of the instructions for adding stumbleupon that I have found say to add it after code that isn't in my template. I've changed templates and still can't find the codes.

Any ideas?

Eric - InfiniteWebProfit said...

Is this code working on all type of blogger templates?

Doc_Report said...

Don't forget to expand widget templates to find the code.
Also if you don't want to hot link use Google Pages and upload the gif and modify the code to reflect.

PatriCa BB said...

I am not able to add the stumbleupon on each post! Why? The template keeps showing error... Not sure why.. sobbing..

Raj said...

Great tip thanks. I've just added it to my blog on www.newgadgetsguru.com.

sarah said...

thanks for great, simple directions, worked the first time! I tried several others' ideas to no avail, woork roocks!

Zou said...

Thanks it works for me too

Obliv1on said...

Thanks for the great tip, it helped me out a lot.

buckledover.blogspot.com

Jennifer said...

Hi - I use blogger but cannot find the line that you reference in my template.

Any suggestions on what I should do to figure this out? It would be much appreciated!

The template I used is called "minima". I've made a few additions myself, but the general template should still be the same.

Thanks!
Jen

52 Faces said...

Wow thanks Doc_Report - would've been lost without the expand widgets remark.

Jennifer - expand your widgets!

Christy said...

Thanks for the easy walk through, I've always wanted to add the StumbleUpon button but the Blogger directions weren't working for me. Your directions were easy and it only took a couple of minutes to add it, awesome:)

Sly Hoax said...

Wow! It works! You are the man, thank you so much!

I've seen other sites with tiops on how to do this, and it didn't work... even the code provided by stumbleupon doesn't work.. at all.

Once again, thank you! I'll definitely be visiting your blog again.

nyc/caribbean ragazza said...

I did a google search and found your post.

Thank you! I've been trying for days to add the SU button and the SU site was not helpful.

I was finally about able to do it.

Those using Blogger look for div class...not p class if you can't find the latter in your template. It's usually near the quick edit pencil line.

stephchows said...

thanks for the help! quick question if you have a minute, I can get the logo to show up... but the link isn't working... so the button shows up but it's not clickable. Any ideas?

krystyna81 said...

just added it to my blog...thanks for the tip!

ProggerPete said...

This looks like I great idea. Your instructions where easy to follow and I now have digg and stumble buttons on my blog.

Thanks!

Sebi said...

hmm well i also tried the expand widget option and still no go.. for that code any other suggestions? thx

  • Twitter Follow woork on Twitter
  • RSS Feed Subscribe to stay up to date
  • Podcast Coming soon...
  • 0 delicious lovers save
Share your links. Do you want to suggest any interesting link about web design or tech news? Submit your link.
Submit a News