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!
- 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="social 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:""
}Change the icons’ grey background colour
Search for this part of the code.
.social {
background-color: #eae9e9;
width: 55px;
height: 55px;
border-radius: 50%;
display: grid;
place-items: center;
}To change the colour pick a different colour from Here. Copy its HEX code. and replace the default #eae9e9 with your new colour code.