Social Sharing Bar

Easily add social media buttons to your webpage. Your content will be easy to share with just one click.

// ************************
// Adjustable options(1):
// ************************
var type = "addtoany"; // "addtoany" or "sharethis".
// ************************
// Adjustable options(1) End.
// ************************

// Create div for social media links.
var socialMediaDiv = document.createElement("div");
var url = window.location.href;

// If type is addtoany...
if (type === "addtoany") {
// ************************
// Adjustable options(2):
// ************************
var position = "left"; // "left" or "right".

// Comment out the sharing options you don't want to appear
const socialMediaLinks = new Map();
socialMediaLinks.set("facebook", ['<a href="https://www.addtoany.com/add_to/facebook?linkurl=', '&amp;linkname=" onclick="window.open(this.href, \'mywin\', \'left=20,top=20,width=500,height=500,toolbar=1,resizable=0\'); return false;"><img src="https://static.addtoany.com/buttons/facebook.svg" width="32" height="32" style="background-color:royalblue; border-radius: 8px"></a>']);
socialMediaLinks.set("twitter", ['<a href="https://www.addtoany.com/add_to/twitter?linkurl=', '&amp;linkname=" onclick="window.open(this.href, \'mywin\', \'left=20,top=20,width=500,height=500,toolbar=1,resizable=0\'); return false;"><img src="https://static.addtoany.com/buttons/twitter.svg" width="32" height="32" style="background-color:#03A9F4; border-radius: 8px"></a>']);
socialMediaLinks.set("whatsapp", ['<a href="https://www.addtoany.com/add_to/whatsapp?linkurl=', '&amp;linkname=" onclick="window.open(this.href, \'mywin\', \'left=20,top=20,width=500,height=500,toolbar=1,resizable=0\'); return false;"><img src="https://static.addtoany.com/buttons/whatsapp.svg" width="32" height="32" style="background-color:#00e676; border-radius: 8px"></a>']);
// socialMediaLinks.set("pinterest", ['<a href="https://www.addtoany.com/add_to/pinterest?linkurl=', '&amp;linkname=" onclick="window.open(this.href, \'mywin\', \'left=20,top=20,width=500,height=500,toolbar=1,resizable=0\'); return false;"><img src="https://static.addtoany.com/buttons/pinterest.svg" width="32" height="32" style="background-color:#cb2027; border-radius: 8px"></a>']);
// socialMediaLinks.set("reddit", ['<a href="https://www.addtoany.com/add_to/reddit?linkurl=', '&amp;linkname=" onclick="window.open(this.href, \'mywin\', \'left=20,top=20,width=500,height=500,toolbar=1,resizable=0\'); return false;"><img src="https://static.addtoany.com/buttons/reddit.svg" width="32" height="32" style="background-color:#ff4500; border-radius: 8px"></a>']);
// socialMediaLinks.set("evernote", ['<a href="https://www.addtoany.com/add_to/evernote?linkurl=', '&amp;linkname=" onclick="window.open(this.href, \'mywin\', \'left=20,top=20,width=500,height=500,toolbar=1,resizable=0\'); return false;"><img src="https://static.addtoany.com/buttons/evernote.svg" width="32" height="32" style="background-color:#9799a0; border-radius: 8px"></a>']);
// socialMediaLinks.set("gmail", ['<a href="https://www.addtoany.com/add_to/gmail?linkurl=', '&amp;linkname=" onclick="window.open(this.href, \'mywin\', \'left=20,top=20,width=500,height=500,toolbar=1,resizable=0\'); return false;"><img src="https://static.addtoany.com/buttons/gmail.svg" width="32" height="32" style="background-color:#d44638; border-radius: 8px"></a>']);
// socialMediaLinks.set("line", ['<a href="https://www.addtoany.com/add_to/line?linkurl=', '&amp;linkname=" onclick="window.open(this.href, \'mywin\', \'left=20,top=20,width=500,height=500,toolbar=1,resizable=0\'); return false;"><img src="https://static.addtoany.com/buttons/line.svg" width="32" height="32" style="background-color:#00c300; border-radius: 8px"></a>']);
// socialMediaLinks.set("skype", ['<a href="https://www.addtoany.com/add_to/skype?linkurl=', '&amp;linkname=" onclick="window.open(this.href, \'mywin\', \'left=20,top=20,width=500,height=500,toolbar=1,resizable=0\'); return false;"><img src="https://static.addtoany.com/buttons/skype.svg" width="32" height="32" style="background-color:#00aff0; border-radius: 8px"></a>']);
// socialMediaLinks.set("telegram", ['<a href="https://www.addtoany.com/add_to/telegram?linkurl=', '&amp;linkname=" onclick="window.open(this.href, \'mywin\', \'left=20,top=20,width=500,height=500,toolbar=1,resizable=0\'); return false;"><img src="https://static.addtoany.com/buttons/telegram.svg" width="32" height="32" style="background-color:#29b6f6; border-radius: 8px"></a>']);
// socialMediaLinks.set("wechat", ['<a href="https://www.addtoany.com/add_to/wechat?linkurl=', '&amp;linkname=" onclick="window.open(this.href, \'mywin\', \'left=20,top=20,width=500,height=500,toolbar=1,resizable=0\'); return false;"><img src="https://static.addtoany.com/buttons/wechat.svg" width="32" height="32" style="background-color:#00c80f; border-radius: 8px"></a>']);
// socialMediaLinks.set("linkedin", ['<a href="https://www.addtoany.com/add_to/linkedin?linkurl=', '&amp;linkname=" onclick="window.open(this.href, \'mywin\', \'left=20,top=20,width=500,height=500,toolbar=1,resizable=0\'); return false;"><img src="https://static.addtoany.com/buttons/linkedin.svg" width="32" height="32" style="background-color:#0077b5; border-radius: 8px"></a>']);
// socialMediaLinks.set("baidu", ['<a href="https://www.addtoany.com/add_to/baidu?linkurl=', '&amp;linkname=" onclick="window.open(this.href, \'mywin\', \'left=20,top=20,width=500,height=500,toolbar=1,resizable=0\'); return false;"><img src="https://static.addtoany.com/buttons/baidu.svg" width="32" height="32" style="background-color:#2529d8; border-radius: 8px"></a>']);
// socialMediaLinks.set("qzone", ['<a href="https://www.addtoany.com/add_to/qzone?linkurl=', '&amp;linkname=" onclick="window.open(this.href, \'mywin\', \'left=20,top=20,width=500,height=500,toolbar=1,resizable=0\'); return false;"><img src="https://static.addtoany.com/buttons/qzone.svg" width="32" height="32" style="background-color:#f1c40f; border-radius: 8px"></a>']);
// socialMediaLinks.set("tumblr", ['<a href="https://www.addtoany.com/add_to/tumblr?linkurl=', '&amp;linkname=" onclick="window.open(this.href, \'mywin\', \'left=20,top=20,width=500,height=500,toolbar=1,resizable=0\'); return false;"><img src="https://static.addtoany.com/buttons/tumblr.svg" width="32" height="32" style="background-color:#35465c; border-radius: 8px"></a>']);
// socialMediaLinks.set("sina_weibo", ['<a href="https://www.addtoany.com/add_to/sina_weibo?linkurl=', '&amp;linkname=" onclick="window.open(this.href, \'mywin\', \'left=20,top=20,width=500,height=500,toolbar=1,resizable=0\'); return false;"><img src="https://static.addtoany.com/buttons/sina_weibo.svg" width="32" height="32" style="background-color:#e1162c; border-radius: 8px"></a>']);
// socialMediaLinks.set("vkontakte", ['<a href="https://www.addtoany.com/add_to/vk?linkurl=', '&amp;linkname=" onclick="window.open(this.href, \'mywin\', \'left=20,top=20,width=500,height=500,toolbar=1,resizable=0\'); return false;"><img src="https://static.addtoany.com/buttons/vk.svg" width="32" height="32" style="background-color:#4c6c91; border-radius: 8px"></a>']);
// socialMediaLinks.set("renren", ['<a href="https://www.addtoany.com/add_to/renren?linkurl=', '&amp;linkname=" onclick="window.open(this.href, \'mywin\', \'left=20,top=20,width=500,height=500,toolbar=1,resizable=0\'); return false;"><img src="https://static.addtoany.com/buttons/renren.svg" width="32" height="32" style="background-color:#005baa; border-radius: 8px"></a>']);
// socialMediaLinks.set("delicious", ['<a href="https://www.addtoany.com/add_to/delicious?linkurl=', '&amp;linkname=" onclick="window.open(this.href, \'mywin\', \'left=20,top=20,width=500,height=500,toolbar=1,resizable=0\'); return false;"><img src="https://static.addtoany.com/buttons/delicious.svg" width="32" height="32" style="background-color:#205cc0; border-radius: 8px"></a>']);
// socialMediaLinks.set("xing", ['<a href="https://www.addtoany.com/add_to/xing?linkurl=', '&amp;linkname=" onclick="window.open(this.href, \'mywin\', \'left=20,top=20,width=500,height=500,toolbar=1,resizable=0\'); return false;"><img src="https://static.addtoany.com/buttons/xing.svg" width="32" height="32" style="background-color:#1a7576; border-radius: 8px"></a>']);
// socialMediaLinks.set("livejournal", ['<a href="https://www.addtoany.com/add_to/livejournal?linkurl=', '&amp;linkname=" onclick="window.open(this.href, \'mywin\', \'left=20,top=20,width=500,height=500,toolbar=1,resizable=0\'); return false;"><img src="https://static.addtoany.com/buttons/livejournal.svg" width="32" height="32" style="background-color:#00b0ea; border-radius: 8px"></a>']);
socialMediaLinks.set("email", ['<a href="https://www.addtoany.com/add_to/email?linkurl=', '&amp;linkname=" onclick="window.open(this.href, \'mywin\', \'left=20,top=20,width=500,height=500,toolbar=1,resizable=0\'); return false;"><img src="https://static.addtoany.com/buttons/email.svg" width="32" height="32" style="background-color:#F44336; border-radius: 8px"></a>']);
socialMediaLinks.set("share", ['<a href="https://www.addtoany.com/share#url=', '&amp;title=" onclick="window.open(this.href, \'mywin\', \'left=20,top=20,width=500,height=500,toolbar=1,resizable=0\'); return false;"><img src="https://static.addtoany.com/buttons/a2a.svg" width="32" height="32" style="background-color:#aaa; border-radius: 8px"></a>']);
// ************************
// Adjustable options(2) End.
// ************************

let links = '';
for (const [key, value] of socialMediaLinks.entries()) {
links += value[0] + url + value[1];
}

// Style social media div.
var socialMediaStyle = {
position: "fixed",
top: "45%",
[position]: "8px",
display: "flex",
flexDirection: "column",
zIndex: Number.MAX_SAFE_INTEGER,
backgroundColor: "#FFF",
borderRadius: "16px",
padding: "8px 8px 1px"
};

for (var key in socialMediaStyle) {
socialMediaDiv.style[key] = socialMediaStyle[key];
}

socialMediaDiv.innerHTML = links;
}
// If type is sharethis...
else if (type === "sharethis") {
// Change class of social media div.
socialMediaDiv.className = "sharethis-sticky-share-buttons";
// Add sharethis script to page.
var script = document.createElement("script"),
scripts = document.getElementsByTagName("script")[0];
script.src =
"https://platform-api.sharethis.com/js/sharethis.js#property=580918c33fb8410011bc7250&product=sticky-share-buttons";
scripts.parentNode.insertBefore(script, scripts);

var definedStyle = document.createElement("style");
definedStyle.innerText =
"\
div.st-btn * {\
display: inline-block;\
}\
";
document.body.appendChild(definedStyle);
}

// Add social media div to body.
document.body.appendChild(socialMediaDiv);

Overview

Add this script to make your webpages shareable on social media instantly. Now your visitors can share your pages in a click of a button. This variant’s installation is fast and easy and with Twik's help you can even add it sitewide by using the wildcard option. Customize this variant by choosing one of the two leading social sharing media links side panels in the “var type” line. You can select “ShareThis” or “AddtoAny.” You may even further customize it by adding or replacing social media links in the “Add social media links” section of the script.