Social Links to Announcement Bar 7.1

Site URL: https://allviewimaging.squarespace.com/

Hi there,

Does anyone know of a code to add social links/icons to the announcement bar in SS 7.1?  Or create a bar/section above the header and place the social links there? Attached is a screencapture of where I'd like them to be.

My site password is scocreativeclient

Thanks in advance!

16 hours ago, alishaserre said:

Site URL: https://allviewimaging.squarespace.com/

Hi there,

Does anyone know of a code to add social links/icons to the announcement bar in SS 7.1?  Or create a bar/section above the header and place the social links there? Attached is a screencapture of where I'd like them to be.

My site password is scocreativeclient

Thanks in advance!

I think we can add social icons in the footer and use some javascript code to append them to the announcement bar.

In addition, it is required to delete the link on announcement setting to disable the link on the entire bar

What is your current plan? Can you apply javascript code on your site?

If you use a Personal/Basic Plan, I think we can also FontAwesome + CSS to do this.

Which social icons you want to add?

Oh nice! The site is not on a plan just yet but it will be on the business plan.

That works! They will be Instagram, Facebook and Linkedln

On 8/2/2022 at 2:40 AM, alishaserre said:

That works! They will be Instagram, Facebook and Linkedln

If Business Plan, I think @bangank36 solution would be better.

You can add Social Block on Footer with 3 icons, then we will give the code to move it to announcement bar.

Hello!

Having a similar challenge right now - did you guys end up solving this issue? Thank you in advance! 🙂  

@tuanphan @alishaserre @Beyondspace

On 2/21/2023 at 6:47 AM, JuiceHill said:

Hello!

Having a similar challenge right now - did you guys end up solving this issue? Thank you in advance! 🙂  

You can add a Social Block to Footer, or Header, then share site url, we can give code to move it to Announcement Bar

Hi there, I'm trying to move my footer social icons to the announcement bar too. Since I'm on the Business plan, is the Javascript solution the best one to follow?

Site: https://www.venusinpieces.com/

On 1/13/2024 at 6:14 AM, alexandra_venusinpieces said:

Hi there, I'm trying to move my footer social icons to the announcement bar too. Since I'm on the Business plan, is the Javascript solution the best one to follow?

 

Site: https://www.venusinpieces.com/

Move it to right of this bar or which position?

16 hours ago, tuanphan said:

Move it to right of this bar or which position?

Preferrably on the left, but still in the colored bar area

On 1/16/2024 at 1:56 AM, alexandra_venusinpieces said:

Preferrably on the left, but still in the colored bar area

Add this code to Last Line in Code Injection > Footer

<script>
  $(document).ready(function(){
    $('footer.sections .socialaccountlinks-v2-block').insertBefore('#announcement-bar-text-inner-id p');
});
</script>
<style>
  #announcement-bar-text-inner-id p {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
  @media screen and (max-width:767px) {
    #announcement-bar-text-inner-id p {
        position: static !important;
        transform: unset !important;
    }
    #announcement-bar-text-inner-id {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
    }
}
</style>

6 hours ago, tuanphan said:

Add this code to Last Line in Code Injection > Footer

<script>
  $(document).ready(function(){
    $('footer.sections .socialaccountlinks-v2-block').insertBefore('#announcement-bar-text-inner-id p');
});
</script>
<style>
  #announcement-bar-text-inner-id p {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
  @media screen and (max-width:767px) {
    #announcement-bar-text-inner-id p {
        position: static !important;
        transform: unset !important;
    }
    #announcement-bar-text-inner-id {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
    }
}
</style>

Thank you!