📸Add Your Instagram, LinkedIn and GitHub Links (Icons)

If you want to add a link to your LinkedIn or/and Instagram or/and GitHub so that an LinkedIn/Instagram/GitHub icon(s) is displayed in the header, footer, sidebar, and also in the mobile menu of your website, follow this:

Go to Settings > Code injection from the admin menu
Choose Site footer

Below is the code you need to add for different icons:

Instagram

<script>
  const instagramLink = "CHANGE_THIS_TO_YOUR_INSTAGRAM_LINK";
  const instagramLinkHTML = `<a class="gh-social-icon-link" href="${instagramLink}" target="_blank" rel="noopener noreferrer" aria-label="My Instagram Link"><svg width="32" height="32" viewBox="2 2 28 28" 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>`
</script>

<script>
  const linkedInLink = "CHANGE_THIS_TO_YOUR_LINKEDIN_LINK";
  const linkedInLinkHTML = `<a class="gh-social-icon-link" href="${linkedInLink}" target="_blank" rel="noopener noreferrer" aria-label="My LinkedIn Link"><svg fill="#000000" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="1.5 1.5 21 21" xml:space="preserve" width="64px" height="64px">
<g id="SVGRepo_iconCarrier"><path d="M20,2H4C2.9,2,2,2.9,2,4v16c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V4C22,2.9,21.1,2,20,2z M8.1,18H5V9.4h3.1V18z M6.5,8.4 L6.5,8.4C5.6,8.4,5,7.8,5,7s0.6-1.4,1.6-1.4c0.9,0,1.5,0.6,1.5,1.4S7.5,8.4,6.5,8.4z M19,18h-3.1v-4.7c0-1.3-0.8-1.6-1.1-1.6 s-1.3,0.2-1.3,1.6c0,0.2,0,4.7,0,4.7h-3.1V9.4h3.1v1.2c0.4-0.7,1.2-1.2,2.7-1.2s2.7,1.2,2.7,3.9L19,18L19,18z"/></g>
</svg></a>`
</script>

GitHub

<script>
  const gitHubLink = "CHANGE_THIS_TO_YOUR_GITHUB_LINK";
  const gitHubLinkHTML = `<a class="gh-social-icon-link" href="${gitHubLink}" target="_blank" rel="noopener noreferrer" aria-label="My GitHib Link"><svg width="24" height="24" viewBox="0 0 98 98" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#24292f"/></svg></a>`
</script>

Insert the necessary icons code into the Site footer field.

Then, change "CHANGE_THIS_TO_YOUR_INSTAGRAM/LINKEDIN/GITHUB_LINK" to your corresponding links, like this:

Then, you need to add this code:

This code should always be placed after the icons code.

<script>
  const socialsContainers = document.querySelectorAll('.gh-social-icons');
  if (socialsContainers.length) {
    socialsContainers.forEach((container) => {
      if (instagramLink) {
        container.insertAdjacentHTML("beforeend", instagramLinkHTML)
      }

       if (linkedInLink) {
        container.insertAdjacentHTML("beforeend", linkedInLinkHTML)
      }

      if (gitHubLink) {
        container.insertAdjacentHTML("beforeend", gitHubLinkHTML)
      }
    })
  }
</script>

Your Site footer Code Injection should look similar to this:

Click Save to save your work!

PreviousSocial Media Icons NextLightbox (Image Zoom) Feature

Last updated 4 months ago