Simple Blogger Tutorials

Add StumbleUpon Badge to Blogger

The best way to gain exposure is by adding a StumbleUpon badge to Blogger which has real-time count that shows how many times your post has been viewed and stumbled.

You can get the button codes from official badges page but here I will explain how to have these badges for Blogger from six different styles that StumbleUpon provides (updated on January 2013).

StumbleUpon Badges for Blogger height=

Step 1: Login to Blogger, go to Template tab, click “Edit HTML” and check “Expand Widget Templates”.

Step 2: Find closing </body> and before it add:

<script type="text/javascript"> 
  (function() {
    var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true;
    li.src = 'https://platform.stumbleupon.com/1/widgets.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s);
  })();
</script>

Step 3: Generate the code for the badge below.

StumbleUpon Button options


Preview and code

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style='float:none;'> <su:badge layout='5' expr:location='data:post.canonicalUrl'></su:badge> </div>
</b:if>

Step 4: Find <data:post.body/> and above/below it (or both) add the above rendering code.

Step 5: Save your template.

Points to be noted
  • layout - StumbleUpon button size ranges from 1 to 6.
  • The codes marked in blue are conditional tags that I have used to show it on every page except for static pages. You can change it, here is an example:
    <b:if cond='data:blog.pageType == &quot;item&quot'>
    {StumbleUpon Badge code}
    </b:if>

14 comments :

  1. It doesn't work for me. When I try to save it gives me this error:
    We were unable to save your template

    Please correct the error below, and submit your template again.
    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The reference to entity "target" must end with the ';' delimiter.

    I tried it with and without the if tag, bot it yielded the same result.

    ReplyDelete
  2. You must have done something wrong within the StumbleUpon script part. It's working fine. Here's a temporary link.

    ReplyDelete
  3. The error was on my part. I accidentally deleted a bracket. Thanks for the tutorial. It's great!

    By the way, is it supposed to be in the actual blog post or floating at the very end of the screen like yours is?
    And if it's the former, I'd love to see the script for the latter :))

    Thanks,
    Alex

    Thanks again,
    Alex

    ReplyDelete
  4. In this tutorial, the SU button will be visible within the blog post.

    For the former one, have a look at Floating share buttons like Mashable for Blogger.

    ReplyDelete
  5. Works for me, thanks for the tip!

    ReplyDelete
  6. This is a great post, very informative.

    ReplyDelete
  7. Hi Raju,

    I wanted to open StumbleUpon popup in a new window to "like". As it is there in the page "http://www.simplebloggertutorials.com/2010/07/how-to-add-stumbleupon-button-to.html" . How do we do that?

    ReplyDelete
  8. Just hitting the StumbleUpon badge will not give you the options to "Stumble!", "I like it!" buttons and people who liked your page. The popup window will only appear if someone (even you) have previously submitted the post to SU and it got indexed.

    ReplyDelete
  9. Thanks for the tutorial.
    For posts that have been submitted, I get the popup.
    For those posts that have not been submitted, I get directed to a page to allow submission. However, the "What's this page about" element and "Select an interest" drop-down only shows "-----" with no items to choose.
    When adding page form StumbleUpon itsel, similar page works fine. Any ideas?

    ReplyDelete
  10. This can be related to your browser and/or StumbleUpon.

    ReplyDelete
  11. Chrome, latest version is my browser. I'll try another. If it's SU, I have no clue!

    ReplyDelete
  12. Hi Raj
    I dont have the option to 'expand widget template' in my blogger template, as er instruction 1.

    ReplyDelete
    Replies
    1. After the new changes you don't need to click “Expand Widget Templates”. Instead click “Edit HTML” button and find for the above code in step 4 by pressing "Ctrl+F" keys on your keyboard.

      Find more about it on Blogger Buzz.

      Delete

Don't SPAM! Read comment policy.

Like