Add Bluesky Social Link to Squarespace

Free

Nov 12

A quick script to add the Bluesky Social logo to your social icons.

Here’s a really simple <script> that will allow you to add your bluesky icon to your social links. Just paste this into your site footer code injection area.

<!-- Add BlueSky Icon -->
<script>
  document.addEventListener('DOMContentLoaded', () => {
    function replaceBskyIcons() {
      const symbolContainer = document.querySelector('[data-usage="social-icons-svg"]');
      if (symbolContainer && !document.getElementById('wm-bsky')) {
        const symbolDef = `<symbol id="wm-bsky" viewBox="0 0 64 64">
  <path d="M22.1 20.0406C26.1091 23.001 30.4455 28.7618 32 31.9623V40.4434C32 40.2834 31.9182 40.4434 31.7545 40.9235C30.9364 43.3238 27.7455 52.6051 20.3 45.1641C16.4545 41.2435 18.2545 37.323 25.2909 36.2029C21.2818 36.8429 16.7 35.7228 15.4727 31.4022C14.6545 30.122 14 22.601 14 21.4808C14 16.2801 18.6636 17.8803 22.1 20.0406ZM41.9328 20.02C37.9237 22.9804 33.5545 28.7618 32 31.9623V40.4434C32 40.2834 32.0818 40.4434 32.2455 40.9235C33.0636 43.3238 36.2545 52.6051 43.7 45.1641C47.5455 41.2435 45.7455 37.323 38.7091 36.2029C42.7182 36.8429 47.3 35.7228 48.5273 31.4022C49.3455 30.122 50 22.601 50 21.4808C50 16.2801 45.3364 17.8803 41.9 20.0406L41.9328 20.02Z"></path>
</symbol>`;
        symbolContainer.insertAdjacentHTML('beforeend', symbolDef);
      }

      // Find all Bluesky icons and replace their content
      const bskyHeaderLinks = document.querySelectorAll('.icon[href*="https://bsky.app"], .sqs-svg-icon--wrapper[href*="https://bsky.app"]');
      console.log(bskyHeaderLinks)
      bskyHeaderLinks.forEach(link => {
        console.log('replace', link)
        link.innerHTML = '<svg viewBox="23 23 64 64"><use xlink:href="#wm-bsky" width="110" height="110"></use></svg>';
      });
    }

    replaceBskyIcons();
  })
</script>