Squarespace and its cheeky share links

As a designer I’m well aware of the need to keep up with modern trends and technology. I have taken notice of coding since the age of Myspace and its HTML / CSS editable pages. More recently I built my previous website on the Wordpress content management system. I was able to setup a standard template and edit it to get my desired result.

However as I am not a front end developer, I was, without a lot of time and effort, unable to add the finishing touches required to improve the site to the level I wanted it. I felt it looked slightly amateurish, admittedly I have quite critical eyes, but rather than being satisfied with my site I was embarrassed.

So for version 2 of my portfolio site I tested out a few other CMS options and ended up going with Squarespace. A photographer friend uses it and raved about its usability. He was correct, both the UI and UX of Squarespace is a step up from Wordpress. However it does have a few drawbacks, a social media guru contact pointed out the lack of 1-click social links was a potential killer to my blog posts.

Squarespace is developed around a set of customisable templates, editing these templates without experience can be treacherous (and for my purposes unnecessary as I’ll explain in a mo.). The problem with the template I’ve used is the share buttons are neatly condensed into one ‘share’ link which acts as a drop down displaying the share options.

In the lazy world of internet, this 2-click function could cause a problem, as my SM guru pointed out. So I had to find a way around it, and a way round it I found. With relative ease you can put in individual share links using two simple snippets of code.

All you need to add these links is:
1. Javascript in the page header code (this only needs to be done once)
2. HTML in the page (where you want the share links to be)

Firstly the javascript, which can be put in the individual page headers, but I chose to save time and place it as a default header in every page.

 To do this:

  • Log into squarespace
  • Go to ‘Settings’ and ‘Code Injection’
  • There you’ll find a few blank boxes, inside the header box place the following codes.

 

for Twitter:

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

and for Facebook:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

 

Now this is done, you need not worry about javascript again (marvelous). Next you need to place the share buttons on the individual pages using HTML.

To do this:

  • Go to the page you want the share links
  • Add a block
  • Choose a ‘Code Block’
  • and put in the following...

 

For a Twitter share

<a href="http://yourdomain.com/toshare” class="twitter-share-button" data-lang="en">Tweet</a>

You need to replace http://yourdomain.com/toshare with your chosen website / web page.

For a Facebook like

<div class="fb-like" data-href="http://yourdomain.com/toshare" data-width="The pixel width of the plugin" data-height="The pixel height of the plugin" data-colorscheme="light" data-layout="button_count" data-action="like" data-show-faces="true" data-send="false"></div>

Again change http://yourdomain.com/toshare  with your chosen website / web page (and yes you can place both codes one after the other).

 

So now you're done, congrats, the world can like you and share your musings. 

It's important to note that I did not want other links such as pinterest or google+ as I have chosen a clean looking website and didn’t want to crowd the page with links that, lets face it, in comparison with twit/face are rarely used. But I’m sure they are available and added in a similar simple way. (Plus they are already available in my 2-click wonder share button)

Also, if you're still interested, there are other options available on the Twitter / Facebook developer sites, which allow you to change the style of the buttons as well as their size, plus other options. I fancied the default factory fitted buttons, but if you want to play around with the options you’ll need the following websites:

https://dev.twitter.com/docs/tweet-button
https://developers.facebook.com/docs/plugins/like-button/

I hope this helped, if you know of an easier way feel free to comment.