Adding RSS & Bluesky Logo to theme

Themes
1

Hey All…
I am hoping you might be able to assist me?
I’m trying to add a link/icon for RSS and Bluesky.
I can add the link, etc., but I am struggling with the icon (and size of the icon, which is much larger than the built in Facebook icon)
My website is ourspectrumadventures.com
I’m using the Digital Nomad theme.
The default code I have included below (which is meant for Instagram).
Thank you for any help you might be able to offer.
Ian

<script>
const instagramLink = "CHANGE_THIS_TO_YOUR_INSTAGRAM_LINK";
const socialsContainers = document.querySelectorAll('.socials');
const socialLinkHTML = `<a class="socials__link" href="${instagramLink}" target="_blank" rel="noopener noreferrer" aria-label="My Instagram Link"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none">
<path d="M9.99935 2.1665C12.2635 2.1665 12.546 2.17484 13.4343 2.2165C14.3218 2.25817 14.926 2.39734 15.4577 2.604C16.0077 2.81567 16.471 3.10234 16.9344 3.56484C17.3581 3.98142 17.686 4.48533 17.8952 5.0415C18.101 5.57234 18.241 6.17734 18.2827 7.06484C18.3218 7.95317 18.3327 8.23567 18.3327 10.4998C18.3327 12.764 18.3244 13.0465 18.2827 13.9348C18.241 14.8223 18.101 15.4265 17.8952 15.9582C17.6866 16.5147 17.3586 17.0187 16.9344 17.4348C16.5177 17.8584 16.0138 18.1863 15.4577 18.3957C14.9268 18.6015 14.3218 18.7415 13.4343 18.7832C12.546 18.8223 12.2635 18.8332 9.99935 18.8332C7.73518 18.8332 7.45268 18.8248 6.56435 18.7832C5.67685 18.7415 5.07268 18.6015 4.54102 18.3957C3.98462 18.1869 3.48062 17.859 3.06435 17.4348C2.64052 17.0183 2.31263 16.5144 2.10352 15.9582C1.89685 15.4273 1.75768 14.8223 1.71602 13.9348C1.67685 13.0465 1.66602 12.764 1.66602 10.4998C1.66602 8.23567 1.67435 7.95317 1.71602 7.06484C1.75768 6.1765 1.89685 5.57317 2.10352 5.0415C2.31205 4.48499 2.64002 3.98094 3.06435 3.56484C3.48074 3.14086 3.98471 2.81295 4.54102 2.604C5.07268 2.39734 5.67602 2.25817 6.56435 2.2165C7.45268 2.17734 7.73518 2.1665 9.99935 2.1665ZM9.99935 6.33317C8.89428 6.33317 7.83447 6.77216 7.05307 7.55356C6.27167 8.33496 5.83268 9.39477 5.83268 10.4998C5.83268 11.6049 6.27167 12.6647 7.05307 13.4461C7.83447 14.2275 8.89428 14.6665 9.99935 14.6665C11.1044 14.6665 12.1642 14.2275 12.9456 13.4461C13.727 12.6647 14.166 11.6049 14.166 10.4998C14.166 9.39477 13.727 8.33496 12.9456 7.55356C12.1642 6.77216 11.1044 6.33317 9.99935 6.33317ZM15.416 6.12484C15.416 5.84857 15.3063 5.58362 15.1109 5.38827C14.9156 5.19292 14.6506 5.08317 14.3743 5.08317C14.0981 5.08317 13.8331 5.19292 13.6378 5.38827C13.4424 5.58362 13.3327 5.84857 13.3327 6.12484C13.3327 6.4011 13.4424 6.66606 13.6378 6.86141C13.8331 7.05676 14.0981 7.1665 14.3743 7.1665C14.6506 7.1665 14.9156 7.05676 15.1109 6.86141C15.3063 6.66606 15.416 6.4011 15.416 6.12484ZM9.99935 7.99984C10.6624 7.99984 11.2983 8.26323 11.7671 8.73207C12.236 9.20091 12.4993 9.8368 12.4993 10.4998C12.4993 11.1629 12.236 11.7988 11.7671 12.2676C11.2983 12.7364 10.6624 12.9998 9.99935 12.9998C9.33631 12.9998 8.70042 12.7364 8.23158 12.2676C7.76274 11.7988 7.49935 11.1629 7.49935 10.4998C7.49935 9.8368 7.76274 9.20091 8.23158 8.73207C8.70042 8.26323 9.33631 7.99984 9.99935 7.99984Z" fill="white"/>
</svg>
</a>`
if (socialsContainers.length) {
  socialsContainers.forEach((container) => {
    container.insertAdjacentHTML("beforeend", socialLinkHTML)
  })
}
</script>
2

