How to Add StumbleUpon Buttons to WordPress

StumbleUpon can be found within the ShareThis plugin’s list of social bookmarking sites. I believe StumbleUpon should be given its own place outside of the ShareThis plugin’s menu because it is a very important social bookmarking site and I want my visitors to be able to share my web sites’ pages with other StumbleUpon members easily.

StumbleUpon has a long list of buttons for you to use on your web site. Their button generator is one the of best I have seen online. It is very user-friendly and it has very clear instructions on how to install it in WordPress.

Here’s How the StumbleUpon Button Will Look on Your Web Site…

If you don’t like these button designs, feel free to Google for more StumbleUpon button designs on the internet.

StumbleUpon’s Integration Code

1

<a href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>"><img src="http://cdn.stumble-upon.com/images/160x30_su_gray.gif"></a>

WordPress Default Theme’s single.php Template

1
2
3

<p class="postmetadata alt">
....................
</p>

Although you may add this code to your index.php and archive.php templates, I would advice against it because it increases your page load times.

What We Need to Do

We need to insert the StumbleUpon code somewhere within the WordPress Loop. If you do not wish to use the default StumbleUpon buttons, please edit the image source (in this example), “http://cdn.stumble-upon.com/images/160×30_su_gray.gif”, to another image on your server or someone else’s server.

StumbleUpon Integration with WordPress with HTML and CSS

1
2
3
4
5
6
7

<p class="postmetadata alt">
....................
</p>
 
<div class="social_news">
<a href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>"><img src="http://cdn.stumble-upon.com/images/160x30_su_gray.gif"></a>
</div>

1
2
3
4
5
6

.social_news
{
	margin: 0px 5px 0px 0px;
	padding: 0px;
	float: left;
}

You may display multiple buttons in a single row with the social_news class. That is how I displayed my voting buttons below. It has a 5 pixel margin on the right to leave a tiny gap in between buttons.