How to add social media icons not included in a theme

Themes
1

I tried this several ways.

  1. Using Ghost’s code generator, with the font awesome – didn’t work
  2. Coded inside the authors.hbs and social.hbs. – still didn’t work

I tried two ways of integrating Instagram

  1. {{#if instagram}} <a class=“gh-author-page-social-link” href=“https://instagram.com/{{instagram}}” target=“_blank” rel=“noopener” aria-label=“{{name}} {{t “Instagram”}}”> {{>icons/instagram}} {{/if}}
  2. {{#if instagram}} <a class=“gh-author-page-social-link” href=“https://instagram.com/{{instagram}}” target=“_blank” rel=“noopener” aria-label=“{{name}} {{t “Instagram”}}”> {{>icons/instagram}} {{/if}}

It didn’t work. I am getting errors like: Templates must contain valid handlebars

How does one add social media accounts with their graphic icons?

2

Hello @sinebuff ,

The code to add more social media depends on your theme. Which theme are you using for your Ghost website? Or, if possible, please include your Ghost website URL.

3

Code you provided didn’t work, unfortunately – but mine with instagram code worked.

4

Try this script:
(There is a high chance that the new icons will be bigger in size. If that happens, please revert your code.)


const socialsContainers = document.querySelectorAll('.gh-social-icons');

const instagramLink = "CHANGE_THIS_TO_YOUR_INSTAGRAM_LINK";
const youtubeLink = "CHANGE_THIS_TO_YOUR_YOUTUBE_LINK";
const threadsLink = "CHANGE_THIS_TO_YOUR_THREADS_LINK";
const tiktokLink = "CHANGE_THIS_TO_YOUR_TIKTOK_LINK";

const socialLinkHTML = `<a class="gh-social-icon-link" href="${instagramLink}" target="_blank" rel="noopener noreferrer" aria-label="My Instagram Link"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 2.66675C19.6226 2.66675 20.0746 2.68008 21.496 2.74675C22.916 2.81341 23.8826 3.03608 24.7333 3.36675C25.6133 3.70541 26.3546 4.16408 27.096 4.90408C27.774 5.57061 28.2986 6.37687 28.6333 7.26675C28.9626 8.11608 29.1866 9.08408 29.2533 10.5041C29.316 11.9254 29.3333 12.3774 29.3333 16.0001C29.3333 19.6227 29.32 20.0747 29.2533 21.4961C29.1866 22.9161 28.9626 23.8827 28.6333 24.7334C28.2995 25.6238 27.7748 26.4302 27.096 27.0961C26.4292 27.7738 25.623 28.2984 24.7333 28.6334C23.884 28.9627 22.916 29.1867 21.496 29.2534C20.0746 29.3161 19.6226 29.3334 16 29.3334C12.3773 29.3334 11.9253 29.3201 10.504 29.2534C9.08396 29.1867 8.11729 28.9627 7.26663 28.6334C6.37639 28.2994 5.57 27.7747 4.90396 27.0961C4.22583 26.4297 3.7012 25.6234 3.36663 24.7334C3.03596 23.8841 2.81329 22.9161 2.74663 21.4961C2.68396 20.0747 2.66663 19.6227 2.66663 16.0001C2.66663 12.3774 2.67996 11.9254 2.74663 10.5041C2.81329 9.08275 3.03596 8.11741 3.36663 7.26675C3.70027 6.37632 4.22503 5.56984 4.90396 4.90408C5.57019 4.22572 6.37653 3.70105 7.26663 3.36675C8.11729 3.03608 9.08263 2.81341 10.504 2.74675C11.9253 2.68408 12.3773 2.66675 16 2.66675ZM16 9.33341C14.2318 9.33341 12.5362 10.0358 11.2859 11.286C10.0357 12.5363 9.33329 14.232 9.33329 16.0001C9.33329 17.7682 10.0357 19.4639 11.2859 20.7141C12.5362 21.9644 14.2318 22.6667 16 22.6667C17.7681 22.6667 19.4638 21.9644 20.714 20.7141C21.9642 19.4639 22.6666 17.7682 22.6666 16.0001C22.6666 14.232 21.9642 12.5363 20.714 11.286C19.4638 10.0358 17.7681 9.33341 16 9.33341ZM24.6666 9.00008C24.6666 8.55805 24.491 8.13413 24.1785 7.82157C23.8659 7.50901 23.442 7.33341 23 7.33341C22.5579 7.33341 22.134 7.50901 21.8214 7.82157C21.5089 8.13413 21.3333 8.55805 21.3333 9.00008C21.3333 9.44211 21.5089 9.86603 21.8214 10.1786C22.134 10.4912 22.5579 10.6667 23 10.6667C23.442 10.6667 23.8659 10.4912 24.1785 10.1786C24.491 9.86603 24.6666 9.44211 24.6666 9.00008ZM16 12.0001C17.0608 12.0001 18.0782 12.4215 18.8284 13.1717C19.5785 13.9218 20 14.9392 20 16.0001C20 17.0609 19.5785 18.0784 18.8284 18.8285C18.0782 19.5787 17.0608 20.0001 16 20.0001C14.9391 20.0001 13.9217 19.5787 13.1715 18.8285C12.4214 18.0784 12 17.0609 12 16.0001C12 14.9392 12.4214 13.9218 13.1715 13.1717C13.9217 12.4215 14.9391 12.0001 16 12.0001Z" fill="#1D1D1F"/>
</svg>
</a>`

socialLinkHTML = socialLinkHTML + `<a class="gh-social-icon-link" href="${youtubeLink}" target="_blank" rel="noopener noreferrer" aria-label="My Youtube Link"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="none">
<path d="M549.7 124.1c-6.3-23.7-24.8-42.3-48.3-48.6C458.8 64 288 64 288 64S117.2 64 74.6 75.5c-23.5 6.3-42 24.9-48.3 48.6-11.4 42.9-11.4 132.3-11.4 132.3s0 89.4 11.4 132.3c6.3 23.7 24.8 41.5 48.3 47.8C117.2 448 288 448 288 448s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zm-317.5 213.5V175.2l142.7 81.2-142.7 81.2z"/></svg>
</a>`

socialLinkHTML = socialLinkHTML + `<a class="gh-social-icon-link" href="${threadsLink}" target="_blank" rel="noopener noreferrer" aria-label="My Threads Link"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="none">
<path d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM294.2 244.3c19.5 9.3 33.7 23.5 41.2 40.9c10.4 24.3 11.4 63.9-20.2 95.4c-24.2 24.1-53.5 35-95.1 35.3h-.2c-46.8-.3-82.8-16.1-106.9-46.8C91.5 341.8 80.4 303.7 80 256v-.1-.1c.4-47.7 11.5-85.7 33-113.1c24.2-30.7 60.2-46.5 106.9-46.8h.2c46.9 .3 83.3 16 108.2 46.6c12.3 15.1 21.3 33.3 27 54.4l-26.9 7.2c-4.7-17.2-11.9-31.9-21.4-43.6c-19.4-23.9-48.7-36.1-87-36.4c-38 .3-66.8 12.5-85.5 36.2c-17.5 22.3-26.6 54.4-26.9 95.5c.3 41.1 9.4 73.3 26.9 95.5c18.7 23.8 47.4 36 85.5 36.2c34.3-.3 56.9-8.4 75.8-27.3c21.5-21.5 21.1-47.9 14.2-64c-4-9.4-11.4-17.3-21.3-23.3c-2.4 18-7.9 32.2-16.5 43.2c-11.4 14.5-27.7 22.4-48.4 23.5c-15.7 .9-30.8-2.9-42.6-10.7c-13.9-9.2-22-23.2-22.9-39.5c-1.7-32.2 23.8-55.3 63.5-57.6c14.1-.8 27.3-.2 39.5 1.9c-1.6-9.9-4.9-17.7-9.8-23.4c-6.7-7.8-17.1-11.8-30.8-11.9h-.4c-11 0-26 3.1-35.6 17.6l-23-15.8c12.8-19.4 33.6-30.1 58.5-30.1h.6c41.8 .3 66.6 26.3 69.1 71.8c1.4 .6 2.8 1.2 4.2 1.9l.1 .5zm-71.8 67.5c17-.9 36.4-7.6 39.7-48.8c-8.8-1.9-18.6-2.9-29-2.9c-3.2 0-6.4 .1-9.6 .3c-28.6 1.6-38.1 15.5-37.4 27.9c.9 16.7 19 24.5 36.4 23.6l-.1-.1z"/></svg>
</a>`

socialLinkHTML = socialLinkHTML + `<a class="gh-social-icon-link" href="${tiktokLink}" target="_blank" rel="noopener noreferrer" aria-label="My TikTok Link"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="none">
<path d="M448 209.9a210.1 210.1 0 0 1 -122.8-39.3V349.4A162.6 162.6 0 1 1 185 188.3V278.2a74.6 74.6 0 1 0 52.2 71.2V0l88 0a121.2 121.2 0 0 0 1.9 22.2h0A122.2 122.2 0 0 0 381 102.4a121.4 121.4 0 0 0 67 20.1z"/></svg>
</a>`

if (socialsContainers.length) {
  socialsContainers.forEach((container) => {
    container.insertAdjacentHTML("beforeend", socialLinkHTML)
  })
}
</script>
5

Thanks – tried a couple of times but they didn’t work.

The Instagram code I got from Pitch worked, though. I wonder why other social media accounts don’t work.