Async Social Sharing Buttons For WordPress Without a Plugin

Async Social Sharing Buttons For WordPress Without a Plugin

Google+, Twitter, Facebook, Linkedin and Pinterest Buttons loaded via Async Javascript.

This code goes in the footer.php right before </body> tag

// social buttons
(function(d, s) {
  var js, fjs = d.getElementsByTagName(s)[0], load = function(url, id) {
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.src = url; = id;
    fjs.parentNode.insertBefore(js, fjs);
  load('//', 'fbjssdk');
  load('', 'gplus1js');
  load('//', 'tweetjs');
  load('//', 'linkedinjs');
  load('//', 'pinterestjs');
  load('//', 'stumbleuponjs');
}(document, 'script'));

Pinterest Image fetch code, put this in functions.php

function pinterest_image() {
global $post, $posts;
$first_img = '';
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];

if(empty($first_img)){ //Defines a default image
$first_img = "/images/default.jpg";
return $first_img;

Put this code where u want to show the buttons

<div id="fb-root"></div><!-- fb needs this -->
<div class="fb-like" data-href="<?php the_permalink(); ?>" data-send="false" data-layout="box_count" data-show-faces="false" data-action="like" data-font="arial"></div>

<a href="" class="twitter-share-button" data-url="<?php the_permalink(); ?>" data-count="vertical">Tweet</a>

<g:plusone size="tall"></g:plusone>

<su:badge layout="5"></su:badge></span>

<a href="<?php the_permalink(); ?>&amp;media=<?php echo pinterest_image() ?>&amp;description=<?php the_title(); ?> on <?php bloginfo('url'); ?>" class="pin-it-button" count-layout="vertical">Pin It</a>

<script type="IN/Share" data-url="<?php get_permalink(); ?>"></script>