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

Create social sharing links to share content on Facebook, whatsapp, Gmail, Twitter and more

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

How to Create Social Media Buttons for All the Top Social Networks!

 

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 of your online business to reach more customers. 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.

 

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.

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

 

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>

 

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 attractive CSS icons by using this link :

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:

<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 usefull for you. Thank's and happy coding.

 

Sweta made a post.
529 day ago

whatsapp link not working in web.

Sanjay Singh made a post.
529 day ago

Great article for Social media buttons...

Mohit Singh made a post.
626 day ago

Whatsapp share link is new for me. great!

Top