Hello Sunil
social-share-link-without-any-tool

(Pro Tip) Create Social Share Link Without Any Tool

If you are developing a website, it is imperative to have social sharing buttons to increase social engagement which in turn will result in higher traffic.

There are lot of widgets already available for this purpose. But you may not be satisfied with any of them (reason may be its non-impressive style or poor functionality).

What if I tell you that you can create your own social sharing links manually without installing any plugin or using any tool. And the best part is that itā€™s simple to do yourself.

In this tutorial, I will go over how we can add a share link for each social media platform directly in a Website.

Hereā€™s how.

The solution to this problem is to eliminate all the JavaScript and add simple Webfont icons with sharing links provided by almost all social networks.

This entire code will be purely HTML and CSS without JavaScript.

WhatsApp

WhatsApp social share URL:

https://wa.me/?text=[post-title] [post-url]

Example:

<a href="https://wa.me/?text=Top%20CSS%20Interview%20Questions-https%3A%2F%2Fhello-sunil.in%2Fcss-interview-questions%2F" rel="noopener noreferrer">Share on WhatsApp</a>

Facebook

Facebook social share URL:

https://www.facebook.com/sharer.php?u=[post-url]

Example:

https://www.facebook.com/sharer.php?u=https://hello-sunil.in/css-interview-questions/

Twitter

Twitter social share URL:

https://twitter.com/share?url=[post-url]&text=[post-title]&via=[via]&hashtags=[hashtags]

Example:

https://twitter.com/share?url=https%3A%2F%2Fhello-sunil.in%2Fcss-interview-questions%2F&text=Top%20CSS%20Interview%20Questions%20Updated&via=itsSunilPradhan&hashtags=css,questions,frontend

Description:

ArgumentDetails
[post-title]The blog post title of the url you want to share.
[post-desc]A longer description of the blog post content you are sharing.
[via]optional Twitter username of content author (donā€™t include ā€œ@ā€).
[hashtags]Optional Hashtags appended onto the tweet (comma separated. donā€™t include ā€œ#ā€).

LinkedIn

LinkedIn social share URL:

https://www.linkedin.com/shareArticle?url=[post-url]&title=[post-title]

Example:

https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fhello-sunil.in%2Fcss-interview-questions%2F

Pinterest

Pinterest social share URL:

https://pinterest.com/pin/create/bookmarklet/?media=[post-img]&url=[post-url]&is_video=[is_video]&description=[post-title]

Example:

https://pinterest.com/pin/create/bookmarklet/?media=https://hello-sunil.in/wp-content/uploads/2022/02/css-interview-questions-banner-img-740x416.webp&url=https://hello-sunil.in/css-interview-questions/&is_video=no&description=Top CSS Interview Questions
ArgumentDetails
[post-img]The image/thumbnail for your blog post.
[post-url]The url for your blog post.
[post-title]The blog post title of the url you want to share.
[is_video]If the content is a video or not.

Codepen Demonstration


See the Pen Create Social Share Link Without Any Tool by Sunil Pradhan (@Sunil_Pradhan) on CodePen.

How To Use

Case I- As soon as you replace the above-mentioned code, you will encounter space between words used in the Title tag.

As a hyperlink donā€™t allow any space, it will create a problem for you. So, to resolve the issue of space between words, you need to use ā€œ%20ā€ or ā€œ+ā€ which symbolizes one space between two words.

Example:

title=Create%20social%20sharing%20links

OR

title=Create+social+sharing+links

Both will give the same result.

Case II- While creating the links, you might also experience that slash ā€œ/ā€ in the [URL] is replaced with ā€œ%2Fā€œ. So, donā€™t bother about it. You can use any of the two formats to create the executable links.

Example:

url=https://www.mydomain.com/page-test

OR

url=https:%2F%2Fwww.mydomain.com%2Fpage-test

Both these URL will be implemented in the same manner.

Case III- While writing the URL, you can also use ā€œ%2D ā€ in place of ā€œ-ā€œ. You donā€™t need to get confused in between these two codes.

Example:

url=https://www.mydomain.com/page-test-one

OR

url=http:%2F%2Fwww.mydomain.com%2Fpage%2Dtest%2Done

Both these URL will give the same result.

Case IV – You will also find that while writing the URL, in place of the colon ā€œ:ā€, ā€œ%3Aā€ is used. Both these codes represents same while creating the links.

Example:

url=https://www.mydomain.com

OR

url=http%3A%2F%2Fwww.mydomain.com

Buffer:

https://bufferapp.com/add?text=[post-title]&url=[post-url]

Tumblr:

https://www.tumblr.com/share/link?url=[post-url]&name=[post-title]&description=[post-desc]

Reddit:

https://reddit.com/submit?url=[post-url]&title=[post-title]

Evernote:

https://www.evernote.com/clip.action?url=[post-url]&title=[post-title]

Pocket:

https://getpocket.com/save?url=[post-url]&title=[post-title]

Telegram:

https://telegram.me/share/url?url=[URL]

Resource

Conclusion

I hope you finds all above URLs handy for your social sharing buttons. We usually check the validity of this URL every 2 months. Keep visit again if anything changes.

If you liked this article, then please share it on social media. Still have any questions about an article, leave us a comment.

How useful was this post?

Click on a star to rate it!

Average rating 5 / 5. Vote count: 1

No votes so far! Be the first to rate this post.

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

Similar articles you may like

Sunil Pradhan

Hi there šŸ‘‹ I am a front-end developer passionate about cutting-edge, semantic, pixel-perfect design. Writing helps me to understand things better.

Add comment

Stay Updated

Want to be notified when our article is published? Enter your email address below to be the first to know.

Sunil Pradhan

Hi there šŸ‘‹ I am a front-end developer passionate about cutting-edge, semantic, pixel-perfect design. Writing helps me to understand things better.