How to add multiple social media links to a page and follower counts?

Site URL: https://www.bespoke-reps.com/

Hi All!

I am building a site for a photo agency. Each photographer will have their own page. They are all "social influencers" so it's important that each of their pages we have unique links to their social accounts. We are using Squarespace 7.1 template and have the business edition subscription. I'm looking to do 2 things:

1. Create unique links for the social media blocks that we insert.  We saw font awesome as a solution. We will need icons for Instagram, facebook, twitter, youtube, vimeo, wikipedia. We are ok creating our own icons, or we also saw some solutions using font awesome (which is why I'm mentioning the types of icons we will need just incase font awesome is not doable)
2. Insert/Enter follower count for each social link. We are ok with it not autogenerating. Attached are examples for wordpress script to create this that we like. We like the concept and understand it would be exactly the same when we apply to squarespace.

You can see the site and an example photographer page here:

www.bespoke-reps.com

Click "Roster" 

Click "Aaron Huey"

Password: squarespacehelp

Thanks for all the help friends!

Hi,

Both are possible.

Which icons do you want to add? We can test & give code easier

The social icons we would need to experiment with are:

instagram, twitter, facebook, tiktok, linkedin, youtube, vimeo

I've been able to add icons with links that open to a lightbox over the page. That is successful. I am struggling with the follower count. But I"m also open to doing this however you suggest

Here is the page I was building:

https://onion-snail-wjhl.squarespace.com/artist-landing-page-template

Thank you @tuanphan!

On 4/11/2022 at 8:28 AM, MLS108 said:

The social icons we would need to experiment with are:

instagram, twitter, facebook, tiktok, linkedin, youtube, vimeo

I've been able to add icons with links that open to a lightbox over the page. That is successful. I am struggling with the follower count. But I"m also open to doing this however you suggest

Here is the page I was building:

https://onion-snail-wjhl.squarespace.com/artist-landing-page-template

Thank you @tuanphan!

 

Add a Code Block > Paste this code > Replace Pixabay with your image url

<ul class="custom-social-icons">
<li><a href="https://www.instagram.com/" class="c-instagram" target="_blank"><img src="https://cdn.pixabay.com/photo/2017/06/05/07/58/butterfly-2373175__340.png"/><span>15k</span></a></li>
<li><a href="https://twitter.com/" class="c-twitter" target="_blank"><img src="https://cdn.pixabay.com/photo/2022/02/15/00/40/lemonade-7014122__340.jpg"/><span>10k</span></a></li>
<li><a href="https://www.facebook.com" class="c-facebook" target="_blank"><img src="https://cdn.pixabay.com/photo/2022/03/01/20/58/peace-genius-7042013__340.jpg"/><span>125k</span></a></li>  
<li><a href="https://www.tiktok.com" class="c-tiktok" target="_blank"><img src="https://cdn.pixabay.com/photo/2022/03/01/20/58/peace-genius-7042013__340.jpg"/><span>1M</span></a></li>
<li><a href="https://www.linkedin.com/company/" class="c-linkedin" target="_blank"><img src="https://cdn.pixabay.com/photo/2022/02/22/17/25/stork-7029266__340.jpg"/><span>200</span></a></li>
<li><a href="https://www.youtube.com" class="c-youtube" target="_blank"><img src="https://cdn.pixabay.com/photo/2022/03/01/20/58/peace-genius-7042013__340.jpg"/><span>15k</span></a></li>
<li><a href="https://www.vimeo.com" class="c-vimeo" target="_blank"><img src="https://cdn.pixabay.com/photo/2022/03/01/20/58/peace-genius-7042013__340.jpg"/><span>15M</span></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: 30px;
}
/* change icon width - 20px is space between icons */
ul.custom-social-icons li {
    width: calc(10% - 20px);
  margin-right: 20px;
}
ul span {
  display: block;
}
</style>

Absolutely incredible. Thank you so very much for your help! 

On 4/11/2022 at 8:28 AM, MLS108 said:

The social icons we would need to experiment with are:

instagram, twitter, facebook, tiktok, linkedin, youtube, vimeo

I've been able to add icons with links that open to a lightbox over the page. That is successful. I am struggling with the follower count. But I"m also open to doing this however you suggest

Here is the page I was building:

https://instazoom.mobi/instagram-schrift/

Thank you @tuanphan!

 

Tks for your website!