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).

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

Layout:
Horizontal 1
Horizontal 2
Horizontal 3
Vertical
No count 1
No count 2

---

Float:
None
Left
Right

Show on:
All pages except static pages
Post pages only
Every page

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>