How to add a new social icon to Glitch in bio?

Hello! I am updating my Glitch in Bio site, and I would like to add the Pixelfed logo and link out to my Pixelfed account.

I don’t understand how the logos work in the layout / social.html file. I don’t see any of the other logos hosted on my site, so I am not sure how or where they are being pulled in from for the existing social media accounts, so I can’t figure out how to add Pixelfed.

I am a coding newbie and hoping for some tips on how to update my social links. Thanks!

layout/social.html sounds not current. maybe the glitch in bio template has updated since you remixed it?

the version I see now has … a great big .js file with svg code in string literals :grimacing:

1 Like

Hi @pamela-drouin! It sounds like you are using the older version of Glitch in Bio, here’s how to add a new logo:

  • You need the SVG for the logo, I can see some for Pixelfed here and would recommend the monochrome one to work with the Glitch in Bio styles.

  • In social.html add a section for the logo – here’s one I’ve tweaked from the source SVG linked above:

<!-- ==================== -->
<!-- Pixelfed -->
{{#if settings.social.pixelfed}}
<a aria-label="{{settings.name}} on Pixelfed" href="{{settings.social.pixelfed}}">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    class="social-profile-icon"
    viewbox="0 0 50 50"
  >
    <path
      d="M 25,50 C 11.192881,50 0,38.807119 0,25 0,11.192881 11.192881,0 25,0 38.807119,0 50,11.192881 50,25 50,38.807119 38.807119,50 25,50 Z M 23.015316,30.458015 h 4.586148 c 4.320335,0 7.822658,-3.409518 7.822658,-7.615371 0,-4.205853 -3.502323,-7.615371 -7.822658,-7.615371 h -6.619172 c -2.492501,0 -4.513072,1.967029 -4.513072,4.393483 v 17.100022 z"
    />
  </svg>
</a>
{{/if}}
  • In settings.json add an item for Pixelfed inside the social section, with your Pixelfed profile as the value:
"pixelfed" : "your-profile-link",

That should be it! Here’s how it looks in a remix of my own Glitch in Bio:

We’ll definitely look into adding Pixelfed as a default option!

2 Likes

Thank you for your detailed reply! I will give this a try and report back.

2 Likes

That worked! I was able to add Mastodon too thanks to looking at your Glitch in Bio!

1 Like

Yay thanks for the update :tada:

1 Like