📸Add Your Instagram Link (Icon)
Last updated
Last updated
If you want to add a link to your Instagram so that an Instagram icon is displayed in the header, footer, hero section, 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 an icon:
<script>
const instagramLink = "CHANGE_THIS_TO_YOUR_INSTAGRAM_LINK";
const socialsContainers = document.querySelectorAll('.social');
const heroSectionSocials = document.querySelector(".hero-section-socials");
const socialLinkHTML = `<a class="social__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>`
const heroSectionSocialLinkHTML = `<a class="hero-section-socials__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>`
if (socialsContainers.length) {
socialsContainers.forEach((container) => {
container.insertAdjacentHTML("beforeend", socialLinkHTML)
})
}
if (heroSectionSocials) {
heroSectionSocials.insertAdjacentHTML("beforeend", heroSectionSocialLinkHTML);
}
</script>Copy this code and paste it inside Site footer input area
Then, change "CHANGE_THIS_TO_YOUR_INSTAGRAM_LINK" to your Instagram link, like this:
Click Save to save your work!
