Social media sharing buttons are essential for any website to encourage users to share your content with their friends and followers. Adding share links to your website can help drive more traffic, increase engagement, and ultimately boost conversions. In this article, we’ll provide a list of URLs that can be added to your website to create share links. Simply replace the tokens with the relevant data and you’ll be good to go.
Plugins are slow. We can tailor custom code to only the style, and the links you want. Additional performance benefits can be granted by creating custom links that use your theme’s features, such as Bootstrap or jQuery. In addition, sites using Icon Packs like FontAwesome, Ionicons and others may use their libraries to prevent even more code being added to the page.
Code Examples, to Auto-Update the Link, on click.
Here’s a code snippet that you can use to achieve the desired functionality:
document.addEventListener("DOMContentLoaded", function() {
let socialLinks = document.querySelectorAll(".social_link_example");
socialLinks.forEach(link => {
link.addEventListener("click", function(event) {
event.preventDefault();
let dataHref = this.getAttribute("data-href");
let currentUrl = window.location.href;
let pageTitle = document.querySelector("h1").innerText;
let pageDescription = document.querySelector("meta[name='description']").getAttribute("content");
dataHref = dataHref.replace("%url%", encodeURIComponent(currentUrl));
dataHref = dataHref.replace("%title%", encodeURIComponent(pageTitle));
dataHref = dataHref.replace("%description%", encodeURIComponent(pageDescription));
window.open(dataHref, "_blank");
});
});
});
$(document).ready(function() {
let socialLinks = $(".social_link_example");
socialLinks.each(function() {
$(this).on("click", function(event) {
event.preventDefault();
let dataHref = $(this).attr("data-href");
let currentUrl = window.location.href;
let pageTitle = $("h1").text();
let pageDescription = $("meta[name='description']").attr("content");
dataHref = dataHref.replace("%url%", encodeURIComponent(currentUrl));
dataHref = dataHref.replace("%title%", encodeURIComponent(pageTitle));
dataHref = dataHref.replace("%description%", encodeURIComponent(pageDescription));
window.open(dataHref, "_blank");
});
});
});
document.addEventListener("DOMContentLoaded", function() {
let socialLinks: NodeListOf<HTMLElement> = document.querySelectorAll(".social_link_example");
socialLinks.forEach((link: HTMLElement) => {
link.addEventListener("click", function(event: MouseEvent) {
event.preventDefault();
let dataHref: string | null = this.getAttribute("data-href");
let currentUrl: string = window.location.href;
let pageTitle: string = document.querySelector("h1")!.innerText;
let pageDescription: string = document.querySelector("meta[name='description']")!.getAttribute("content")!;
if (dataHref) {
dataHref = dataHref.replace("%url%", encodeURIComponent(currentUrl));
dataHref = dataHref.replace("%title%", encodeURIComponent(pageTitle));
dataHref = dataHref.replace("%description%", encodeURIComponent(pageDescription));
window.open(dataHref, "_blank");
}
});
});
});
This code will add a click event listener to all elements with the class .social_link_example. When clicked, it replaces the tokens %url%, %title%, and %description% in the data-href attribute with the current page URL, the text of the first <h1> element on the page, and the content of the page’s meta description, respectively. Finally, it opens the share link in a new browser window.
You can customize this code to match your website’s structure and add more tokens if needed. Make sure to include this code within your HTML file or include it as an external script.
Replace %url% with the URL of the content, %title% with the title of the article, %summary% with a brief summary, and %source% with the source of the content (e.g., your website name).
Replace %url% with the URL of the content, %text% with the tweet text, %username% with your Twitter handle, and %hashtags% with any relevant hashtags (separated by commas).
Replace %url% with the URL of the content, %title% with the title of the article, %caption% with a brief caption, and %tags% with relevant tags (separated by commas).
Email
mailto:?subject=%subject%&body=%body%%0A%url%
Replace %subject% with the email subject, %body% with the email body, and %url% with the URL of the content.
Replace %url% with the URL of the content, %title% with the title of the article, %description% with a brief description, and %image% with the image URL.
Replace %url% with the URL of the content and %title% with the title of the article. Note: StumbleUpon has rebranded as Mix, but the share link can still be used for sharing content.
Replace %url% with the URL of the content and %title% with the title of the article.
Conclusion
Adding social media share links to your website can significantly increase your online presence and reach. By using the URLs provided above and replacing the tokens with your content’s specific details, you can create customized share links for your website. Ensure that you test the links to guarantee they function properly, and watch your content gain traction on social media platforms.
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Cookie
Duration
Description
CONSENT
2 years
YouTube sets this cookie via embedded youtube-videos and registers anonymous statistical data.
_ga
2 years
The _ga cookie, installed by Google Analytics, calculates visitor, session and campaign data and also keeps track of site usage for the site's analytics report. The cookie stores information anonymously and assigns a randomly generated number to recognize unique visitors.
_gid
1 day
Installed by Google Analytics, _gid cookie stores information on how visitors use a website, while also creating an analytics report of the website's performance. Some of the data that are collected include the number of visitors, their source, and the pages they visit anonymously.
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Cookie
Duration
Description
VISITOR_INFO1_LIVE
5 months 27 days
A cookie set by YouTube to measure bandwidth that determines whether the user gets the new or old player interface.
YSC
session
YSC cookie is set by Youtube and is used to track the views of embedded videos on Youtube pages.
yt-remote-connected-devices
never
YouTube sets this cookie to store the video preferences of the user using embedded YouTube video.
yt-remote-device-id
never
YouTube sets this cookie to store the video preferences of the user using embedded YouTube video.
