Free Social Share Buttons for Squarespace7.1

Don’t you just hate when stuff goes missing? Well, us too, so here are free Share Buttons for Squarespace. In version 7.0 it was included, but still not in version 7.1, so we made it for you here, follow the simple instruction and you should be good to go.
DISCLAIMER: we offer no support, free or paid, we are no way responsible for your sites functionality and so on, we are just trying to help.
And you can help us too! Follow us on Instagram and Facebook, we would much appreciate it!

Here is how to install simple Share Buttons in Squarespace 7.1 and it’s free and no signing up or branding!!

We were pretty annoyed with having to pay for something we felt should be free, so we have programmed this little nugget and you can copy as you like. We have included sharing for Facebook, Pinterest, LinkedIn, Reddit and Twitter (X)

We have chosen a simple round and black design, they are transparent, so you can use them on any color background you like.

Down below, we explain how you easily can change design and content.

Let’s start out with how to insert as default on Squarespace Blog Pages, afterwards, we will show how to insert with a code block anywhere on your site

Step 1 is the CSS file, which is the styling of buttons. We need to paste this into our Custom CSS that you will find here:
WEBSITE -> WEBSITE TOOLS -> CUSTOM CSS, and then paste this script (in the grey box):

#share-buttons a {

margin: 0 5px;

display: inline-block;

}

#share-buttons img {

width: 32px;

height: 32px;

transition: transform 0.3s ease;

}

#share-buttons a:hover img {

transform: scale(1.1);

}

Step 2 is the HTML and Javascript script, which is the graphics and action part. They can both be placed same place in Squarespace and that is here:
WEBSITE -> PAGES -> Click the Coqwheel -> ADVANCED -> POST BLOG ITEM CODE INJECTION -> paste the code in -> Then Save

Use this script in the grey box:

</div>

document.addEventListener('DOMContentLoaded', function() {

var pageUrl = encodeURIComponent(document.location.href);

var pageTitle = encodeURIComponent(document.title);

var mediaUrl = encodeURIComponent(document.querySelector('meta[property="og:image"]') ? document.querySelector('meta[property="og:image"]').getAttribute('content') : '');

// Facebook Share

document.getElementById('facebook-share').href = `https://www.facebook.com/sharer/sharer.php?u=${pageUrl}`;

// Pinterest Share

var pinterestButton = document.getElementById('pinterest-share');

pinterestButton.href = `https://pinterest.com/pin/create/button/?url=${pageUrl}&media=${mediaUrl}&description=${pageTitle}`;

pinterestButton.setAttribute('data-media', mediaUrl);

// LinkedIn Share

document.getElementById('linkedin-share').href = `https://www.linkedin.com/shareArticle?mini=true&url=${pageUrl}&title=${pageTitle}`;

// Reddit Share

document.getElementById('reddit-share').href = `https://reddit.com/submit?url=${pageUrl}&title=${pageTitle}`;

// X (Twitter) Share

document.getElementById('twitter-share').href = `https://twitter.com/intent/tweet?url=${pageUrl}&text=${pageTitle}`;

});

</script>

And that’s it folks! You now have Social Share Buttons on all your Squarespace 7.1 Blog.

If you create a new blog page, make sure to paste the HTML/Javascript in there too.

Anyway, that was how to get Social Sharing Buttons on your Blog Pages, but you can actually paste it in anywhere, About pages, Product, Blank, Footer, well whereever you can throw in a Code Block and you can drag around it and change the design, more on design below this.

Inject anywhere, simply go to: Edit -> Add Block -> </> Code -> and them paste the same code as right above in (the HTML/Javascript text)

Design changes

In the CSS code you have injected, you can change size, prefault is 32x32 pixels, like we use here and it gets a little larger on hover.

You can also change the icons, if you want another design, shape or color. Replace the image source <img src="your image url" alt="Pinterest" />

Just upload new icons to your asset library and copy the url for the image.

You may want to check out www.iconfinder.com, they have a lot of cool and free icons.

By the way, we have gone with the good old tweety bird here for twitter, if you prefer the new X, you can replace the img src to this url: https://images.squarespace-cdn.com/content/65a8f11715473211a4e673f8/bb881b16-3b46-444c-b2ae-156c61808398/twitter_icon2.png

If you are using another platform than SquareSpace, this should work there as well, but you may have to split it up.

We hope that the free Social Sharebuttons above can be useful to you!

We are a community/blog for eco-friendly and sustainable living, so we sure would appreciate if you would follow us on Instagram in return, sign up for our newsletter or maybe even make a donation (no pressure), so we can continue giving free stuff away and make quality content.

Make donation

Any contribution is much appreciated and make sure to follow.

Donate