Hey. Looks like you can adapt the Instagram code and then it’s “just” a case of finding a BlueSky SVG to swap out.

The resizing can be a bit fiddly but this should work

<script>
const blueskyLink = "https://bsky.app/profile/yournamehere.bsky.social";
const socialsContainers = document.querySelectorAll('.socials');
const socialLinkHTML = `<a class="socials__link" href="${blueskyLink}" target="_blank" rel="noopener" aria-label="n8n Blog bluesky link"><svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 256 225.41" fill="none" style="padding:10px"><path d="M55.491 15.172c29.35 22.035 60.917 66.712 72.509 90.686c11.592-23.974 43.159-68.651 72.509-90.686C221.686-.727 256-13.028 256 26.116c0 7.818-4.482 65.674-7.111 75.068c-9.138 32.654-42.436 40.983-72.057 35.942c51.775 8.812 64.946 38 36.501 67.187c-54.021 55.433-77.644-13.908-83.696-31.676c-1.11-3.257-1.63-4.78-1.637-3.485c-.008-1.296-.527.228-1.637 3.485c-6.052 17.768-29.675 87.11-83.696 31.676c-28.445-29.187-15.274-58.375 36.5-67.187c-29.62 5.041-62.918-3.288-72.056-35.942C4.482 91.79 0 33.934 0 26.116C0-13.028 34.314-.727 55.491 15.172" fill="#1E1E1E"></svg></a>`
if (socialsContainers.length) {
  socialsContainers.forEach((container) => {
    container.insertAdjacentHTML("beforeend", socialLinkHTML)
  })
}
</script>
1 Like
3

Hey John. That’s amazing and THANK YOU.
I’m sure to you it’s simple, but I couldn’t work that out! Thank you, your a star!
Just so I know, if you don’t mind, what part of that code is the icon link?
Thanks again.
Ian

4

You mean which part is the URL for the link? This bit:

https://bsky.app/profile/yournamehere.bsky.social

You need to change it to a valid Bluesky account URL.

Or which bit is the icon? It’s an SVG embed, rather than a link to an img, so it’s this part:

<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 256 225.41" fill="none" style="padding:10px"><path d="M55.491 15.172c29.35 22.035 60.917 66.712 72.509 90.686c11.592-23.974 43.159-68.651 72.509-90.686C221.686-.727 256-13.028 256 26.116c0 7.818-4.482 65.674-7.111 75.068c-9.138 32.654-42.436 40.983-72.057 35.942c51.775 8.812 64.946 38 36.501 67.187c-54.021 55.433-77.644-13.908-83.696-31.676c-1.11-3.257-1.63-4.78-1.637-3.485c-.008-1.296-.527.228-1.637 3.485c-6.052 17.768-29.675 87.11-83.696 31.676c-28.445-29.187-15.274-58.375 36.5-67.187c-29.62 5.041-62.918-3.288-72.056-35.942C4.482 91.79 0 33.934 0 26.116C0-13.028 34.314-.727 55.491 15.172" fill="#1E1E1E"></svg>

5

Hey, I was meaning the actual icon, my apologies if that wasn’t clear.
I’ve had a look, but can’t find where (or how) you would get the icon ‘code’ to swap out the Instagram or Bluesky logo. Would you be able to tell me where you get them from so that I can add an RSS logo.
Thanks again for everything!
Ian

6

Sure…

