Social Media Blocks

Site URL: https://www.thesaintsipswich.org

Im building a directory type site for a local shopping area.  It isnt a commercial site as such, just for info.  I'm using the Portfolio/project pages to feature each business as a project, which works well for my purposes.  I was adding the social media block for the featured business' social media links.  I then realised that changing the links for one business changed them site wide, including the main site links in the header.  

Surely this isn't an unusual ask, and I would expect Squarespace to have this facility without having to go into extra coding.  

Any help would be appreciated.  Thanks

21 hours ago, NickiP said:

Site URL: https://www.thesaintsipswich.org

Im building a directory type site for a local shopping area.  It isnt a commercial site as such, just for info.  I'm using the Portfolio/project pages to feature each business as a project, which works well for my purposes.  I was adding the social media block for the featured business' social media links.  I then realised that changing the links for one business changed them site wide, including the main site links in the header.  

Surely this isn't an unusual ask, and I would expect Squarespace to have this facility without having to go into extra coding.  

Any help would be appreciated.  Thanks

Hi. You can add Code Block to insert multiple social icon links.

Which social icons you will use? We will tweak code block for you

Thankyou.  Its website, Facebook and Instagram.  : )

On 7/25/2021 at 8:29 AM, tuanphan said:

Hi. You can add Code Block to insert multiple social icon links.

Which social icons you will use? We will tweak code block for you

Thankyou.  Its website, Facebook and Instagram.  : )

21 hours ago, NickiP said:

Thankyou.  Its website, Facebook and Instagram.  : )

First, add a Code Block in Footer >> paste this code

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
<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>

Next, under each member >> add a Code Block >> paste this code.

<ul class="t-social">
<li>
  <a href="http://m.me/facebook">
  <i class="fab fa-facebook-messenger"></i>
  </a>
</li>
<li>
  <a href="https://instagram.com">
  <i class="fab fa-instagram"></i>
  </a>
</li>
</ul>

Repeat this Code Block for other members. Replace instagram/facebook with corressponding urls

3 hours ago, tuanphan said:

First, add a Code Block in Footer >> paste this code

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
<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>

Next, under each member >> add a Code Block >> paste this code.

<ul class="t-social">
<li>
  <a href="http://m.me/facebook">
  <i class="fab fa-facebook-messenger"></i>
  </a>
</li>
<li>
  <a href="https://instagram.com">
  <i class="fab fa-instagram"></i>
  </a>
</li>
</ul>

Repeat this Code Block for other members. Replace instagram/facebook with corressponding urls

Thanks very much - I'll give it a try. N