Adding New StumbleUpon Badges To Blogs

24 March, 2010 - 07:00 AM - 13 Comments

Seeing that my Twittley submit button was bringing me no traffic and virtually now submissions lately I decided to switch my “social buttons” around a little bit and add one of the new StumbleUpon Submit buttons which tracks # of stumbles for articles.

The have lots of badges to choose from and sizes to accommodate just about any blog style. All you need to do is go visit the site, select the badge style you link and get your code. You can also find a plug-in for wordpress, but I prefer to simply add the code manually just by cutting and pasting it into my single.php file.

For those who are curious how my table at the top of my posts looks to set my badges, here is the custom code in my single.php

<table align=”left”><tr><td>
<div style=”clear:both; “>
<div style=”width:40px; margin:1px; float:left;”>
<script src=”http://blogengage.com/evb/button4.php”></script>
</div>
<div style=”width:52px; margin:1px; float:left;”>
<script src=”http://www.stumbleupon.com/hostedbadge.php?s=5″></script>
</div>
<div style=”width:50px; margin:1px; float:left;”>
<a href=”http://www.google.com/reader/link?url=<?php the_permalink() ?>&title=<?php the_title(); ?>&srcURL=<?php bloginfo(‘url’); ?>” target=”_blank” rel=”nofollow external”><img src=”http://img2.pict.com/34/3b/1e/2814787/0/googlebuzz.png” width=”50″ /></a>
</div>
<div style=”width:55px; margin:1px; float:left;”>
<?php tweetmeme(); ?>
</div>
</div>
</td></tr></table>

I just added the following code just above the <?php the_content(‘Read more…’); ?> section in the single.php.

With a little help it is easy to customize and add your own buttons to your single and index.php files and it is less memory intensive to add the script code manually than to use a WordPress plugin, so it is always better to add the code manually if you can.

-Dragon Blogger

Adding Google Analytics to your WordPress Blog I have compiled a list of tips and helpful hints for anyone who needs to add Google Analytics code for...
Manually Add the TweetMeme Submit Button to WordPress This code lets you manually place the TweetMeme submit button exactly where you want on your wordpress posts. You just...
Adding Previous or Next Post Links to your WordPress Blog By adding a simple statement into your single.php you can create links to your next and previous posts directly in...
Designing Blogs For All Browsers One of the most complicated things to do lately is design websites or choose blog themes and templates that render...
Expanding StumbleUpon Network StumbleUpon gives you the ability to follow and connect with friends from FaceBook and Twitter to expand your StumbleUpon network...

Written by Justin Germino (1518 Articles Published)

Working in the IT Industry for over 10 years and specializing in web based technologies. Dragon Blogger has unique insights and opinions to how the internet and web technology works. An Avid movie fan, video game fan and fan of trying anything and everything new.

Follow Justin Germino on Twitter @dragonblogger

Dennis Edell @ DirectSalesMarketing

Nice. Just yesterday I was discussing with my designer the possibility of hard-coding and getting rid of my plugin...this should help.
.-= Dennis Edell @ DirectSalesMarketing´s last blog ..Holy Power Outage Batman, Not Again! Yep, Another Two Days Shot to Hell… =-.

share flag

spam
offensive
disagree
off topic

element321

Great post, I was wondering how you coded the submit buttons. I was about to start coding my own and wasn't looking forward to start from scratch. With your code, it gives me a good start and now I can modify it and add it to where I want it.

Stumble does have a great list of new icons.
.-= element321´s last blog ..Book Review: Problogger Secrets for Blogging Your Way to a Six-Figure Income =-.

dragonblogger

If you use the tweetmeme one let me know, that one requires more special code in your Functions.php (the others will work just putting those lines in single.php)

CJ @ Niche Writing

I like it, thanks for sharing the code too. I don't like the plugins for a lot of reasons, but mainly, more plugins can add to more conflict. I also was not happy with one plugin because it listed 20 social networks when all I wanted was 4 or 5.

This code is small and compact and anytime you can hard code I think it lessens the conflict issue.

Thanks again or sharing.
.-= CJ @ Niche Writing´s last blog ..CreativeAce Grand Opening – Online Store =-.

John@Tandblekning

Do they have web 2.0ish looking buttons for StumbleUpon? That one is gonna go a bit off on mine and I'd like to make it look consistent. Thanks for the tip BTW! :)
.-= John@Tandblekning´s last blog ..Tandblekning Hemma =-.

The only buttons they have are the ones on the link.

Josiah@halo reach

Awesome. I love how these sites are making standardized sizes and designs. Especially like the compact sizes. I might just add this to my own site.
.-= Josiah@halo reach´s last blog ..Flourish =-.

I have noticed an increase in traffic on my smaller sites since adding the StumbleUpon logo, both of my smaller blogs are up 20% for the month after adding the SU badges.

Imran Yousaf

This is the main problem with such plugin that they don't show the number of hits. Same is the case with Google Buzz button plugin. it is not showing hit counter.

BlazingMinds

Nice tutorial on the stumbleupon but, I'm using SexyBookmarks to display my button, but this certainly is an easy way to add the button to any of my other blogs.
.-= BlazingMinds´s last blog ..How Can You Find Good Blog Content Worth Reading? =-.

The only thing I don't like about such plug-ins is they don't show the number of times any particular social media submission was done. I like those metrics at a quick glance.