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.

Posted by Vincent on 4 March 2009 8:00 AM in Wordpress Help You can leave a comment, or trackback from your own site. |

Subscribe to our blog through our RSS feed or email to receive updates on more posts like this. post on your favourite social networking or media site to let others know about this post. Help us generate more buzz by submitting/voting for this post with the following buttons.

3 Comments On “How to Add StumbleUpon Buttons to WordPress”

1 Trackback On “How to Add StumbleUpon Buttons to WordPress”

Post a Comment