Script to Add Custom Social Sharing buttons using JQuery?

Today Social Media’s are the best ways to bring free real human traffic to your Blog. As you know Google hates artificial backlinks. It is more fruitful for your portal if visitors will start sharing. This practice helps to gain popularity and ranking. Assume you have your blog related to Fashion industry. Every day nearly 200 readers redirects to your blog through Search engines. Here if your portal provides share option, it may 10 readers like your content and share the link in their network. Which will directly helps to bring referral traffic. It was noticed referral traffic helps to generate better Return on Investments.

With this idea recently we introduced Social media Sharing buttons in our blog. My blog is designed using WordPress. While I searched for Social Sharing buttons plugin in WordPress, I got many. But refer to my requirements in my blog I want Custom Social Sharing buttons. I have icon files for Facebook, Twitter and LinkedIn. What more I want is while users will click on these icon files a centered aligned Popup will open. Where my visitors can easily share the link without wasting much of their quality time.

To achieve the same did start with the implementation. Downloaded 3D social media icon images from iconfinder.com. Placed them in side my HTML file using a UL element as below.

Adding Social Sharing icons

<ul class="ulstyle">
<li class="listyle">
<a class="fb-share" target="_blank">
<img src="https://jharaphula.com/wp-content/uploads/2016/05/ico-facebook.png" alt="Facebook" title="Facebook" />
</a>
</li>
<li class="listyle">
<a class="tw-share" target="_blank">
<img src="https://jharaphula.com/wp-content/uploads/2016/05/ico-twitter.png" alt="Twitter" title="Twitter" />
</a>
</li>
<li class="listyle">
<a class="gp-share" target="_blank">
<img src="https://jharaphula.com/wp-content/uploads/2016/05/ico-google_plus.png" alt="Google Plus" title="Google Plus" />
</a>
</li>
<li>
<a class="ln-share" target="_blank">
<img src="https://jharaphula.com/wp-content/uploads/2016/05/ico-linkedin.png" alt="LinkedIn" title="LinkedIn" />
</a>
</li>
</ul>

CSS Styles

.ulstyle {
list-style: outside none none; 
overflow: hidden; 
width: 247px; 
margin: auto;
}
.listyle {
float: left; 
padding-right: 18px;
cursor: pointer;
}
.ln-share {
cursor: pointer;
}

Now what more remain? Yes, to make Social Sharing Functional I have to post parameters like URL or page Title to Social media Sharing APIs. In this scenario I required 4 top Social Medias Facebook, Twitter, Google Plus and LinkedIn. The Social Sharing API’s for these 4 popular Social networking sites are as below.

Facebook – http://www.facebook.com/share.php?u=[URL]&title=[TITLE]
Twitter – http://twitter.com/intent/tweet?status=[TITLE]+[URL]
Google Plus – https://plus.google.com/share?url=[URL]
LinkedIn – http://www.linkedin.com/shareArticle?mini=true&url=[URL]&title=[TITLE]&source=[SOURCE/DOMAIN]

Here to achieve Social Sharing Pop-up’s on click of icon images I did write 4 jquery functions inside document.ready method. These functions are called over the click event of icon images. To open a popup with Social Sharing API’s here I am using the traditional JS window.open method. Using simple calculation aligning these pop-up’s to center. Look at the Script below.

$('.fb-share').click(function(e) {
e.preventDefault();
window.open('https://www.facebook.com/sharer/sharer.php?u=' + location.href + '', 'fbShareWindow', 'height=396, width=630, top=' + (jQuery(window).height() / 2 - 198) + ', left=' + (jQuery(window).width() / 2 - 315) + ', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');
return false;
});

$('.tw-share').click(function(e) {
e.preventDefault();
window.open('http://twitter.com/intent/tweet?status=<?php the_title(); ?>' + ' ' + '' + location.href + '', 'twShareWindow', 'height=396, width=630, top=' + (jQuery(window).height() / 2 - 198) + ', left=' + (jQuery(window).width() / 2 - 315) + ', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');
return false;
});

$('.gp-share').click(function(e) {
e.preventDefault();
window.open('https://plus.google.com/share?url=' + location.href + '', 'gpShareWindow', 'height=556, width=404, top=' + (jQuery(window).height() / 2 - 278) + ', left=' + (jQuery(window).width() / 2 - 202) + ', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');
return false;
});

$('.ln-share').click(function(e) {
e.preventDefault();
window.open('http://www.linkedin.com/shareArticle?mini=true&url=' + location.href + '&title=<?php the_title(); ?>&source=https://jharaphula.com', 'lnShareWindow', 'height=580, width=630, top=' + (jQuery(window).height() / 2 - 290) + ', left=' + (jQuery(window).width() / 2 - 315) + ', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');
return false;
});

In the above Script thing to notice is in place of URL I am passing location.href. Which results the current page URL to share.