How to Add the StumbleUpon Button to Squarespace
Helen 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.
Select 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.
Notice 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.
Navigate to your blog (Journal) main page and enter the Structure Editing mode.
Click the configure this page link to configure your blog.
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.
Paste the StumbleUpon badge code into your Squarespace HTML snippet and click Hide & Save.
Finally, arrange your HTML snippet within the structure of your blog/journal configuration page and save your changes.
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.
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!)
Did you like this blog post?
Let's Connect:
Subscribe:
squarespace in Blogging Strategy, Internet Marketing, Social Media 
Reader Comments (6)
Thanks Josh, that's great. Easy when you know how... I missed out the permalink bit when I tried to figure it out for myself. Great tutorial.
StumbleUpon does seem to work really well for our type of content. We've found it to be a more effective way of generating site visits than either Twitter or Facebook.
That pesky permalink throws off people more than any other step. Like you said though, it's easy when you know how.
You'll have to let me know how adding the button affected your web traffic over time. Don't hesitate to reach out for more tutorial love in the future if you're in need.
Interestingly, I just added the reddit button to my page and didn't have to use the %Permalink% code to get it to work. It seems to work fine... hopefully I didn't screw it up! We've found reddit to be better than SU, Twitter or FB
Actually, I did screw the Reddit button up. Without putting in the %PERMALINK% code it would just Reddit my generic website each time, not the specific post. In the Reddit button code that you're given from their site you can type %PERMALINK% after the "url" section and it will work fine. Not sure why Reddit doesn't make it easy to figure this out like all the other buttons...
Well look at that! Come for the StumbleUpon post, stay for the Reddit tutorial in the comments. Thanks Little Seed Farm for reporting back on your success with the Reddit button!
Hi i've tried the step you have listed above on my squarespace site and it doesn't work...I have to input all of my social network code in to each blog post. I can't seem to have it essay writing services show up like you have on your website. Any suggestions on what I could to help fix it.?