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.
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:
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” 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.
WEB DESIGN BY SWITCH TO ONLINE | THE NEWS 