In your OG code example, this was an Instagram logo:

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none">
<path d="M9.99935 2.1665C12.2635 2.1665 12.546 2.17484 13.4343 2.2165C14.3218 2.25817 14.926 2.39734 15.4577 2.604C16.0077 2.81567 16.471 3.10234 16.9344 3.56484C17.3581 3.98142 17.686 4.48533 17.8952 5.0415C18.101 5.57234 18.241 6.17734 18.2827 7.06484C18.3218 7.95317 18.3327 8.23567 18.3327 10.4998C18.3327 12.764 18.3244 13.0465 18.2827 13.9348C18.241 14.8223 18.101 15.4265 17.8952 15.9582C17.6866 16.5147 17.3586 17.0187 16.9344 17.4348C16.5177 17.8584 16.0138 18.1863 15.4577 18.3957C14.9268 18.6015 14.3218 18.7415 13.4343 18.7832C12.546 18.8223 12.2635 18.8332 9.99935 18.8332C7.73518 18.8332 7.45268 18.8248 6.56435 18.7832C5.67685 18.7415 5.07268 18.6015 4.54102 18.3957C3.98462 18.1869 3.48062 17.859 3.06435 17.4348C2.64052 17.0183 2.31263 16.5144 2.10352 15.9582C1.89685 15.4273 1.75768 14.8223 1.71602 13.9348C1.67685 13.0465 1.66602 12.764 1.66602 10.4998C1.66602 8.23567 1.67435 7.95317 1.71602 7.06484C1.75768 6.1765 1.89685 5.57317 2.10352 5.0415C2.31205 4.48499 2.64002 3.98094 3.06435 3.56484C3.48074 3.14086 3.98471 2.81295 4.54102 2.604C5.07268 2.39734 5.67602 2.25817 6.56435 2.2165C7.45268 2.17734 7.73518 2.1665 9.99935 2.1665ZM9.99935 6.33317C8.89428 6.33317 7.83447 6.77216 7.05307 7.55356C6.27167 8.33496 5.83268 9.39477 5.83268 10.4998C5.83268 11.6049 6.27167 12.6647 7.05307 13.4461C7.83447 14.2275 8.89428 14.6665 9.99935 14.6665C11.1044 14.6665 12.1642 14.2275 12.9456 13.4461C13.727 12.6647 14.166 11.6049 14.166 10.4998C14.166 9.39477 13.727 8.33496 12.9456 7.55356C12.1642 6.77216 11.1044 6.33317 9.99935 6.33317ZM15.416 6.12484C15.416 5.84857 15.3063 5.58362 15.1109 5.38827C14.9156 5.19292 14.6506 5.08317 14.3743 5.08317C14.0981 5.08317 13.8331 5.19292 13.6378 5.38827C13.4424 5.58362 13.3327 5.84857 13.3327 6.12484C13.3327 6.4011 13.4424 6.66606 13.6378 6.86141C13.8331 7.05676 14.0981 7.1665 14.3743 7.1665C14.6506 7.1665 14.9156 7.05676 15.1109 6.86141C15.3063 6.66606 15.416 6.4011 15.416 6.12484ZM9.99935 7.99984C10.6624 7.99984 11.2983 8.26323 11.7671 8.73207C12.236 9.20091 12.4993 9.8368 12.4993 10.4998C12.4993 11.1629 12.236 11.7988 11.7671 12.2676C11.2983 12.7364 10.6624 12.9998 9.99935 12.9998C9.33631 12.9998 8.70042 12.7364 8.23158 12.2676C7.76274 11.7988 7.49935 11.1629 7.49935 10.4998C7.49935 9.8368 7.76274 9.20091 8.23158 8.73207C8.70042 8.26323 9.33631 7.99984 9.99935 7.99984Z" fill="white"/>
</svg>

I got SVG code for a Bluesky logo from here and replaced the Instagram icon with that.

You’d need to get something similar for RSS.

NB for the Bluesky logo I had to work out what values to give the viewbox and I had to add padding too to get it consistent with what you had!

You can’t just copy and paste the code block to add both Bluesky and RSS: you need to rewrite the script so that it generates both of the buttons.

i.e. you’d need to do const blueskyLink and const rssLink and then add the link and image for both in const socialLinkHTML

Another option would be to edit the theme and hard code all the social networks you want into it.

It would be a really good idea to pass feedback on to the theme developer to let them know how you’re trying to use the feature as there might be better ways for this to be supported in future releases.