Is it possible to have multiple social link blocks?

Hello everyone,

So, we have many artists, writers, producers, etc etc and I'm building out a page for each person. I want each page to have a social block that points to THEIR pages. I got my first one to look exactly like I want, and customized the last one's icon for her EPK. But once I tried to do it for the next person I realized we can only hold the info for one set of social links on the entire site. Or so it seems.

So my question is, can page 1's social block have different links/urls in it from page 2's social block? Examples below:

I've got it correct on our first artist's page here ->  www.aspiremusicgroup.com/autumnpaige

how can I mirror that on our next artists page here but use different urls? Or do I need to create a custom set of links/buttons on every page one by one? the next artists page url is -> https://www.aspiremusicgroup.com/loverboyvo

Squarespace's built-in social links are meant to represent the site owner. Not outside entities.

You'd probably need to use code blocks with custom code to outside entities.

I know of no code that currently does this.

42 minutes ago, creedon said:

Squarespace's built-in social links are meant to represent the site owner. Not outside entities.

You'd probably need to use code blocks with custom code to outside entities.

I know of no code that currently does this.

lol I really hoped that wasn't the answer. So I'll have to make custom buttons for every person and then use a mouseover code to get the same effect as the normal social links right? If so, would you happen to know where I could get the icon set squarespace uses? And finally.... is there a way to find out what size squarespaces default squares are for the social links like the ones I already have up?

Please see Code Block Social Links External.

I suggest doing several with this code to see how it works for you before going whole hog. This is new code after all! 🙂

Let us know how it goes.

2 hours ago, creedon said:

Please see Code Block Social Links External.

I suggest doing several with this code to see how it works for you before going whole hog. This is new code after all! 🙂

Let us know how it goes.

arghhh i just saw this after coming up with 2 solutions lol. Also looks like thats temporary because then I have to pay/subscribe to keep using it. Can I get your opinion here?

First I made my own icons and then inserted a code block referencing the new icons and the links they go to. It LOOKS great, but theres one problem. I still want the mouseover effect from the regular social icons and I've been trying to figure out if it's possible.  So...

IS it possible to target each image in a code block specifically so I can add a hover effect to them all? 

Or should I just go with my 2nd option which I can probably force to work, which is I just inserted the icons as separate images, then use a normal img hover effect for the entire section AND also use code to fix the spacing between them?

I honestly prefer the first option since it would be an easier copy/paste job on each page. Anyway, it looks like this (I have both options stacked on top of each other for the time being)

And here is the code I have in the code block for option 1:

<ul class="custom-social-icons">
<li><a href="http://instagram.com/theautumnpaige" class="c-instagram" target="_blank"><img src="https://static1.squarespace.com/static/6619853ebf198429bab147a0/t/66455a868010a61f1e0b4d99/1715821190562/IGicon.png"/></a></li>
<li><a href="https://twitter.com/theautumnpaigem" class="c-twitter" target="_blank"><img src="https://static1.squarespace.com/static/6619853ebf198429bab147a0/t/66455a867c0d5b318a79428d/1715821190386/TWITTERicon.png"/></a></li>
<li><a href="http://www.tiktok.com/@theautumnpaige" class="c-tiktok" target="_blank"><img src="https://static1.squarespace.com/static/6619853ebf198429bab147a0/t/66455a86b07eb342dd95a7ec/1715821190371/TIKTOKicon.png"/></a></li>  
<li><a href="https://www.youtube.com/@daautumnpaige" class="c-youtube" target="_blank"><img src="https://static1.squarespace.com/static/6619853ebf198429bab147a0/t/66455a86b07eb342dd95a7eb/1715821190335/YOUTUBEicon.png"/></a></li>
<li><a href="https://open.spotify.com/artist/2Fb9GeVx07GAvFx4htGCLu?si=btyEIGNSTnmFseISCAP4-g" class="c-spotify" target="_blank"><img src="https://static1.squarespace.com/static/6619853ebf198429bab147a0/t/664569282db3af18932dd180/1715824936386/SPOTIFYicon.png"/></a></li>
<li><a href="http://www.aspiremusicgroup.com/autumnpaige/epk" class="c-youtube" target="_blank"><img src="https://static1.squarespace.com/static/6619853ebf198429bab147a0/t/66455a86ac180d7570a0fdad/1715821190357/EPKicon.png"/></a></li>
  
</ul>
<style>
  ul.custom-social-icons {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
}
ul.custom-social-icons img {
    max-width: 40px;
}
/* change icon width - distance*/
ul.custom-social-icons li {
    width: calc(10% - 10px);
  margin-right: 25px;
}
ul span {
  display: block;
}
</style>

So what do you think @creedon @tuanphan   ... option 1 or option 2

10 hours ago, creedon said:

 

This is exactly what I needed. Ahhhhh so I had no idea what to point at as far identifying goes. ul.custom-social-icons. I'll have to go dive in that rabbit hole and learn it. Thank you creedon as always!