Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Social Media Blocks


NickiP

Question

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

5 answers to this question

Recommended Posts

  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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...