Jump to content

Adding custom social buttons?

Recommended Posts

I am trying to add 2 social buttons which I have created similar to the ones available but using social networks which are not listed in the Connected Accounts in the Squarespace Panel. How could this be done, maybe using Code Injection or Custom CSS?

Perhaps it could be done by using 2 random connected accounts and replacing them with the custom ones. Any ideas?


These Custom Social buttons are only the last two (Lookbook and Bloglovin’):

alt text

This what I am hoping to achieve:

alt text

Link to comment
  • Replies 6
  • Views 24.6k
  • Created
  • Last Reply

The method you describe - adding 2 random icons and then using a script to change the icon and destination link - will work.

However, the Squarespace social buttons aren't images, they are actually part of the Squarespace social-icon-font. The 2 additional icons could therefore look a little fuzzy because they would be bitmap images rather than vector fonts.

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  


Link to comment

This was done through developer mode, instead of replacing two social buttons like I suggested, you can add them yourself in the template's html. http://developers.squarespace.com/using-git/ If you look through these steps you will find instructions on how to access git and change the template html thus adding new items to the social buttons list which then you script background-image using the one above in the custom css. Although its not perfect as it was adjusted for 16x9 or 16x10 screens, when you zoom in and out it starts looking a bit funny plus didn't manage to add them to the mobile navigation menu.

Link to comment
  • 4 months later...

I was wondering, how were you able to or what CSS did you use to create your navigation header on the top and keep it stationary when scrolled? Also what template are you using?

Link to comment
  • 3 years later...
  • 1 year later...

I keep getting an error message about being unable to claim my blog on bloglovin' any idea why? I'm inserting the code into the top of a new blog post (have tried both ways-using the embed way and using the <> way in the + box) and publishing but when I go back to Bloglovin and click claim I get the unable to claim error message.

Link to comment


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.