Notion Widget: Social Media Icons – Colourful

Life Preview

Add this widget to Notion

  • Follow this tutorial to create a GitHub repository.
  • Copy the code here into a new GitHub file.
  • Start editing the file to make it yours!
    1. Remove the icons you don’t want. by deleting the code between the “start” and “End” sections. For example, if you don’t want the Reddit icon, then delete this part from your code.
      <!-- Start reddit Icon -->
      <div id="reddit" onclick="navigate(this.id)" class="fill reddit">
        <span class="icon"><i class="fab fa-reddit"></i></span>
      </div>
      <!-- End reddit Icon -->

2. Add Your own links in this part of the code. (Ignore the icons you’ve removed earlier)

if (id === "blog")
          window.open("https://blog.shorouk.dev", '_blank').focus(); //Add the url to your blog

        else if (id === "email") {
          window.open("mailto:someone@yoursite.com", '_blank').focus(); //Add your email after "mailto:""
        }

        else if (id === "facebook") {
          window.open("https://facebook.com/", '_blank').focus(); //Add the url to your facebook page or account
        }
        else if (id === "instagram") {
          window.open("instagram.com", '_blank').focus(); //Add the url to your instagram account
        }
        else if (id === "linkedin") {
          window.open("https://www.linkedin.com/", '_blank').focus(); //Add the url to your pinterest account
        }
        else if (id === "twitter") {
          window.open("https://twitter.com/", '_blank').focus(); //Add the url to your pinterest account
        }
        else if (id === "reddit") {
          window.open("https://www.reddit.com/", '_blank').focus(); //Add the url to your reddit account
        }
        else if (id === "tiktok") {
          window.open("https://www.tiktok.com/", '_blank').focus(); //Add the url to your tiktok account
        }
        else if (id === "youtube") {
          window.open("https://www.youtube.com/", '_blank').focus(); //Add the url to your youtube account
        }
        else if (id === "pinterest") {
          window.open("https://www.pinterest.com/", '_blank').focus(); //Add the url to your pinterest account
        }
        else if (id === "telegram") {
          window.open("https://web.telegram.org/", '_blank').focus(); //Add the url to your telegram account
        }

More Customization

Want the links to open on the same page instead of a new tab?

In your file, find and replace all “_blank” with “_parent”

for example

 else if (id === "email") {
          window.open("mailto:someone@yoursite.com", '_blank').focus(); //Add your email after "mailto:""
}

becomes…

 else if (id === "email") {
          window.open("mailto:someone@yoursite.com", '_parent').focus(); //Add your email after "mailto:""
}