Where do I find information about StumbleUpon share badges?
Why should I add a StumbleUpon Badge?
What impact will Badges have on my traffic?
How do StumbleUpon Badges work?
How do I add a StumbleUpon Badge?
Integration Tips
How do I postload the StumbleUpon Badge?
What is the Badge API documentation?
Where do I find information about StumbleUpon share badges?
We have badges available at www.stumbleupon.com/badges, and we also have a Badge API here.
Why should I add a StumbleUpon Badge?
Add a StumbleUpon Badge to your web page so your visitors can easily add your content to StumbleUpon’s index. Just copy and paste a few lines of code onto your web page, and you’ll get more traffic and exposure – for free – simply because our growing community of over 20 million Stumblers likes your content and wants to share it with others. Our Badges also show a real-time count of how many times your web page has been viewed by StumbleUpon users. So show off your big numbers!
What impact will Badges have on my traffic?
On average, publishers see a 20-25% increase in StumbleUpon referral traffic after implementing the badges. Adding the badges makes it easier for your users to share your best content with the rest of the StumbleUpon community. Check out this infographic on the Lifecycle of a Web Page on StumbleUpon to learn more about how your content can continue to get Stumbled long after it’s been initially shared.
How do StumbleUpon Badges work?
Learn more about how StumbleUpon Badges work here.
How do I add a StumbleUpon Badge?
This guide will walk you through the quick and easy setup to create the code for your own StumbleUpon Badge.
Integration Tips
Blogger
From your blogger dashboard go to Template and click Edit HTML.
Check the box for “Expand Widget Templates”.
In the template find (you can do a text search with Ctrl+F) <data:post.body/> and right below it add:
<div:if cond=’data:blog.pageType ==”item”‘>
<div style=’clear: both;’/>
#textcode_from_above#
</div:if>
Of course replace #textcode_from_above# with the code displayed under “Widget Code”.
Click on “Save Template”.
Click on “View Blog” to see how your blog looks now with the widget on it.
WordPress
For self-hosted WordPress.org blogs:
Edit single.php of your WordPress theme.
Find the following line (or similar line, depending on your theme file) in single.php or theloop.php:
<?php the_content(“<p class=serif>Read the rest of this entry”</p>”);?>
Immediately after the line, add the code above:
Save and upload single.php back to your WordPress theme folder. Done!
For blogs hosted on WordPress.com:
Please visit http://en.support.wordpress.com/sharing/
TypePad
Login to your Typepad account and add the code above to your Main Index and Individual Archive templates. For more information, you can also refer to the TypePad Help.
Movable Type
Login to your Movable Type account and add the code above to your main index, category index and individual archive index templates.
Feedburner FeedFlare
Go to your feed and click on the Optimize tab.
Click on the FeedFlare service in the left hand navigation.
Scroll down to the Personal FeedFlare area to enter the URL above.
Click on Add New Flare and you are done!
How do I postload the StumbleUpon Badge?
1.Add the SU badge script (http://platform.stumbleupon.com/1/wid…) before rendering any badges
2.Create the div that will be the place holder of your badge, in this example one is created with id “lazy-load”.
3.Choose the type of layout desired, specify place holder, then render, programmatically. See below.
var badge = {
"type": "badge",
"layout": "1",
"id": "lazy-load"
};
// render
new STMBLPN.Widget(badge).render();
What is the Badge API documentation?
The Badge API allows web site publishers to create custom StumbleUpon badges on their web pages by querying information about the page which the badge sits on. This is provided through a simple REST API with output in JSON format.
Current Version: 1.01
Default Version: 1.01
Version Support
The Badge API has version support to be able to add in new features without interrupting production code. By adding a version subdirectory parameter, you can select which version of the API you would like to use.
Example
http://www.stumbleupon.com/services/1.01/badge.getinfo?url=http://www.treehugger.com/
REST Request Format
The Badge API uses the REST format. A simple HTTP GET is all you need to get going. Badge API calls use the following format:
http://www.stumbleupon.com/services/1.01/badge.getinfo?[params]
Example
http://www.stumbleupon.com/services/1.01/badge.getinfo?url=http://www.treehugger.com/
Sample JSON response
{
"result": {
"url": "http:\/\/www.treehugger.com\/",
"in_index": true,
"publicid": "1tin26",
"views": 109703,
"title": "TreeHugger",
"thumbnail": "http:\/\/cdn.stumble-upon.com\/mthumb\/428\/925428.jpg",
"thumbnail_b": "http:\/\/cdn.stumble-upon.com\/bthumb\/428\/925428.jpg",
"submit_link": "http:\/\/www.www.stumbleupon.com\/submit?url=http:\/\/www.treehugger.com\/",
"badge_link": "http:\/\/www.www.stumbleupon.com\/badge?url=http:\/\/www.treehugger.com\/",
"info_link": "http:\/\/www.www.stumbleupon.com\/url\/www.treehugger.com\/"
},
"timestamp": 1289496144,
"success": true
}
badge.getinfo
Thebadge.getinfo API is used to retrieve information about a URL that may or may not be in the StumbleUpon index.
Parameters
| Required | Name | Type | Description |
|---|---|---|---|
| required | url | string | The URL you are retrieving information for |
Example
http://www.stumbleupon.com/services/1.01/badge.getinfo?url=http://www.treehugger.com/
Sample Response
{
"result": {
"url": "http:\/\/www.treehugger.com\/",
"in_index": true,
"publicid": "1tin26",
"views": 109703,
"title": "TreeHugger",
"thumbnail": "http:\/\/cdn.stumble-upon.com\/mthumb\/428\/925428.jpg",
"thumbnail_b": "http:\/\/cdn.stumble-upon.com\/bthumb\/428\/925428.jpg",
"submit_link": "http:\/\/www.www.stumbleupon.com\/submit?url=http:\/\/www.treehugger.com\/",
"badge_link": "http:\/\/www.www.stumbleupon.com\/badge?url=http:\/\/www.treehugger.com\/",
"info_link": "http:\/\/www.www.stumbleupon.com\/url\/www.treehugger.com\/"
},
"timestamp": 1289496144,
"success": true
}
Response Values
| Name | Type | Description | |
|---|---|---|---|
| result | object | The resulting data from the API call. | |
| url | string | The URL you sent us. This may be a canonicalized URL, but should point to the same content. A canonical URL in our system is one without tracking codes, anchor #’s, etc. | |
| in_index | literal | If the URL you sent has been submitted to us by our users, this will return true. Otherwise, we will return false. | |
| publicid | string | This is the identifier to this URL in our index. This value is unused for now, but will very likely be used in the future. | |
| views | number | The number of times this URL has been stumbled upon by our users. | |
| title | string | The title of the page as deduced from the <title>tag of the URL. | |
| thumbnail | string | The URL to the regular sized thumbnail image (129 x 86 pixels). | |
| thumbnail_b | string | The URL to the big thumbnail image (283 x 184 pixels). | |
| submit_link | string | The URL to navigate users to who want to submit the URL to us if new, and rate the URL if existing. This is a page designed to layout in a full page, not a pop-up. | |
| badge_link | string | The URL to navigate userse to who want to submit or rate the URL. This is a page designed to layout in a pop-up with height and width ratio of 5 to 4 (so 450 x 360 pixels would be an appropriate size). The actual pixel size will depend on the end-user’s graphics capabilities and default font size. | |
| info_link | string | The URL to display an informational page about a URL in our index. | |
| timestamp | number | Date/time when the response was served (in Unix time format). | |
| success | literal | true if no error was encountered in fetching and returning a response. false otherwise (see below for possible error codes). | |
Errors
| Code | Description |
|---|---|
| 9000 | Service temporarily unavailable |
| 9020 | Bad or missing parameter: url |
| 9030 | Rate-limit exceeded |
| 9031 | Rate-limit exceeded |