Here is 10 line code that needs to add in the single.php file. This will avoid external calls, maintenance of plugins and improve speed.
Step 1) Navigate to “Appearance” -> Theme Editor
Step 2) Observe Theme Files section available on Right side of the page (in middle)
Step 3) Search for single.php file (available in functions.php section)
Step 4) Click on Single.php File .. .System will open it in write mode.
Step 5) Add below code before or after content in a single.php file. ( Just above main or primary section or above to sidebar or footer section)
<?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>Source : barattalo
Step 6) Add below CSS code to design social text as button. Below code can be added in external CSS plugin or Themes -> Customize->Additional CSS Section.
.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;}
}Whats app share icon is visible only on mobile phone. Can change settings by editing css.
In place of text button we can also use fab class for example =’fab fa-facebook’ to convert them in icon. and css for this is “.social-share a.fab.fa-facebook {background-color:#3a5795;}”