Armed with this discovery, I did some research on how I could also tap into this rich traffic resource. I looked around and read some articles, and one of the few things that I really found helpful was on the site of StumbleUpon itself.
If you go to their site, it will provide a few instructions on how to integrate StumbleUpon into your blog posts. The idea is that when people who visit your site sees an article they really like, they will just click on the StumbleUpon icon and they can then provide a review on the usefulness of your article and then send it off to the StumbleUpon sites for others to discover by, well, stumbling.
Of course there’s always the generic StumbleUpon thumbs up on your site as a whole, for the regular stumblers, but for those who have yet to install the StumbleUpon Toolbar on their site, there is no way for them to review your post or blog and submit it to StumbleUpon. All the more reason to integrate StumbleUpon in your blog post to give these particular visitors a nudge in the right direction.
So I was determined to do this whole StumbleUpon blog post integration thing to position myself to getting the much coveted StumbleUpon Traffic. StumbleUpon’s instructions were pretty simple, and you can do it by following the steps they recommended here.
Unfortunately, this presented a big problem for me because I cannot find the <$BlogItemBody$> tag anywhere in my HTML Template. I must have searched a dozen times and still came out empty. So I decided to scour the web and look for tips from other sources on how to integrate StumbleUpon in my posts.
The best I can find was someone suggesting to use the +Addthis button instead. But I already had that installed and integrated in my blog posts! However, the thing with the +Addthis button is that it contains all the bookmarking icons, and I don’t want that. I was determined to just put in my StumbleUpon icon and nothing else.
Necessity being the mother of all inventions, I suddenly found inspiration after more than an hour of failing miserably to put the StumbleUpon icon at the bottom of my post. The source of inspiration was +Addthis itself. I figured that if I was able to integrate the +Addthis button in my blog posts, then theres no reason for me not to be able to do the same with the StumbleUpon button.
So with a little bit of modification, I came up with this code.
<–div–><–a expr:href=’”http://www.stumbleupon.com/submit?url=” + data:post.url + “&title=” + data:post.title’ target=’_blank’ title=’Stumble It!’–><--img alt='StumbleUpon Toolbar' src='BUTTON LOCATION HERE' style='border: 0px; padding: 0px'/–><–/a–><–/div–>
NOTE: TAKE CARE TO REMOVE THE RED HYPHENS WHEN YOU PASTE THIS CODE. OTHERWISE IT WON’T WORK.
A slightly modified version of the +Addthis code that I got from their site.
All I had to do after was insert this code in my HTML template and everything came out fine.
STEP BY STEP STUMBLEUPON INTEGRATION TO BLOGGER
So here’s the step by step instruction of how to integrate your StumbleUpon in your blog posts done my way:
1.Download the StumbleUpon button that you would like to use here.
2.Upload the icon to your favorite photosharing program. I use photobucket.
3.Log-in to your blogger account.
4.Go to Customize, and then click on Edit HTML
5.Tick the Expand Widget Box
6.Look for this tag
<--p class='post-footer-line post-footer-line-3'--/>
7.Place the code right above this tag.
8.Make sure to replace the src with the location of your StumbleUpon button.
9.Click on Preview, and if you’re satisfied,
10.Click on Save Template.
I hope this helps and everything turns out roses for you.