How to Add a StumbleUpon Button to your Blog

Posted by Mrs. Mecomber

December 9, 2007

I love StumbleUpon. It’s a type of social network, but of websites, not people. Created originally as a Firefox addon, it has expanded into a whole community meetinghouse. There’s a great toolbar you can download at the StumbleUpon site. You can start up an account with StumbleUpon, choose your interests, and surf websites under those topics. But it has a catch:

StumbleUpon will only take you to the websites that have been submitted by StumbleUpon users.

So, there are gaps. If users have not submitted a good deal of, say, travel blogs, then the surfing of your interest in travel blogs will be quite brief. I posted about this here, at my travel blog.

At the StumbleUpon website, you can download the handy toolbar and learn all about it there. I’m here to show you how to install the StumbleUpon button to each and every post in your Blogger blog. If you have a different kind of blog (like Wordpress), do a Yahoo! search and you’ll find a plethora of tutorials to help you there. Or you might find this helpful.

What you need to do is tinker with your Blogger template here. The first thing you need to do is get the SU button and download it. You need to upload it onto a photohosting service in your own account (say, Photobucket). You can find an assortment of buttons here at SU’s site.

If you have an old Blogger blog, there are some good instructions here. But if you have a New Blogger blog, those directions won’t work for you.

Once you’ve got your SU button uploaded, go to your Blogger Layout page. Click “Edit HTML.” Look for the small checkbox that says “Expand Widget Templates” and check it. The page will reload right away. Now, before you start changing your template, be sure to save it. Click on the link “Download this template” and save the file to a safe place in your computer. Should your template tinkering go wrong, this template can be uploaded and you’ll have your old template back. (It is also a good idea to save any important widgets you have. Blogger wipes out widgets whenever you change your template).

OK, so in the template html code box, you’re going to carefully scroll down, maybe halfway or so, looking for this line of code:

<div style=’clear: both;’/> <!– clear for photos floats –>
</div>
<div class=’post-footer’>
<p class=’post-footer-line post-footer-line-1′>

Below that area, put this in:

<!– StumbleUpon Button Begin –>
<a expr:href=’”http://www.stumbleupon.com/submit?url=”+ data:post.url + “&title=” + data:post.title’ target=’_blank’><img alt=’Stumble Upon’ src=’YOUR_STUMBLEUPON_PHOTO_URL_HERE’/></a>
<!– StumbleUpon Button End –>

Where you see the YOUR_STUMBLEUPON_PHOTO_URL_HERE, put in the URL of the little StumbleUpon button you’d uploaded to your photohosting site. Be sure is is inbetween the apostrophes in the code above, and be sure it begins with http://

Before you click on “Save Template,” click on “Preview” so you are sure you have the button just where you want it. Now, everyone’s template is different. If the button is in the wrong place for you, try putting the StumbleUpon button code in a different (but nearby) area. Because I have a photo of my signature at the end of each post, and I wanted my SU button after my signature, I had to paste the code below the URL for my signature.

When you are sure you have things just as you like, click on the “Save Template” button and the changes will be saved and made permanent.

It is not hard to add a button (or anything) to the code. For me, the hardest thing is getting it exactly where I want it, because I am picky.

Now, whenever anyone browsing your site thinks your post is worth sharing, they can add it to StumbleUpon’s collection of favorited sites. And if you enjoy an exceptionally good post on a blog, be sure to stumble theirs, too!

A web development agency is not only responsible for coming up with new web templates for the site, but is also responsible for its seo. Using powerpoint templates is the thing of bygones. Anyone with even a basic web development degree can work out a beautiful script in no time. The use is as easy as taking a prepared resume template and entering your details. With more web development courses, you can mould any template as easily as a cv template.