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.
