Jump to content

Social Media Blocks

Recommended Posts

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

Edited by NickiP
Typo
Link to comment
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

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/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.  : )

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

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
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

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.