Add Social Links to Multiple External Sources (In Addition to Own Social Links)

Is there any way to add social links to external profiles, while keeping the social icons the same as the ones used for my personal profile?

I currently have my personal social links within the footer of each page, but would like to include links (with social icons) to other social profiles within the content.

Thanks in advance!

Bob

I've done this by using FontAwesome for the icons and creating code blocks. This post explains how to add them to the nav bar, but the same general method would work in any code block: https://christyprice.com/squarespace-tips-tricks/how-to-add-social-media-icons-to-squarespace-navigation

You can see it in action (not in the nav bar) here: https://www.orinrice.com/about

Perfect, thank you!

On 1/4/2020 at 4:03 AM, christyprice said:

I've done this by using FontAwesome for the icons and creating code blocks. This post explains how to add them to the nav bar, but the same general method would work in any code block: https://christyprice.com/squarespace-tips-tricks/how-to-add-social-media-icons-to-squarespace-navigation

You can see it in action (not in the nav bar) here: https://www.orinrice.com/about

Hi Christy, this was very useful, but I although I understand how to add the icon using the <i...> tag, I don't understand how to add the link to it if it is not meant to be in the header/menu.  I want to do it exactly like you did at https://www.orinrice.com/about, could you perhaps explain a little more what I need to do after step 2 in your tutorial? I added a code box, added the <i class="fab fa-instagram"></i>, but then I'm stuck.

9 hours ago, MishaGo said:

Hi Christy, this was very useful, but I although I understand how to add the icon using the <i...> tag, I don't understand how to add the link to it if it is not meant to be in the header/menu.  I want to do it exactly like you did at https://www.orinrice.com/about, could you perhaps explain a little more what I need to do after step 2 in your tutorial? I added a code box, added the <i class="fab fa-instagram"></i>, but then I'm stuck.

Hi @MishaGo, you can check out the source code and pull from there. On that particular site I used two FontAwesome icons stacked. Here's that part of the code: 

<a href="https://www.linkedin.com/" target="_blank"><span class="fa-stack fa-1x">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fab fa-linkedin-in fa-stack-1x fa-inverse"></i>
</span></a>

You would replace the URL with yours. 

On 1/24/2020 at 9:40 PM, christyprice said:

Hi @MishaGo, you can check out the source code and pull from there. On that particular site I used two FontAwesome icons stacked. Here's that part of the code: 

<a href="https://www.linkedin.com/" target="_blank"><span class="fa-stack fa-1x">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fab fa-linkedin-in fa-stack-1x fa-inverse"></i>
</span></a>

You would replace the URL with yours. 

Thank you so much, this was hugely useful.

Hello!

I am trying to create the below with two separate sets of social links on 7.1. I have tried to follow the instructions above but I can figure it out. could you please advise?

https://www.orinrice.com/about

thanks, Rob

1 hour ago, RobMcCallum said:

Hello!

I am trying to create the below with two separate sets of social links on 7.1. I have tried to follow the instructions above but I can figure it out. could you please advise?

 

https://www.orinrice.com/about

 

thanks, Rob

I see email, linkedin icons worked here?

Hi, I used the code above and it worked perfectly, but now the circles and alignment seem to have been thrown out?

Any ideas what to do? Would someone have a look and advise? Thanks in advance.

https://www.netiro.co.uk/our-team/tim-gear-evans

On 9/29/2020 at 9:48 PM, netiro said:

Hi, I used the code above and it worked perfectly, but now the circles and alignment seem to have been thrown out?

Any ideas what to do? Would someone have a look and advise? Thanks in advance.

https://www.netiro.co.uk/our-team/tim-gear-evans

Can you paste all code you inserted? We can check easier.

3 hours ago, tuanphan said:

Can you paste all code you inserted? We can check easier.

<a href="https://www.linkedin.com/in/tim-gear-evans-6a5580/" target="_blank"><span class="fa-stack fa-1x">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fab fa-linkedin-in fa-stack-1x fa-inverse">
  </i>
 
</span></a>

<a href="mailto:tim.gear-evans@netiro.co.uk" target="_blank"><span class="fa-stack fa-1x">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fab far fa-envelope fa-stack-1x fa-inverse"></i>
</span></a>