Bluesky Icon

Hi,

I've added my Bluesky profile to the "Social Links" block but it doesn't pickup the Bluesky icon. Will squarespace add native support for this or is there another way?

I use the Social Links in my contact page and on the footer (2nd icon)

https://hudcostreets.org/contact

Thanks.

3 hours ago, johanhccs said:

I've added my Bluesky profile to the "Social Links" block but it doesn't pickup the Bluesky icon. Will squarespace add native support for this or is there another way?

Bluesky hasn't been added yet. I've submitted a feature request and others may want to do the same. 

In the meantime, there are workarounds using code, as this example for a TikTok logo shows:

Did this help? Please give feedback by clicking an icon below  ⬇️

Site URL: https://www.gordonhaywood.com/

I know this has been covered on mutiple occassions however I'm stuck!!? 🙃

Using the post below as a reference

I have a png file on my desktop (attached FYI)

• Can I use it? It is 1,024 x 1,024 does it ned to be resized?
• how do I get it uploaded to my squarespace site?
• how do I point to it in CSS?

Many thanks from a new newbie 🙏 🤪

PS I've sent a request to Squarespace for it to be added as an option to Social Links...

I noticed Linktree social icon also missing

a[href*="linktr.ee"][class*="icon"] svg {
  display: none;
}
a[href*="linktr.ee"][class*="icon"] {
  display: inline-block;
  width: 1em;
  height: 1em;
  box-sizing: border-box; 
  background-repeat: no-repeat;
  background-position: center center;

  background-size: 50% 50%;
  background-color: #000;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='m13.736 5.853l4.005-4.117l2.325 2.38l-4.2 4.005h5.908v3.305h-5.937l4.229 4.108l-2.325 2.334l-5.74-5.769l-5.741 5.769l-2.325-2.325l4.229-4.108H2.226V8.121h5.909l-4.2-4.004l2.324-2.381l4.005 4.117V0h3.472zm-3.472 10.306h3.472V24h-3.472z'/%3E%3C/svg%3E");
}

@Beyondspace

Thanks so much for the blue sky icon code. I've not tried to add the code yet,  bedtime in Oz 😜

Thanks also for linktree, not using it as yet but will keep the code for when I do.

🙏🙏

On 11/17/2024 at 8:02 PM, gordonhaywood said:

@Beyondspace

Thanks so much for the blue sky icon code. I've not tried to add the code yet,  bedtime in Oz 😜

Thanks also for linktree, not using it as yet but will keep the code for when I do.

🙏🙏

Let me know once you have add the bluesky, I am sure you need some modification since your current set up is slightly different

I made a dedicated resource page for Custom social icons 

9 hours ago, Beyondspace said:

Let me know once you have add the bluesky, I am sure you need some modification since your current set up is slightly different

@Beyondspace

Placed the code in Custom CSS box and as you supected there is no impact in the Social Link box  - the Bluesky icon doesnt appear.

3 hours ago, gordonhaywood said:

@Beyondspace

Placed the code in Custom CSS box and as you supected there is no impact in the Social Link box  - the Bluesky icon doesnt appear.

where is your social icons, I only see facebook link

1 hour ago, Beyondspace said:

where is your social icons, I only see facebook link

I've hidden the others.

When I go to edit the icons there are only 4 social choices plus can add a link manually with only the link icon available.

Just now, gordonhaywood said:

I've hidden the others.

When I go to edit the icons there are only 4 social choices plus can add a link manually with only the link icon available.

 

You gotta enable bluesky so I can see how it display

9 minutes ago, Beyondspace said:

You gotta enable bluesky so I can see how it display

sorry I'm dumb... Bluesky isnt an option in the Social links. Only the 4 in the screen shot attached plus a manual option...😐

I've aded a manual link to my profile in Bluesky 🙃

7 minutes ago, gordonhaywood said:

sorry I'm dumb... Bluesky isnt an option in the Social links. Only the 4 in the screen shot attached plus a manual option...😐

I've aded a manual link to my profile in Bluesky 🙃

hmm, Have you try click the Add Social Link button and just paste the link of Bluesky profile there, eg: https://bsky.app/profile/velinxi.bsky.social

2 minutes ago, Beyondspace said:

hmm, Have you try click the Add Social Link button and just paste the link of Bluesky profile there, eg: https://bsky.app/profile/velinxi.bsky.social

 

Yep, it's there - showing as a link icon

On 11/18/2024 at 9:41 AM, gordonhaywood said:

Yep, it's there - showing as a link icon

Use this

