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

19 hours ago, parkjhp said:

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.  

Thanks so much for your help!

 

First, don't edit the code. Adding #block...will make code Invalid

Second, the code in screenshot is HTML code, you need to add it to Code Block

@tuanphan Thank you so much! I completely missed this was for Code Block, thanks for your help!

I was able to add the social media links and they are working great. But for some reason, the only social media link that is showing up out of facebook, twitter, youtube, and a website link is the website link. Below is a screenshot. 

If possible, I would love for the social media icons to show up like:

If you have any advice, I'd so appreciate it!

11 hours ago, parkjhp said:

@tuanphan Thank you so much! I completely missed this was for Code Block, thanks for your help!

I was able to add the social media links and they are working great. But for some reason, the only social media link that is showing up out of facebook, twitter, youtube, and a website link is the website link. Below is a screenshot. 

If possible, I would love for the social media icons to show up like:

If you have any advice, I'd so appreciate it!

Which code did you add? We can tweak it easier

You want: Facebook, Instagram, Twitter, Youtube + Link Icon?

@tuanphan - Yes, those five would be amazing. Thanks so much!

@tuanphan I'm sorry, I'm not sure what is the best way to share the code I am using right now. Here are a few screenshots and I also copied and pasted it here. Thanks again!

<ul class="t-social">
<li>
  <a href="https://www.facebook.com/parkerquartet/"target="_blank">
  <i class="fa fa-facebook"></i>
  </a>
</li>
<li>
  <a href="https://www.instagram.com/parker_quartet/?hl=en"target="_blank">
  <i class="fa fa-instagram"></i>
  </a>
</li>
<li>
  <a href="https://twitter.com/parkerquartet?lang=en"target="_blank">
  <i class="fa fa-twitter"></i>
  </a>
</li>
<li>
  <a href="https://www.youtube.com/c/ParkerQuartet"target="_blank">
  <i class="fa fa-youtube"</i></a>
  </li>
