How to Create Social Sharing Links for Facebook, whatsapp and more

How to Create Social Sharing Links for Facebook, whatsapp and more

Here is the very simple social share link generator tool. You can put this as social media share links HTML in your project root file.

Social media buttons are very useful for every website and it helps the user to get updates from the website. Social Media takes an important part in your online business to reach more customers. Also you can learn create stunning YouTube thumbnail for your video.

Social sharing links are those small, clickable social media icons on the android, ios, and webpages.

When a viewer clicks on those icons, these icons are sent straight to a social media site with an update pre-populated with your content.

WordPress Automatic Plugin Free Download

Loading...

These links allow your website visitors to easily share your content with their social media connections and networks.

Adding these buttons to your content allows you to expand the reach of your content to new audiences and generate new visitors back to your website.

You can also use this code in you PHP project. Just like a social share PHP code. By using this you can create social media links for website.

Now, let's start, the most important social media buttons available for each of the topmost social media networks, for example:

How to Start a Blog in 2020 (Beginner’s Guide)

Loading...

Facebook Custom Share Link:

<a href="https://www.facebook.com/sharer/sharer.php?u=<URL>&t=<TITLE>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" title="Share on Facebook">

Whatsapp Custom Share Link:

<a href="whatsapp://send?text=<URL>" data-action="share/whatsapp/share" onClick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" title="Share on whatsapp"></a>

Twitter Custom Share Link:

<a href="https://twitter.com/share?url=<URL>&text=<TITLE>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" title="Share on Twitter"></a>

LinkedIn Custom Share Link:

<a href="https://www.linkedin.com/shareArticle?mini=true&url=<URL>&t=<TITLE>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" title="Share on Linkedin"></a>

Read this for better SEO: On-Page SEO Techniques in 2020

Google+ Custom Share Link:

<a href="https://plus.google.com/share?url=<URL>" onClick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" title="Share on Google+"></a>

Pinterest Custom Share Link:

<a href="http://pinterest.com/pin/create/button/?url=[EncodedURL]&media=[MEDIA]" onClick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" title="Share on Pinterest"></a>

E-Mail Custom Share Link:

<a href="mailto:?subject=[SUBJECT]&body=<URL>" onClick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" title="Share on Mail"></a>

Reddit Custom Share Link:

<a href="http://www.reddit.com/submit?url=<EncodedURL>" onClick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" title="Share on Mail"></a>

And You can use Font-Awesome icons to look at attractive CSS icons by using this link :

Top 50 MySQL Interview Questions and Answers

https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

How to use Font-Awesome icons Let's take a example:

For Facebook we have to use following HTML code:

Loading...
<i class="fa fa-facebook"></i>

CSS will be like this:

i.fa.fa-facebook{
	color:#fff;
	background-color:#3b5998;
	width:30px;
	height:30px;
	line-height:30px;
        font-size: 16px;
	border-radius:50%;
	text-align:center;
	transition:0.5s all;
	-webkit-transition:0.5s all;
	-moz-transition:0.5s all;
	-o-transition:0.5s all;
        -webkit-border-radius:50%;
	-moz-border-radius:50%;
	-o-border-radius:50%;
	-ms-border-radius:50%;
	-ms-transition:0.5s all;
}
i.fa.fa-facebook:hover {
	background-color:#17233E;
}

You can make your own CSS style like this, and I hope this useful for you. Thanks and happy coding.

Now, I can say that this is a good share button generator process. When we talking about the Instagram share link generator then I want to tell you one thing. You can not share on Instagram because all above process is for link share, and Instagram did not allow to share the link.

Yes, you can add a Instagram share button code in html as a page link only.

Related posts

(5) Comments

  • User Pic

    I tried to understand this page but I'm not. Please I need more clarifications and details.
    Thanks.

  • User Pic

    Do we have an option to share in instagram? & FB messenger

  • User Pic

    whatsapp link not working in web.

  • User Pic

    Great article for Social media buttons...

  • User Pic

    Whatsapp share link is new for me. great!

Write a comment