Jump to content

Is there a way to have social blocks link to different social media on different pages

Recommended Posts

Site URL: http://callummcallister.com/

Hey!

In short I want the social blocks to be able to link to personal social media on the whole site, except the page www.callummcallister.com/toodles where I want them to link to my band's social media. I also want the personal social media blocks to only have email, twitter and instagram, whereas I want the band social media to link to a variety of different social media accounts. 

Is there a way to do this? 

Link to comment

Add Code Block > Insert this code > Replace with your social url

<ul class="t-social">
<li>
  <a href="#">
  <i class="fa fa-twitter"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-pinterest"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-facebook"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-instagram"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-skype"></i></a>
  </li>
<li>
  <a href="#">
  <i class="fa fa-dribble"></i>
  </a>
</li>
</ul>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
  /* code block padding top bottom */
  .code-block {
    padding-top: 0;
    padding-bottom: 0;
}
  /* social icons code */
.t-social {
    display: block;
    margin: 0 auto;
    padding-top: 5px;
    text-align: center;
  	padding-left: 0;
}
  .t-social li {
  display: inline-block;
    margin: 0;
    line-height: 100%!important;
  }
  .t-social .fa {
    font-size: 26px;
    margin: 0 8px;
    color: #8d8d8d;
}
  .t-social .fa:hover {color:#4285f4;}
</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
On 5/12/2020 at 1:24 PM, tuanphan said:

Add Code Block > Insert this code > Replace with your social url


<ul class="t-social">
<li>
  <a href="#">
  <i class="fa fa-twitter"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-pinterest"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-facebook"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-instagram"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-skype"></i></a>
  </li>
<li>
  <a href="#">
  <i class="fa fa-dribble"></i>
  </a>
</li>
</ul>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
  /* code block padding top bottom */
  .code-block {
    padding-top: 0;
    padding-bottom: 0;
}
  /* social icons code */
.t-social {
    display: block;
    margin: 0 auto;
    padding-top: 5px;
    text-align: center;
  	padding-left: 0;
}
  .t-social li {
  display: inline-block;
    margin: 0;
    line-height: 100%!important;
  }
  .t-social .fa {
    font-size: 26px;
    margin: 0 8px;
    color: #8d8d8d;
}
  .t-social .fa:hover {color:#4285f4;}
</style>

 

Thank you I'll give that a go! 

Cheers!

Link to comment
10 minutes ago, CallumMcAllister said:

Hey @tuanphan sorry to bother again!

Where in the code do the social urls need to go? And also is there a way to add the icons for youtube and email as well?

Thanks in advance. This has been really helpful. 

Actually sorry @tuanphan I managed to figure that out. The last thing 2 things I'm trying to figure out are if it's possible to get the links to open a new tab. And also whether it's possible to set the other icons to change colour when you hover, but the icon hovered over to remain the same, as is the style on the in-built social blocks on the site? 

 

Thanks in advance for your help. 

Link to comment
8 hours ago, CallumMcAllister said:

Actually sorry @tuanphan I managed to figure that out. The last thing 2 things I'm trying to figure out are if it's possible to get the links to open a new tab. And also whether it's possible to set the other icons to change colour when you hover, but the icon hovered over to remain the same, as is the style on the in-built social blocks on the site? 

 

Thanks in advance for your help. 

Which icons? Can you share link to page where you inserted icons?

With icon hover: You can use CSS

With open in new tab, above code, edit this code

Quote

<li>
  <a href="#" target="_blank">
  <i class="fa fa-dribble"></i>
  </a>
</li>

target="_blank" mean open link in new tab

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
6 hours ago, tuanphan said:

Which icons? Can you share link to page where you inserted icons?

With icon hover: You can use CSS

http://callummcallister.com/toodles

I've left in the squarespace social block above the coded one to show the difference. 


image.thumb.png.7c80cc254a2cad6a5684820afad3b6bf.png
 

In the screenshot I am hovering over the twitter icon, which stays the same colour while the other two icons turns grey. 

 

Thanks again! this has been very helpful. The code for a new tab worked a treat. 

Link to comment
2 hours ago, CallumMcAllister said:

http://callummcallister.com/toodles

I've left in the squarespace social block above the coded one to show the difference.  been very helpful. The code for a new tab worked a treat. 

Which plan do you use? Personal or Business?

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
12 hours ago, kenners said:

@tuanphan Sorry to jump in on this- but @CallumMcAllister was able to figure out where to put the social URL. I am new to the coding portion, so I don't know where to put it! Help :) 

Insert Code Block > Paste this code

<ul class="t-social">
<li>
  <a href="#">
  <i class="fa fa-twitter"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-pinterest"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-facebook"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-instagram"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-skype"></i></a>
  </li>
<li>
  <a href="#">
  <i class="fa fa-dribble"></i>
  </a>
</li>
</ul>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
  /* code block padding top bottom */
  .code-block {
    padding-top: 0;
    padding-bottom: 0;
}
  /* social icons code */
.t-social {
    display: block;
    margin: 0 auto;
    padding-top: 5px;
    text-align: center;
  	padding-left: 0;
}
  .t-social li {
  display: inline-block;
    margin: 0;
    line-height: 100%!important;
  }
  .t-social .fa {
    font-size: 26px;
    margin: 0 8px;
    color: #8d8d8d;
}
  .t-social .fa:hover {color:#4285f4;}
</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
19 hours ago, kenners said:

@tuanphan Sorry to jump in on this- but @CallumMcAllister was able to figure out where to put the social URL. I am new to the coding portion, so I don't know where to put it! Help 🙂

It's where it says href = "#" replace the # with the url. 

22 hours ago, tuanphan said:

Which plan do you use? Personal or Business?

@tuanphan It's a personal plan. 

Link to comment
  • 6 months later...
On 5/15/2020 at 7:35 PM, tuanphan said:

Insert Code Block > Paste this code


<ul class="t-social">
<li>
  <a href="#">
  <i class="fa fa-twitter"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-pinterest"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-facebook"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-instagram"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-skype"></i></a>
  </li>
<li>
  <a href="#">
  <i class="fa fa-dribble"></i>
  </a>
</li>
</ul>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
  /* code block padding top bottom */
  .code-block {
    padding-top: 0;
    padding-bottom: 0;
}
  /* social icons code */
.t-social {
    display: block;
    margin: 0 auto;
    padding-top: 5px;
    text-align: center;
  	padding-left: 0;
}
  .t-social li {
  display: inline-block;
    margin: 0;
    line-height: 100%!important;
  }
  .t-social .fa {
    font-size: 26px;
    margin: 0 8px;
    color: #8d8d8d;
}
  .t-social .fa:hover {color:#4285f4;}
</style>

 

here do i add social media url? can i do the same for tiktok and Whatsapp?

Link to comment
7 hours ago, NICOLE-KEVIN said:

here do i add social media url? can i do the same for tiktok and Whatsapp?

It's where it says href = "#" replace the # with the url. 

Above code is FontAwesome 4. It doesn't support Tiktok & Whatsapp.

You can use FontAwesome 5, register an account > Get Font link > Then replace 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

with FA 5 link

To add new icons, use this syntax

Quote

<li>
  <a href="#">
  <i class="fa fa-dribble"></i>
  </a>
</li>

Replace i class fa .... with Whatapp or Tiktok syntax.

See here. https://fontawesome.com/icons/tiktok?style=brands

https://fontawesome.com/icons/whatsapp?style=brands

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
  • 4 months later...
On 5/12/2020 at 8:24 AM, tuanphan said:

Add Code Block > Insert this code > Replace with your social url


<ul class="t-social">
<li>
  <a href="#">
  <i class="fa fa-twitter"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-pinterest"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-facebook"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-instagram"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-skype"></i></a>
  </li>
<li>
  <a href="#">
  <i class="fa fa-dribble"></i>
  </a>
</li>
</ul>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
  /* code block padding top bottom */
  .code-block {
    padding-top: 0;
    padding-bottom: 0;
}
  /* social icons code */
.t-social {
    display: block;
    margin: 0 auto;
    padding-top: 5px;
    text-align: center;
  	padding-left: 0;
}
  .t-social li {
  display: inline-block;
    margin: 0;
    line-height: 100%!important;
  }
  .t-social .fa {
    font-size: 26px;
    margin: 0 8px;
    color: #8d8d8d;
}
  .t-social .fa:hover {color:#4285f4;}
</style>

 

Hi Tuanpan,

Thanks for the code here, it seems to have worked. But I can't seem to change the color of the icons?

Any thoughts? sethebackend.com is the site.

Thanks

 

Link to comment
21 hours ago, Alex29 said:

Hi Tuanpan,

Thanks for the code here, it seems to have worked. But I can't seem to change the color of the icons?

Any thoughts? sethebackend.com is the site.

Thanks

 

To change color, edit this code

 .t-social .fa {
    font-size: 26px;
    margin: 0 8px;
    color: #8d8d8d;
}

 

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
  • 1 month later...
On 5/12/2020 at 5:54 PM, tuanphan said:

Add Code Block > Insert this code > Replace with your social url


<ul class="t-social">
<li>
  <a href="#">
  <i class="fa fa-twitter"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-pinterest"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-facebook"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-instagram"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-skype"></i></a>
  </li>
<li>
  <a href="#">
  <i class="fa fa-dribble"></i>
  </a>
</li>
</ul>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
  /* code block padding top bottom */
  .code-block {
    padding-top: 0;
    padding-bottom: 0;
}
  /* social icons code */
.t-social {
    display: block;
    margin: 0 auto;
    padding-top: 5px;
    text-align: center;
  	padding-left: 0;
}
  .t-social li {
  display: inline-block;
    margin: 0;
    line-height: 100%!important;
  }
  .t-social .fa {
    font-size: 26px;
    margin: 0 8px;
    color: #8d8d8d;
}
  .t-social .fa:hover {color:#4285f4;}
</style>

 

Hi @tuanphan! I am trying to achieve a similar effect with a separate social link block, I have a personal plan as well so I tried this code but I need to use it for my Behance and Vimeo accounts - how can I include the social icons for these two platforms? 

Link to comment
10 hours ago, sastavangogh said:

Hi @tuanphan! I am trying to achieve a similar effect with a separate social link block, I have a personal plan as well so I tried this code but I need to use it for my Behance and Vimeo accounts - how can I include the social icons for these two platforms? 

Use this

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
<ul class="t-social">
<li>
  <a href="http://m.me/giannicipriano">
  <i class="fab fa-facebook-messenger"></i>
  </a>
</li>
<li>
  <a href="https://wa.me/393285677923">
  <i class="fab fa-whatsapp"></i>
  </a>
</li>
<li>
  <a href="mailto:gianni@giannicipriano.com">
  <i class="fas fa-at"></i>
  </a>
</li>
  <li>
  <a href="www.behance.com">
  <i class="fab fa-behance"></i>
  </a>
</li>
  <li>
  <a href="www.vimeo.com">
  <i class="fab fa-vimeo-v"></i>
  </a>
</li>
</ul>
<style>
  /* code block padding top bottom */
  .code-block {
    padding-top: 0;
    padding-bottom: 0;
}
  /* social icons code */
.t-social {
    display: block;
    margin: 0 auto;
    padding-top: 5px;
    text-align: center;
  	padding-left: 0;
}
  .t-social li {
  display: inline-block;
    margin: 0;
    line-height: 100%!important;
  }
  .t-social li i {
    font-size: 30px;
    margin: 0 20px;
}
</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
  • 1 month later...
11 hours ago, cecepalmquist said:

Spotify need this

<li>
  <a href="https://open.spotify.com/artist/0lSfUP83siewf0pciB2iXP?si=oIWWp8RJRQ66GG7r25Upbw&dl_branch=1&nd=1" target="_blank">
  <i class="fab fa-spotify"></i>
  </a>
</li>

Apple: wait a moment. Fontawesome Icon website is down now...Will check again next day.

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
On 7/29/2021 at 3:52 AM, cecepalmquist said:

Apple, How about this icon?

https://fontawesome.com/v5.15/icons/apple

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 months later...
On 10/25/2021 at 8:56 AM, LMauri said:

Hello there,

Using the above code, Is there a way to make the icons look like the ones in the below image?

I would be very grateful. 

Thanks

 

 

Screenshot 2021-10-25 at 05.50.59.png

Yes. Possible. Can you share link to page where you added the code. We can see & tweak the code easier

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/5/2021 at 8:23 AM, paul2009 said:

Although you've posted this in the 'Coding' section, you won't need code to style product titles.

You can do this in the Site Styles panel on your Squarespace 7.1 site.

Go to Design > Site Styles > Fonts > Assign Styles.

Scroll down to the Product Detail Page section and click Item Title.

7point1-site-styles-product-detail-page.png.b0aedb8cd1e60b0d9912b50052ad355e.png

In Size: Size, change Heading to another heading choice or Custom to select a non-standard size.

site-styles-7-1-product-title-size.gif.244920b90f89e4aac687f880af356dfa.gif

  If this helps you, please click "Like" below  ⬇️

7point1-site-styles-product-detail-page-item-title-size.png

 

On 5/12/2020 at 5:24 AM, tuanphan said:

Add Code Block > Insert this code > Replace with your social url

<ul class="t-social">
<li>
  <a href="#">
  <i class="fa fa-twitter"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-pinterest"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-facebook"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-instagram"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-skype"></i></a>
  </li>
<li>
  <a href="#">
  <i class="fa fa-dribble"></i>
  </a>
</li>
</ul>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
  /* code block padding top bottom */
  .code-block {
    padding-top: 0;
    padding-bottom: 0;
}
  /* social icons code */
.t-social {
    display: block;
    margin: 0 auto;
    padding-top: 5px;
    text-align: center;
  	padding-left: 0;
}
  .t-social li {
  display: inline-block;
    margin: 0;
    line-height: 100%!important;
  }
  .t-social .fa {
    font-size: 26px;
    margin: 0 8px;
    color: #8d8d8d;
}
  .t-social .fa:hover {color:#4285f4;}
</style>

 

Hi, @tuanphan! I used this code under the second social icon row on "Meet Julian" in this site: https://sierraboggess.squarespace.com/together password is 2021

Is there a way to make the icons similar to the first row, even the hover colors and effects, and especially the YouTube icon? Thanks so much!

Edited by paigethirtytwo
Link to comment
On 11/9/2021 at 4:53 AM, paigethirtytwo said:

 

Hi, @tuanphan! I used this code under the second social icon row on "Meet Julian" in this site: https://sierraboggess.squarespace.com/together password is 2021

Is there a way to make the icons similar to the first row, even the hover colors and effects, and especially the YouTube icon? Thanks so much!

It looks same here. Did you figure it out? If no, can you explain in more detail?

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
  • 5 months later...

Hello @tuanphan,

Thanks so much for posting this code. I am having trouble copying and pasting into Squarespace and I was wondering if you could help me figure out what I am doing wrong. 

I have tried copying and pasting the code a number of times, but I keep getting a "syntax error" in the first line of code. I think it might be that the "ul" in <ul class="t-social"> is purple instead of black as it is in your example, but I am not sure what I am doing wrong.  

image.png.68621c420a600d62efb2e6e0bf10ca6b.png

Thanks so much for your help!

 

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.