<li>
    <a href="http://www.parkerquartet.com/" target="_blank">
  <i class="fa fa-link"></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: #00000;
}
  .t-social .fa:hover {color:#4285f4;}
</style>

Hi @tuanphan! I'm sorry to bother, but I was wondering if you had any advice after looking at the code? Thanks so much for your help!

On 5/12/2022 at 5:58 AM, parkjhp said:

Hi @tuanphan! I'm sorry to bother, but I was wondering if you had any advice after looking at the code? Thanks so much for your help!

Hi,

I just tested the code on my site. It looks fine to me. What is your problem?

Hi @tuanphan

I would like to insert phonecall and website link ?
Do you think thaht is possible ?

Regards,

15 hours ago, Francoff said:

Hi @tuanphan

I would like to insert phonecall and website link ?
Do you think thaht is possible ?

Regards,

You mean these icons?

• https://fontawesome.com/search?p=1&q=phone&s=solid%2Cbrands
• https://fontawesome.com/search?q=link&s=solid%2Cbrands

Absolutely, 
How do i can do it?
Thanks so much @tuanphan !

On 6/4/2022 at 10:06 PM, Francoff said:

 

Absolutely, 
How do i can do it?
Thanks so much @tuanphan !

Sorry for delay. Just had a long trip with family. Do you still need help?

Hello, I need help with this code. I read all of this and know where to put the social URL's, but I tried to only do facebook and instagram but the links wont work for both. I put the URL links for Facebook and Instagram, but only facebook will open or vice versa every time I do it. How do. I fix this? 

Here is the code I'm using, could you tell me if it's correct? Need help on this ASAP.

<ul class="t-social">
<li>
  <a href="#">
  </a>
</li>
<li>
  <a href="#">
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-facebook"></i>
  </a>
</li>
<li>
  <a href="www.facebook.com/andrea.bdjsalon">
  <i class="fa fa-instagram"></i>
  </a>
</li>
<li>
  <a href="www.instagram.com/andrea.bdjsalon">
  </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: #0d0a0a;
}
  .t-social .fa:hover {color:#4285f4;}
</style>

11 hours ago, Libbyeee said:

Hello, I need help with this code. I read all of this and know where to put the social URL's, but I tried to only do facebook and instagram but the links wont work for both. I put the URL links for Facebook and Instagram, but only facebook will open or vice versa every time I do it. How do. I fix this? 

Here is the code I'm using, could you tell me if it's correct? Need help on this ASAP.

<ul class="t-social">
<li>
  <a href="#">
  </a>
</li>
<li>
  <a href="#">
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-facebook"></i>
  </a>
</li>
<li>
  <a href="www.facebook.com/andrea.bdjsalon">
  <i class="fa fa-instagram"></i>
  </a>
</li>
<li>
  <a href="www.instagram.com/andrea.bdjsalon">
  </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: #0d0a0a;
}
  .t-social .fa:hover {color:#4285f4;}
</style>

this code is incorrect

<li>
  <a href="www.instagram.com/andrea.bdjsalon">
  </li>

it need

<li>
  <a href="www.instagram.com/andrea.bdjsalon"><i class="fab fa-instagram"></i></a>
  </li>

Okay, so what would the full code be? I don't know where to put the right one you just sent?

2 minutes ago, Libbyeee said:

Okay, so what would the full code be? I don't know where to put the right one you just sent?

 

2 hours ago, tuanphan said:

this code is incorrect

<li>
  <a href="www.instagram.com/andrea.bdjsalon">
  </li>

it need

<li>
  <a href="www.instagram.com/andrea.bdjsalon"><i class="fab fa-instagram"></i></a>
  </li>

 

The facebook one won't work either when I do this, is there any chance you could write out the full code so both of the social links work? I can't seem to get it to work or figure out where to place what you told me to.

13 minutes ago, Libbyeee said:

 

The facebook one won't work either when I do this, is there any chance you could write out the full code so both of the social links work? I can't seem to get it to work or figure out where to place what you told me to.

When I write fab fa, the instagram logo turns into a little box.

On 6/23/2022 at 8:06 PM, tuanphan said:

this code is incorrect

<li>
  <a href="www.instagram.com/andrea.bdjsalon">
  </li>

it need

<li>
  <a href="www.instagram.com/andrea.bdjsalon"><i class="fab fa-instagram"></i></a>
  </li>

 

Sorry, forgot you are using FA 4.7 version. My code is FA 5.x

it should be

<li>
  <a href="www.instagram.com/andrea.bdjsalon"><i class="fa fa-instagram" aria-hidden="true"></i></a>
  </li>

On 6/24/2022 at 6:49 PM, tuanphan said:

Sorry, forgot you are using FA 4.7 version. My code is FA 5.x

it should be

<li>
  <a href="www.instagram.com/andrea.bdjsalon"><i class="fa fa-instagram" aria-hidden="true"></i></a>
  </li>

 

Where do I put that in the code?

On 6/23/2022 at 8:30 AM, Libbyeee said:

Hello, I need help with this code. I read all of this and know where to put the social URL's, but I tried to only do facebook and instagram but the links wont work for both. I put the URL links for Facebook and Instagram, but only facebook will open or vice versa every time I do it. How do. I fix this? 

Here is the code I'm using, could you tell me if it's correct? Need help on this ASAP.

<ul class="t-social">
<li>
  <a href="#">
  </a>
</li>
<li>
  <a href="#">
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-facebook"></i>
  </a>
</li>
<li>
  <a href="www.facebook.com/andrea.bdjsalon">
  <i class="fa fa-instagram"></i>
  </a>
</li>
<li>
  <a href="www.instagram.com/andrea.bdjsalon">
  </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: #0d0a0a;
}
  .t-social .fa:hover {color:#4285f4;}
</style>

Here