Jump to content

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

Recommended Posts

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!

Flexible-Easy-Social-Sharing-Plugin-with-jQuery-jssocials.jpg

social-media-buttons-followers-count.png

Edited by MLS108
inserted more info
Link to comment
  • Replies 5
  • Views 861
  • Created
  • Last Reply

Top Posters In This Topic

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!

 

Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

 

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!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.