How To Add StumbleUpon Button To WordPress Website

add stumbleupon button to wordpress

StumbleUpon is a website where people stumble to find the quality content. Most of the websites have added the StumbleUpon button.

Do you know how to add StumbleUpon button to WordPress website without using any plugin? Each social networking platform provides the code to add the sharing button.

In this tutorial, you will learn about the method which will help you to generate and add the StumbleUpon button to your website.

Generate Code And Add StumbleUpon Button To WordPress Site.

As you all know that you can add Facebook share button, the Facebook like button, the Twitter follow button, the LinkedIn share button.

Just like all the other social networking websites, you can add Stumbleupon button to your website. You just have to follow a few steps.

Step 1:- Visit the code generator page at StumbleUpon.

Step 2:- There will be many buttons from which, you can select any. I have selected the second button.

add Stumbleupon button to Website

Step 3:- There will be a code in the box in front of the badges/buttons. Though all the instruction will be provided with the code but still, let me guide you.

Copy and paste the script code and place it anywhere on your website. make sure that it is in the body tag. So you can use a plugin like you do for Google Analytics or you can do it manually.

Step 4:- There will a StumbleUpon tag which would show the button on your website. Just copy and paste that code anywhere on your website.

If you want to show the button below the blog posts then you have to edit the single.php file.

Let me show you an example of the code to show the button.

<su:badge layout=”2″></su:badge>

The script code would be similar to the code shown below.

<script type=”text/javascript”>
(function() {
var li = document.createElement(‘script’); li.type = ‘text/javascript’; li.async = true;
li.src = (‘http:’ == document.location.protocol ? ‘http:’ : ‘http:’) + ‘//’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(li, s);

Unfortunately, there is not any option to edit the design of the button manually like Facebook and Twitter.

It Won’t Be So Hard To Add StumbleUpon Button To WordPress Website.

You can generate your own code according to the badge you want to show. StumbleUpon can drive traffic to your blog. There are millions of users stumbling each day.

If you’re not a StumbleUpon user then go for it and have an amazing badge for your website. For a WordPress website, you can have a better button.

by Ravi Chahar

A WordPress Professional and the LinkedIn Influencer. A coder by passion and a blogger by choice. WordPress theme development is his forte. He is your WordPress guy who will teach you how to solve WordPress errors, WordPress security issues, design issues and what not.

Get Free Updates Into Your Inbox

Learn Everything Just Like I Did



  1. Hi Ravi,

    You make it pretty straight forward to putting a StumbleUpon button on your WP blog.

    I’m never really sure where all that SU traffic comes from, or how high quality it is… but just for the effort of adding the button in the way you describe, it’s well worth it.


    1. Hey Donna,

      It’s quite hard to understand the concept of StumbleUpon and the traffic people get from it. But adding its button may provide a chance to get your content shared to a new platform.

      StumbleUpon can be a source to drive the traffic. For which, the sharing button is required.
      Thanks for stopping by.
      Have a great week ahead.

  2. Hey Ravi,

    This idea to have a StumbleUpon button on your blog is pretty awesome. As I have witnessed what SU traffic can do to your blog.

    Yeah! It is hard to find out the concept behind SU traffic. But a single stumbled post can drive traffic a huge traffic and it also stays for almost a week. StubmleUpon is one of my favorite social media platform where I wish my content to be shared.

    Note: One should not stumble his own content on SU. Can lead to a permanent BAN.


    1. Hi Alok,

      Most of the websites provide the official code to show their button. But the thing is how are you going to use it for each blog post?

      Adding the StumbleUpon button can be really helpful. As you have mentioned, it’s a great source of traffic.
      Thanks for stopping by.
      Have a great day.

  3. Hi Ravi,

    Thanks for showing us how to do add the StumbleUpon badge to our website. The step by step instructions you gave us should make it pretty easy to do.

    I don’t have a button on my site but I do have StumbleUpon as part of my social sharing buttons but it’s always good to know how do to this.

    Thanks for putting this tutorial together for us! Hope you’re having a great week!


  4. Hey Ravi,

    As always, great and easy tutorial for those of us that want to hardcode our own goodies! I appreciate the share and am passing it along to the interweb!

    Hope you’re having a great week!


Leave a Reply

Your email address will not be published. Required fields are marked *