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.
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.
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.
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!