How to Add the Google +1 Button to Squarespace
Google 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.
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.
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.
Click the configure this page link to enter the Journal Page Configuration menu.
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.
Paste the second Google +1 code snippet into the HTML editor and select Hide and Save.
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.
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.
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?
Josh Braaten
Update: Google+ and the +1 button are now available to everyone.
Josh Braaten
This post has been updated to reflect the update to the Google +1 button code to move from to the asyncronous version of the code. This change has made the button load three times faster.
Did you like this blog post?
Let's Connect:
Subscribe:
squarespace in Internet Marketing, SEO, Social Media 
Reader Comments (45)
Awesome stuff! Thanks for this step-by-step instruction. I just used this post to add the +1 to my site! I am excited about this new +1 service from Google, but then again, I was excited about Google Buzz too!
Bob Stanke
I was also excited about Buzz, Bob, but I think this will be the real deal. People have been trained to use buttons such as the Like button, so the +1 will be a natural extension of behavior that is already learned. Compare this to Buzz where it was like Twitter but very different, and you had a product that came across as foreign and unfamiliar to folks. Familiarity and utility are keys to adoption, and I think Google will be ok with +1 on these fronts.
This is a nice little tutorial to help the SquareSpace user community. Thanks!
Josh, thank you for the so very easy to follow step by step instructions. Look at me - I'm injecting code!
Lisa - It really is pretty simple, isn't it? I'm constantly amazed by how much you can do while only knowing a little code. A little copying and pasting goes a long way!
Thaks for the well laid out information.
Is there any way to add the +1 to pages as well as blog posts?
Good question Mike, and yes there is. Follow the same process as above with two changes:
1) Use the actual URL of the page instead of the %PERMALINK%.
2) Edit the page in HTML mode and simply paste the plus one code where you want it to show up on the page.
Ah, I have a hundred or more pages and was hoping for something more automatic like the posts method. I guess I'll just have to work my way through them all.
Thanks for the information, most helpful.
There is probably a way to create an extra CSS class that hooks into your pages, but that's a bit more complex. You could reach out to the developer forms on this one at developer.squarespace.com or code.squarespace.com.
Thank you so much Josh for these instructions.
Worked a treat!
I'll be back for more advice soon ;-)
hey thanks josh! i didn't know that their was a way to input the social networking widgets for each post. I usually put them in manually. Do you know if this will work with tumblr widget and the add this widget?
First, gotta say I love your site! Lots of information for me to pour over. Followed your link from the SS forums.
So trying to add the +1 button to my SS site, and all of my HTML snippets are in use. I added the second part of google's code to one of the snippets, and it's not showing up on my site. Any idea why? Thanks!
@Elle - Typically I just add to one of several snippets already in use. Try adding it to the beginning part of the snippet to see if the code is working. If that doesn't work, check the widths/heights of your HTML snippets to see if you can expand them.
Thanks for stopping by!
Ya'll are amazing, thanks for all the help!
I was curious if you knew any way to add a "Follow by Email" or "Subscribe by Email" widget on the SquareSpace blog sites? I've seen them on Blogger sites and maybe some others, but can't figure out a way on SS...?
Some people don't have Readers and would rather follow by email, so why not let them?
Your tutorials are fantastic, step-by-step makes it so easy!
Thanks!
Boy that's a good question. I'm not sure Squarespace currently offers their customers an out-of-the-box way to handle email subscriptions and delivery.
I use the form page type to create a way to gather names, address and permission to send tips and information and then pair it with an email delivery system (Constant Contact).
I've seen Squarespace emails delivered by MailChimp in the past and I know they're working on big infrastructure changes. It is possible, but it hasn't been confirmed that Squarespace will release email integration in the future. I'd jump on that wagon in a minute.
Thanks for the feedback! I don't have an email newsletter account and I'm not on the higher-end SS package so I don't have forms either... So, I was brainstorming a bit and decided to check out feedburner and see if I could embed the code for their email subscription into one of my side-bars. Turns out that it works pretty well. I'd prefer if it wasn't a third-party and SS supported a similar widget, but I think it's a good substitute until SS releases something similar. Here's how I did it:
Subscribe to Feedburner
Click on "Publicize" tab
Click on "Email Subscriptions" option
Copy the code for use in "Typepad"
Go to SS and embed code in text/html section on your site.
That's basically it!
Simple as that and it seems to work well. Feedburner also gives you access to the email addresses, so it's a nice way to build a list if you don't already have a newsletter like Constant Contact or MailChimp up an running.
I adjusted the code to remove the border and change the font color, but I think there's a lot more that could be done. You can check it out here and I'd love to get any thoughts you might have on whether Feedburner is a good solution, etc.
This is a great alternative! Thanks for sharing it!
Thank You !
When I do this, and +1 anything from my homepage, it +1's every post and my URL rather than handling them individually. It seems like it just references whatever is in the address bar at the time rather than using the permalinks of the actual posts. Any advice?
That's pretty weird, Glenn. Try hard-coding the non-blog URLs instead of using the permalink. When using the permalink plug for the blog, it is case-sensitive. Does any of this info help?
Thanks for the great article!
I Was Having A Little Bit Of Trouble, I Follow The Directions Perfectly But When I Go to My Page...No Google+ Button Is popping Up...
My issue was user error. Apparently if you copy and paste %PERMALINK% into the script creation tool, it doesn't translate to the code snippet, you have to actually type it in. Works perfectly now!
Great catch, Glenn. I don't know why copying/pasting can have such negative effects in HTML, but it's good to know you can type in the permalink directly and that works the way you need it to.
Nice recipe. Thanks. But do you know how to force in the 1+ results, the image of the specific post instead of one randomly image from the whole page ?
Typically there's an option to select from several images, although I've seen some cases where the image from the post I'd like to use isn't available. I don't believe anything about the button implementation itself can affect the image selection process.
Josh,
Thank you for the great tutorials you have SquareSpace users. I was able to add +1, StumbleUpon, Twitter, and LinkedIn buttons. I just had one small issue, I was not able to get any of these to work using "%PERMALINK%". In each case I had to paste in the actual permalink address. When I tried using "%PERMALINK%" the buttons either did not render or failed. In the case of +1 I got a red alert icon.
Might you have any ideas? I certainly would appreciate it.
- KFD -
This might be silly, but you're not using the quotes are you? By the time you're done it should look like this: %PERMALINK%
Does that help? If not, drop me an email on my contact page with your site details and I'll take a look. Good luck!
I followed these and it is working. Now that the +1 button allows you to share the post on your Google+ stream I did notice a problem. With the link it is also showing what I assume is suppose to be an excerpt from the post, but instead it is just showing the page title from the navigation bar twice (example: Episodes. Quick Riffs. Chef's Blog. Bob's Wines. Musical Talent. Support. About Us. Anodized Chef. Episodes. Quick Riffs. Chef's Blog. Bob's Wines. Musical Talent. Support. About Us. T...). Anyone know of a way to assign a specific piece of text?
Looks like there is even more options now. Asynchronous vs. html5, when to parse(?), JS callback function. And then a section below that for "Customize +Snippet" for type of website, Title, Image uRL, and description.
Do we just skip all that stuff?
The URL (via the %PERMALINK%) is really the main thing that has to be right. That and placing the HTML code in the right spots. Other than that, you should be able to customize using the new additional options. Let me know if that doesn't work and I'll be happy to look further into it.
Where in the Wordpress code would you add this so that it appears on posts and not just on the main or home screen sidebars?
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 automatically show up like you have on your website. Any suggestions on what I could to help fix it.?
Thank you so much. I've finally done it without any heartache!
That's great news Helen. The good thing about most of these social media integrations is that they are all pretty similar in how they work. If you learn one, you learn them all. That said, Google+ is probably the hardest integration. Congrats!
Just an FYI JOsh (and feel free to delete this) - although it looks like you are keeping up with the spam on this end, I still get them in my email replies...not sure if you're having to delete after they are published or it's more of a preemptive strike so to speak but they ARE making it to the email boxes of those who subscribe.
It would be interesting to know if it's still sending these kind of replies even though they don't make it to the actual post. (this wouldn't apply if you are deleting them after they are published of course)
Holly - I had no idea this was happening. I let anyone post comments and then I go in and kill the spam, usually within an hour. They're updating the commenting system in v6, so it shouldn't be an issue for much longer. Thanks for bringing it up and sorry for the inconvenience.
Hi Josh ...
Thanks for this tutorial. I have the +1 button working very well on my main pages, but the blog pages are only half working.
I have the same problem as "The Anodized Chef" on September 3, 2011. I get an excerpt that is the navigation links text instead of any text from the blog entry. :( Any solution for this?
I also cannot find where the excerpt text for the main page +1 posts comes from. I remember entering the sentence somewhere in the Square Space page ... but I can't find it.
Thanks!
Taber
Thank you thank you thank you thank you.
You've just saved my night. This has been puzzling me for about three hours, and I was about to spend another three hours on it, until Squarespace themselves sent me a link to this.
Taber and "Chef" - By default, it looks like Google is using the meta description and the first image it finds on the blog main page as the text and image snippets, respectively. In my case, it's also the home page. Just switch to Structure editing mode, click configure this page, then fill out the Description field in the control interface.
It's a bummer that Squarespace sets the meta description on the article to be the blog's main page's meta description instead of the post excerpt. Similarly, I'm not sure why the default image is set that way either.
It may be possible to customize your way out of this with some new Schema.org markup that allows you to set the title, description and image yourself using some custom HTML tags. I haven't gotten it to work quite yet though, but then again my coding skills are limited.
Mark - Glad to help. It's always nice to skip the learning curve when you can in this day where there's a new custom thing or another to implement, right?
Google plus one is an excellent option to buy the look for google plus one and let your web page become more popular. The Google plus one button is a very excellent attempt and a very excellent admittance for the Google into the community of public network and now google makes web 2. 0 an excellent option in internet website marketing
Followed your directions and added this button to not only main page of website but at the end of each blog post. It seems to only share the generic pages (i.e. when I share a blog post it gives a link to blog but not specific post) not specific content like I want (the blog posts). Have I done something wrong or is this normal? How do you fix this? Just noticed a HUGE jump in my rankings because of Google+ and want to make sure my content that people do arrive at is what they expect.
Thanks
x
Hi Josh -- Wondering if you'd had any success with the schema.org markup so Google +1 will pull the desired description and image. I tried adding microdata tags within the HTML of an individual post, and while Squarespace appears to be saving the tags (when I view the raw HTML), Google +1 is still pulling the overall page info, not the post info. I'm working from these two sources:
http://developers.squarespace.com/design-coding/post/1510303
http://schema.org/docs/gs.html#microdata_how
Am I misinterpreting how this should be done? Or is there some other code I need to add elsewhere?
Hi Kate - I've tried to fiddle this only for a little while, but hit a dead end and didn't dig much further at the time.
This Google post talks about setting the markup you describe for articles with an Item type of "Article:"
http://googlewebmastercentral.blogspot.com/2011/08/making-most-of-improvements-to-1-button.html
In order to set your Schema.org item props of "name," "image" and "description," you must first modify the Body tag of the blog post with the microformatting code of itemscope itemtype="http://schema.org/Article".
You can set your item props within your blog post just fine, but I don't think they register unless they're associated with the itemscope setting in the body tag.
I think you could probably do this through some custom CSS or JavaScript, but it's not something I've figured out at this point.
P.S. Christine: You, Kate and I are all in the bucket with how our articles are shared on Google Plus.
Now i have to add Google+, Thanks for the Review….