How to Add the StumbleUpon Button to Squarespace

How to add StumbleUpon badge to SquarespaceHelen and Graham have a Squarespace website, Obsessionistas, which features stories about collectors and their collections, ranging from insects in amber to airline sick bags. Helen wants to give their readers an easy way to share their posts on StumbleUpon by adding the badge/button to their blog posts.

StumbleUpon's 15 million users love sharing this type of website content, so it's no wonder why Helen wants to add the button to her site. To lend her a hand, today we'll take a look at how to add the StumbleUpon button to a Squarespace website.

What's StumbleUpon?

StumbleUpon is a social content discovery website. Simply press a button and you're presented with an interesting page on the web. You can like and dislike the pages you see, giving StumbleUpon more information on your preferences. As you do so, StumbleUpon gets better about showing you pages you'll like as you stumble along.

StumbleUpon introduces you to excellent new sources of information on the web as well as delightfully random content like what you'll find on Obsessionistas. With over a million visits a day, StumbleUpon is connecting web surfers everywhere with quality content like a man who collects pencil sharpeners.

Adding the StumbleUpon Badge to Squarespace

Adding the StumbleUpon badge/button to your Squarespace blog is easy and follows the same basic process as most other tutorials on Squarespace social buttons.

To start off, head over to the StumbleUpon badges creation page. Select the graphic you wish to display at the top or bottom of each blog post.

StumbleUpon different website badgesSelect the graphic you wish you display on your blog template header/footer.

Next, type "%PERMALINK%" in the optional field made for blog entry permalinks. This is case-sensitive and can even fail if you copy/paste. By far, this is the step people most have trouble with. Make sure you've typed in the permalink exactly as it shows below.

StumbleUpon code for SquarespaceNotice how the code changes as you add go through each step.Next, take the code provided by StumbleUpon and bring it on over to your Squarespace blog.

StumbleUpon badge code for a Squarespace website

Navigate to your blog (Journal) main page and enter the Structure Editing mode.

Squarespace structure editing mode

Click the configure this page link to configure your blog.

Squarespace configure blog post menu

Scroll down to the Post Display Configuration section and select an unused HTML Snippet (you may also add to an existing one) from the collection of Squarespace blog template elements.

Squarespace HTML snippet

Paste the StumbleUpon badge code into your Squarespace HTML snippet and click Hide & Save.

Squarespace HTML for a StumbleUpon button

Finally, arrange your HTML snippet within the structure of your blog/journal configuration page and save your changes.

Squarespace blog post layout

You should now see a StumbleUpon badge on each of your blog posts. Posts will display a count of stumbles on each blog post. Blog posts without stumbles will display "Submit" next to the StumbleUpon badge.

StumbleUpon badge installed on Squarespace

The whole process takes under five minutes and can be a great way to increase your blog's exposure to new visitors. Take some time to add the StumbleUpon button to your Squarespace website and start seeing new visitors as a result. 

(P.S. I wrote this tutorial because Helen asked via a comment in a previous post. If you have a tutorial you'd like me to write, just ask in the comments. Good luck Helen!)