Social buttons: the fastest way for WordPress, without plugins

NOTE: the code in this post is written for WordPress but you can easily translate it in any language. You’re here…

September 15, 2015

NOTE: the code in this post is written for WordPress but you can easily translate it in any language.

You’re here because you’re searching the fastest or the best way to add social buttons to your WordPress site.
I think that the best way is without using plugins and without loading external APIs, such as Facebook API or Twitter API to render the buttons.

Every external call take some time for downloading scripts and for execution. If you simply need to share your contents you can use direct links to sharer files of each social network.

So you can style your social buttons exactly as you want.

Whatsapp? Yes. And the social buttons for the others…

Here is the code to add sharing social buttons for these sites: Facebook, Twitter, Google+, Linkedin, Pinterest and WhatsApp and also a mail to button to send link throught email:

<?php $url = urlencode(get_the_permalink()); $title = htmlspecialchars(urlencode(html_entity_decode(get_the_title(), ENT_COMPAT, 'UTF-8')), ENT_COMPAT, 'UTF-8'); ?>

<div class='social-share'>
<a class='fb' target="_blank" href="http://www.facebook.com/sharer.php?u=<?php echo $url;?>">Facebook</a>
<a class='tw' target="_blank" href="https://twitter.com/intent/tweet?url=<?php echo $url;?>&text=<?php echo $title; ?>">Twitter</a>
<a class='pi' href="javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','//assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());">Pinterest</a>
<a class='go' target="_blank" href="https://plus.google.com/share?url=<?php echo $url;?>">Google+</a>
<a class='li' target="_blank" href="http://www.linkedin.com/shareArticle?mini=true&url=<?php echo $url;?>">Linkedin </a>
<a class='wh' href="whatsapp://send?text=<?php echo ($title ." ". $url);?>">WhatsApp</a>
<a class='ma' target="_blank" href="mailto:?subject=<?php echo $title;?>&body=%20<?php echo $url;?>">EMAIL</a>
</div>

To use it you have to place this code in your single.php before or after the content, or you can make a sharing.php file to include using the get_template_part("sharing"); function. The code is written to work inside the WordPress loop.

The WhatsApp button should be hidden on desktops and visible on mobile, and you can simply use a css and a media query. Here is a small block of CSS that you can modify to fit the style of your theme:

.social-share {margin:20px 0;}
.social-share a {
	display:inline-block; width:auto; height:30px; 
	background-color:#efefef; text-decoration:none;
	line-height:30px; padding:0 10px;
	font-size:10px;color:#fff!important;
	letter-spacing:0.4;text-transform:uppercase;
}
.social-share a.fb {background-color:#3a5795;}
.social-share a.tw {background-color:#00ccff;}
.social-share a.go {background-color:#ff6633;}
.social-share a.pi {background-color:#ff0000;}
.social-share a.li {background-color:#3366ff;}
.social-share a.wh {background-color:#009900;display:none;}
.social-share a.ma {background-color:#999999;}
@media only screen and (max-width: 480px) {
	.social-share a.wh {display:inline-block;}
}

The social buttons you can see at the top of this post, are made in this way. The social counters for Facebook shares, Google + and the other counters are made with the Top Stories Plugin Free Version. If you need a complete analysis of your social activity you can buy the full version of Top Social Stories  on CodeCanyon, which also has charts and more widget to use in your site.

 

Author

I'm a software engineer, an everyday web developer and a maker. I usually build sites with PHP, within or without WordPress. I build Internet of Things with Arduino and ESP8266. I'm the founder of Rockit.it and Dailybest.it and I'm actually the Chief Technical Officer of Better Days web agency.

Recommended

VK Social metrics, Top Stories plugin now with support for Vkontakte

VK SOCIAL METRICS VK.COM, also known as Vkontakte, is an important russian social network, which has over 270 million users.…

November 19, 2014

Top Social Stories plugin and widget for WordPress

Just released a plugin for WordPress that can be used to track your posts on Facebook, Twitter and Google+. When…

November 3, 2013

How to add rel=”nofollow” to links with preg_replace()

Adding rel="nofollow" to external link is a good SEO practice.

September 22, 2015

Optimize WordPress, a long list of tips

In the above image you can see your WordPress before reading this post, and after the optimizations you will make…

September 15, 2015

Limit the number of categories for posts in WordPress

CHOOSE ONLY ONE CATEGORY WORDPRESS If you need to limit the number of categories used by the authors of your…

September 14, 2015

Remove archive pages in WordPress, how to

I think that in most blogs (that is not all) archive pages are redundant content and there’s no need to…

September 8, 2015