How to use a custom share button on your Squarespace site

Standard

I was getting frustrated by the same old facebook and twitter share buttons and most of the tools out there are either very standardised or complicated. I wanted to use my own style share buttons for some of my web designs. I have aimed the tutorial at Squarespace websites but the principles should work with any site.

I decided to find a simple way to use any button of my choice to share my page and it really is very straight forward. We will look at using a Facebook share button in the tutorial but any other share button is done in the same way.

1 – Choose an image for your share button. You can either create your own using a button generator or Canva.com to create an image which will be used as your share button.

SHARE

Facebook Share Button

2 – Add this image to your website as an image. In Squarespace, I have a hidden page which is used to store any images on that I want to link to. Just add the image the same way as any other image in Squarespace.

3 – Right click the image and click (open image in new tab) to get URL. Once you have added the image, right click on it and select view image to open it in a new window. Copy this URL as you will need it later.

4 – Head over to https://simplesharingbuttons.com/. This site is the best I found for generating the share code in an easy to understand way.

5 – Complete the sections making sure to click the ‘Black Icon Set’ and put the URL of the page you would like to share.

6 – Grab the Code! Highlight the HTML code and insert it on your Squarespace website using the code function:

ss3

Use the ‘Code’ function in Squarespace

7 – Alter the code – Change the ‘Source’ URL to the one for your image that you took a note of earlier. Example as follows:

<ul class=”share-buttons”>
<li><a href=”https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.switchtoonline.com&t=Website%20Design%20Services&#8221; title=”Share on Facebook” target=”_blank”><img src=”https://static1.squarespace.com/static/56274368e4b0375ec3820cb9/562745f2e4b0169ae5cf7191/56fc6e3627d4bd42c23d0f09/1459451226055/518184203_1280x960.jpg?format=750w“></a></li>
</ul>

8 – Save the site and open it in a new window and test the share button. You should now find it is working!

Let me know how you find it and if you came across any difficulties.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s