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.
Here is a handy list for all popular social sharing buttons:
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 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 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:
| Argument | Details |
| [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 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 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
| Argument | Details |
| [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
Other Popular Social Share URL
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
- share-urls.md
- social-share-urls
- bradvin.social.share.urls.txt
- LinkedIn Share Post URL
- The Simplest Way to Offer Sharing Links for Social Media
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.
Add comment