How to Add the StumbleUpon Badge and Widget to Your Website
Do you want to make it super-easy to see and share your content on StumbleUpon directly from your blog or website? If so, StumbleUpon has created a badge and widget for easy sharing.
How to add the StumbleUpon badge
To add the StumbleUpon badge, enter www.stumbleupon.com/dt/badges into the web address bar at the top of your browser. After you arrive at the Badge page, click the Get Started - It's Free! button.
On the next page, you get to choose the size and type of badge you want. After specifying what you want, StumbleUpon automatically generates the necessary HTML code you’ll need for your website in the box to the right of the blue arrow.
Now that you have the code, you can either place the code yourself or have a web developer place the code where you want the badge to show up.
Usually, you’ll find Share buttons from other social networks accompanying the StumbleUpon badge. Below, for example, you see what the StumbleUpon badge looks like within the group of Share buttons.
How to add the StumbleUpon widget
After you start adding content to StumbleUpon, you have the option of adding a widget to your blog or website to showcase your most popular content. The setup process is rather easy, but make sure that you have a web developer handy if you're not familiar with website coding.
First, enter www.stumbleupon.com/dt/widgets into the web address bar at the top of your browser. After you arrive at the Widget page, click the Start Now - It's Free! button.
On the next page, you have two options when it comes to populating the widget on your website with content: You can either show content from individual StumbleUpon accounts or from other websites.
To show content from StumbleUpon users on your website widget, type in the username of the account you want to display. For example, if you type socialrobinson, all content shared from that account will display in the Preview pane.
To show content from websites, type in the domain name of the website you want to display. For example, if you type techcrunch.com, you will see all StumbleUpon content shared from TechCrunch.
To add multiple websites, for example, type techcrunch.com, press Enter, and type business2community.com, and you will see content from both sites. What you see from both websites depends on the date of publication. All content shared from the websites you type will display in the Preview pane.
After you choose whether to show content from StumbleUpon users or from websites, click the Next button. On the next page, you choose the size of the widget. You have three sizing options:
Small Horizontal Rectangle (300 x 250 pixels)
Large Horizontal Rectangle (600 x 250 pixels)
Large Vertical Rectangle (160 x 600 pixels)
Make sure to pick the sizing option that best fits with your website design.
Next, choose a title for the widget. StumbleUpon automatically generates a title based on the website address. For example, if your website address is myblogrocks.com, the title would be "myblogrocks.com on StumbleUpon." You can edit the title as you please.
All right, you’re almost finished. Note that, after making your sizing and naming decisions, StumbleUpon generates the code you need and places it in a box to the right of the sizing and title options. Copy that code and either paste it into your website code yourself or hand it off to a website developer to do it for you. That's it!
If you're using Wordpress, you may use several plug-ins to accomplish this same task. The previous option is more customizable if you're code-savvy.