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…

Settembre 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="<?php echo $url;?>">Facebook</a>
<a class='tw' target="_blank" href="<?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','//'+Math.random()*99999999);document.body.appendChild(e)%7D)());">Pinterest</a>
<a class='go' target="_blank" href="<?php echo $url;?>">Google+</a>
<a class='li' target="_blank" href="<?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>

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;
.social-share a.fb {background-color:#3a5795;}
.social-share {background-color:#00ccff;}
.social-share a.go {background-color:#ff6633;}
.social-share a.pi {background-color:#ff0000;}
.social-share {background-color:#3366ff;}
.social-share a.wh {background-color:#009900;display:none;}
.social-share {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.



PHP expert. Wordpress plugin and theme developer. Father, Maker, Arduino and ESP8266 enthusiast.


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.…

Novembre 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…

Novembre 3, 2013

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

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

Settembre 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…

Settembre 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…

Settembre 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…

Settembre 8, 2015