How to Add the Google +1 Button to Squarespace

Adding Google +1 to SquarespaceGoogle just announced their latest initiative to improve the quality of search results. Taking the shape of a social voting button, the Google +1 button allows users to vote for pages on the web they found useful. The +1 button is just one more sign of social media's growing influence on SEO, so naturally many bloggers will want to add it to their sites as a way to boost the reach of their blog.

You've probably already added the Like, Tweet and Share buttons to your Squarespace website. Now you can add the Google +1 button to Squarespace as well.

Getting Started with Google +1

As you can tell by their promo page, Google is pretty excited about +1. Appearing in both the search results and on individual web pages, the +1 button is Google's answer to the recent deal between Facebook and Bing to bring Likes to Microsoft's search engine results. 

Google +1 isn't available to everyone just yet. Join the Google Labs +1 experiment to get started. Once you've signed up, you'll start seeing +1s from friends in the search results.

Adding Google +1 to Squarespace

Signing up for +1 is the first step, but you'll also want to add the new +1 button to the posts on your Squarespace blog. It's a pretty simple process. (Note: This post has changed since its original posting because Google upgraded the +1 button code.)

First, you'll need to head over to the Google +1 button code page. Step one is to configure the way you'd like the button to appear and your langauge preference.

Google Plus One Code

Next up, select the Advanced options to get at the URL stettings of +1. Enter "%PERMALINK%" (case sensitive) as your URL to +1. The permalink is a placeholder for the actual URL of your blog posts. When the +1 button loads on your website, Squarespace swaps the permalink for the actual URL of your blog posts automatically.

Advanced Google Plus One Code

At this point, you're ready to install Google's +1 button code on your blog. Unlike most social buttons, Google provides you with two code snippets. The first code snippet belongs in a HTML snippet on your blog. Select and copy the code highlighted below.

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

Squarespace structure mode

Click the configure this page link to enter the Journal Page Configuration menu.

Squarespace Journal configuration

Scroll down to the Post Display Configuration section and click on an unused HTML Snippet (or add to an existing one) from the list of Squarespace journal components.

Squarespace HTML snippet

Paste the second Google +1 code snippet into the HTML editor and select Hide and Save.

Squarespace HTML for Google +1 code

Arrange the snippet within the blog post layout and save your changes. You can place the code snippet at either the top or the bottom of your blog template.

Squarespace blog post layout

Next up, go back to the +1 button code site and grab the second code snippet.

Make sure you're still in Structure Editing mode and scroll to the bottom of your website to find the edit website footer option.

Paste the second part of the Google +1 button code within your website footer and save your changes.

You should now see the Google +1 button show up alongside the rest of your social buttons on your Squarespace blog. Adding the +1 button is a smart move along the way to SEO and social media convergence.

Squarespace social media buttons

What do you think of Google +1? Are you looking forward to the button like I am or does it seem like button overkill at this point?