How to Easily Add Share Links for Each Social Media Platform

shahednasser

Shahed Nasser

Posted on February 19, 2021

How to Easily Add Share Links for Each Social Media Platform

This article was originally posted on my personal blog

Social media share links are important for every website, and you can add them very easily! In this tutorial, we'll go over how we can add a share link for each social media platform directly in our HTML.

To test them right away, check this post on my personal blog


Twitter

To add a share link to Twitter:

<a href="https://twitter.com/intent/tweet?text=Awesome%20Blog!&url=blog.shahednasser.com">Share on Twiter</a>
Enter fullscreen mode Exit fullscreen mode

You can add the text parameter for the text you want in the tweet and the url parameter in case you want to add a URL to the tweet.

Make sure to encode the text or the URL first. You can try it out online here.


Facebook

To add a share link to Facebook:

<a href="https://www.facebook.com/sharer/sharer.php?u=blog.shahednasser.com&quote=Awesome%20Blog!">Share on Facebook</a>
Enter fullscreen mode Exit fullscreen mode

The u parameter is used to specify the link and the quote parameter is used for the text.

Make sure to encode the text or the URL first. You can try it out online here.


Whatsapp

To add a share link to Whatsapp:

<a href="https://wa.me/?text=Awesome%20Blog!%5Cn%20blog.shahednasser.com">Share on Whatsapp</a>
Enter fullscreen mode Exit fullscreen mode

For Whatsapp there's only a text parameter so you can include both the text and the URL you want to send in it. Make sure to encode them first.


Telegram

To add a share link to Telegram:

<a href="https://t.me/share/url?url=blog.shahednasser.com&text=Awesome%20blog!">Share on Telegram</a>
Enter fullscreen mode Exit fullscreen mode

You can include the text in the text parameter and the URL in the url parameter.

Make sure to encode the text or the URL first. You can try it out online here.


Tumblr

To share a link on Tumblr:

<a href="https://www.tumblr.com/widgets/share/tool?canonicalUrl=blog.shahednasser.com&caption=Awesome%20blog!&tags=test%2Chello">Share on Tumblr</a>
Enter fullscreen mode Exit fullscreen mode

For Tumblr, you need to add the canonicalUrl parameter with the URL you want to share. Optionally, you can add caption with the text you want to include in the post and tags with the tags you want to include all comma-separated.

Make sure to encode the text or the URL first. You can try it out online here.


Reddit

To share a link on Reddit:

<a href="https://www.reddit.com/submit?url=blog.shahednasser.com&title=Awesome%20Blog!">Share on Reddit</a>
Enter fullscreen mode Exit fullscreen mode

The url parameter is for the URL you want to share and the title parameter is for the title of the post.

Make sure to encode the text or the URL first. You can try it out online here.


LinkedIn

To share on LinkedIn:

<a href="https://www.linkedin.com/sharing/share-offsite/?url=blog.shahednasser.com">Share on LinkedIn</a>
Enter fullscreen mode Exit fullscreen mode

Just include the URL in the url parameter.

Make sure to encode the text or the URL first. You can try it out online here.


Gmail

To share by Gmail:

<a href="https://mail.google.com/mail/u/0/?view=cm&to&su=Awesome+Blog!&body=https%3A%2F%2Fblog.shahednasser.com%0A&bcc&cc&fs=1&tf=1">Share by Gmail</a>
Enter fullscreen mode Exit fullscreen mode

The parameters you can use in Gmail:

to: the email you want the email to be sent to

su: The subject of the email

body: the content of the email

bcc and cc: to set the bcc and cc of the email

All these parameters are optional. The only parameter that is required is view=cm and you shouldn't change it.

Make sure to encode the text or the URL first. You can try it out online here.

💖 💪 🙅 🚩
shahednasser
Shahed Nasser

Posted on February 19, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related