Squarespace Sharing Hell
One of the biggest frustrations I hear from Squarespace users is trying to line up those dang Social Media Share buttons. There’s only three html snippets and it’s easy to use them up on Facebook, Google+, and Twitter. What if you want to use them somewhere else? It’s for this reason that I’m writing this post before showing you how to use Google Adsense Part 2 (or any other type of ads for that matter) in these html snippets. So first we need to get these social media icons in one snippet of code. Get ready to try out some custom CSS. I promise it won’t hurt too bad!
Squarespace Custom CSS
First, you will navigate to your template’s Custom CSS tab in the Style module and then paste in the following code making sure you click save. The 5px of padding adds negative space around each button so they don’t cram up next to each other. Feel free to change this number to add more or less space as needed.
float: left;
padding: 5px;
}
STYLE -> CUSTOM CSS
Squarespace Social Media HTML
Next, you will need to decide which individual social media icons you want to use. Here’s the custom html code snippet for buttons I use. The main thing to remember when copying the snippets of code is to make sure %PERMALINK% doesn’t get changed in the process. That’s usually where any problems start. Also keep a close watch on quotation marks (“). It may help to use a text editor (eg Notepad) if you are not using my exact configuration.
*NB 1. YOU MUST UPLOAD YOUR OWN PINIT BUTTON AND CHANGE THE URL IN THE BELOW CODE TO THE IMAGE IN YOUR FILE STORAGE (src=”/storage/yourbutton.png”) 2. REPLACE BUFFER USERNAME (data-via=”username”)
After a zillion attempts at trying to make this code appear without jacking up my website, I’ve included a screenshot instead. To copy the html code go to http://textsnip.com/80790a.
Links to Customize your Social Media Buttons:
- Facebook: https://developers.facebook.com/docs/reference/plugins/like/
- Twitter: https://twitter.com/about/resources/buttons#tweet
- Google+: http://www.google.com/webmasters/+1/button/
- Buffer: http://bufferapp.com/extras/button
Journal Configuration and Html Snippets
Once you have your social media share buttons configured and in the order you want, switch to Structure Mode and click Configure this Page.
Structure -> Configure the Page
Now you should be in the Journal Configuration Screen. Scroll down to Post Display Configuration and choose one of the three HTML Snippets and paste the entire social media html code in the text area. Click Hide and Save as well as the Save Page Configuration button.
Choose one Html Snippet in Journal Configuration
Paste Social Media Html and Save
Google+ Script
If you decide to use Google+, you will need to copy and paste the following code in your footer. (While still in structure mode, scroll down and click edit website footer) You could even try to include it in the html above, but I haven’t tried it yet and I know this way works. Again, it’s a screenshot. Go to http://textsnip.com/9818f0 to copy the code.
How Did You Do?
I know this may seem to be a lot to get your brain around, but it took me much much longer to write this tutorial than to actually execute each step. If you have any issues or questions, please let me know in the comments! I’ll do my best to help. Also remember that if you use social share buttons with box counters, you may need to adjust the height and/or width.
Related Official Squarespace Help Pages
Related SSP Tutorials
*Affiliate Links to Squarespace included in post. Thanks for supporting Squarespace Plugins!
Hi Holly!!
I wanted to tell you how much I appreciate all the work you put into your wonderful blog and how much I absolutely love your helpful tips, your design sensibilities and your good humor. I think you’re awesome.
As a member of the tribe of Squarespace fans, and a grandma who loves learning new tricks, I thank you so much!
Warmly,
Sue
You make me blush Sue!
I delayed in replying until I could show you something
I hope you don’t mind http://www.aboutus.org/SquarespacePlugins.com
(I didn’t realize you can’t directly link outside the domain’s aboutus page until I was done, but it still might be beneficial to everyone I mentioned)
Also, I was going to leave a comment on one of your blog posts but commenting is turned off…you may already be aware, but just wanted to let you know.
Pardon my ignorance but I can’t — for the life of me — find my Buffer username in my Buffer account. where is it mentioned?
Nevermind! I figured it out
Oh Good Brad! Sorry for the delay..I’ve been at the beach this past week with a (mostly) “no electronics” restriction policy from my family
Thank you for posting this tutorial. I am going to try it as soon as I get home today. I do have one question that is kind of related to this topic. Do you know how to control the information that is shared when you use these buttons? For instance, when I hit like, how do I get it to share the Journal entry name and a picture versus just the URL of the page?
Thank you so much!
The %Permalink% variable within the code should limit the sharing feature to the url/post you are sharing. Not sure how you can control the exact picture with this version of FB code. I think you would have to integrate the more complex xfbml version of the button…something I should tackle in a future post. I’ll be honest though, Facebook is not something I enjoy using beyond personal relationships as it’s such a time sucker for me…too many rabbit trails
This was extremely useful article and it worked beautifully well. Thank you so much for sharing and making life easier
Hi Holly, This is a really detailed article and the only one I’ve been able to find on this topic. I’m trying to use the same instructions to add a row of social media buttons to my reqular pages. Is the process he same? I’ve added the CSS code and the Pinterest button but I dont see a button show up on my page. I’m also trying to add a facebook send button in all this madness. Any help or advice would be great! Thank you.
It looks like you figured it out Seth?! Sorry for the delay, but internet access is a luxury at our current location/s so I’m a bit behind on replies. I assume this is for SSv6. Either way, it should work but you will need to enter it on each page unless you include it in the footer (which looks to be what you’ve done).
Is this website built on wordpress?? Interesting.
Yes, yes it is! Which I make abundantly clear on my “About” page
This started out as tutorials for a homeschool group who uses a mix of WP, Squarespace, Blogger, Tumblr, well…really any platform that works for a specific project. However, it has morphed over the past couple of years. I’m in the process of migrating to Squarespace 6, but waiting for the perfect moment to “jump”. However, I do have several other Squarespace and Squarespace 6 websites as well.