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>
Like