a[href*="bsky.app"][class*="icon"] svg {
  display: none;
}
a[href*="bsky.app"][class*="icon"] {
  background: transparent;
  display: inline-block;
  width: 20px;
  height: 20px;
  padding: 10px;
  background-repeat: no-repeat;
  background-size: 50% 50%;
  background-position: center center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cg fill='none'%3E%3Cpath d='m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z'/%3E%3Cpath fill='white' d='M5.892 2.93c-1.78-1.06-3.813.446-3.63 2.359l.398 4.185c.176 1.855 1.84 4.026 4.195 3.823C4.5 14 3.132 15.865 4.88 18.145c.286.373.597.745.914 1.062s.69.628 1.062.914c1.88 1.441 4.375-.65 5.055-2.69l.09-.268l.09.269c.68 2.04 3.174 4.13 5.055 2.689c.372-.286.745-.597 1.062-.914s.628-.69.914-1.062c1.747-2.28.379-4.145-1.976-4.848c2.355.203 4.018-1.968 4.195-3.823l.399-4.185c.182-1.913-1.852-3.418-3.631-2.36C15.2 4.66 13.485 7.393 12 9.902C10.515 7.392 8.8 4.66 5.892 2.93'/%3E%3C/g%3E%3C/svg%3E");
}

oh wow, thank you so much. You dont have an option to buy you a coffee but perhaps you could point me to a resource where I could learn some basic CSS code so I can at least try to understand what you've done 🙏😃

9 minutes ago, gordonhaywood said:

oh wow, thank you so much. You dont have an option to buy you a coffee but perhaps you could point me to a resource where I could learn some basic CSS code so I can at least try to understand what you've done 🙏😃

You can use online resource like https://www.w3schools.com/

We dropped X and added Bluesky.  There is no image available on Squarespace, so for now it shows only a link.  Will an image for Bluesky be added? 

@cardiff1952

I contacted sqaurespace re a Bluesky icon - this is the response:

Quote

We don't currently offer that feature, but I sent your suggestion to our development team on your behalf. While we can't guarantee implementation of every suggestion, customer feedback is an important part of how we continue to improve our platform, so we appreciate your input.

3 minutes ago, cardiff1952 said:

We dropped X and added Bluesky.  There is no image available on Squarespace, so for now it shows only a link.  Will an image for Bluesky be added? 

You need some custom css for bluesky, have you try my answer?

I saw it but I think it is above my pay grade.  If I get brave I will try it.  I hope Squarespace adds it, along with other images than just those they have now.  Thank you for replying

Just copy the CSS snippet to your custom CSS panel at Website - Pages - Website Tools (under not Linked) - Custom CSS

11 hours ago, Beyondspace said:

Just copy the CSS snippet to your custom CSS panel at Website - Pages - Website Tools (under not Linked) - Custom CSS

@Beyondspace Which snippet works to add the BlueSky logo to Squarespace? I added the link under the social links panel, but it is just showing up as a link image and not the BlueSky logo.

5 hours ago, holdenjl said:

@Beyondspace Which snippet works to add the BlueSky logo to Squarespace? I added the link under the social links panel, but it is just showing up as a link image and not the BlueSky logo.

https://forum.squarespace.com/topic/324198-bluesky-icon/#findComment-811866

@holdenjl what is your site URL though?

On 11/17/2024 at 7:06 AM, Beyondspace said:

Use this Bluesky social icon for your specific site (dark bg, white logo) @johanhccs

a[href*="bsky.app"] svg {
  display: none;
}
a[href*="bsky.app"] {
  background: #000;
  display: inline-block;
  width: 1em;
  height: 1em;
  box-sizing: border-box; 
  background-repeat: no-repeat;
  background-size: 80% 80%;
  background-position: center center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cg fill='none'%3E%3Cpath d='m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z'/%3E%3Cpath fill='white' d='M5.892 2.93c-1.78-1.06-3.813.446-3.63 2.359l.398 4.185c.176 1.855 1.84 4.026 4.195 3.823C4.5 14 3.132 15.865 4.88 18.145c.286.373.597.745.914 1.062s.69.628 1.062.914c1.88 1.441 4.375-.65 5.055-2.69l.09-.268l.09.269c.68 2.04 3.174 4.13 5.055 2.689c.372-.286.745-.597 1.062-.914s.628-.69.914-1.062c1.747-2.28.379-4.145-1.976-4.848c2.355.203 4.018-1.968 4.195-3.823l.399-4.185c.182-1.913-1.852-3.418-3.631-2.36C15.2 4.66 13.485 7.393 12 9.902C10.515 7.392 8.8 4.66 5.892 2.93'/%3E%3C/g%3E%3C/svg%3E");
}

Thank you! Both Bluesky and Linktree worked perfectly.