Add Inline Social Share Buttons To WordPress

Use this if you want to add a Facebook like button, Tweet button, Google #1 button, and a Pinterest pin button to WordPress. This is easy and done in 3 quick steps. This adds four social buttons:

1. Facebook like button
2. Tweet button
3. Google #1 button
4. Pinterest pin button

Note: these are NOT links to your social profiles. These are the “liking” buttons, also known as “share” or “sharing” buttons.

Also note: the Pinterest button will only appear on posts or pages that have a featured image.

This template tag can be used on any WordPress template file. I find this most useful for single posts, or any custom post type single template. The URL to be shared will always be the permalink of whatever page is being viewed. The social buttons will be nicely aligned all in one row.

Step 1 – The Function

Add this to your functions.php, or other functions file.

/**
 * Returns 4 social sharing buttons: Facebook, Twitter, G+, Pinterest, which share the permalink of the current post or page. Pinterest button will NOT be shown on pages that do not have a featured image (post thumbnail).
 */

function isa_smartest_share() {
global $post; ?>
	<div id="smartshare"><div class="fb-like" data-send="false" data-layout="button_count" data-width="90" data-show-faces="false"></div><div id="isa_gt"><a href="https://twitter.com/share" class="twitter-share-button" data-dnt="true">Tweet</a></div><div id="isa_g"><div class="g-plusone" data-size="medium" data-annotation="inline" data-width="120"></div></div>
	
	<?php // if there is a featured image, do Pinterest
	if(has_post_thumbnail()) {
		
		$thumb = get_post_thumbnail_id(); 
		$full_img = wp_get_attachment_image_src( $thumb, 'full'); ?>
		<a href="//www.pinterest.com/pin/create/button/?url=<?php echo get_permalink(); ?>&media=<?php echo $full_img[0]; ?>&description=<?php echo get_the_title(); ?>" data-pin-do="buttonPin" data-pin-config="none"><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a>
	<?php } ?>
	
	</div>
	<?php
}


/**
* load social share scripts in footer
*/
function isa_social_footer_scripts(){ ?>
	<div id="fb-root"></div><script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script><script type="text/javascript">
	  (function() {
	    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
	    po.src = 'https://apis.google.com/js/plusone.js';
	    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
	  })();
	</script><script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
<?php } 
add_action('wp_footer', 'isa_social_footer_scripts');

Step 2 – The CSS

Include this CSS in your own way, whether you add it to your theme’s stylesheet, or add this in its own new CSS file with wp_enqueue_scripts. Here’s the CSS:

/* SMART SHARE SOCIAL BUTTONS ------------------------------------------
*/

#smartshare {
	margin: 1em 6px;clear:both;display:block;padding:0;
}
#smartshare .fb-like, #smartshare #isa_gt, #smartshare #isa_g {
	margin: 0px;
    display: inline;
    padding: 0px;
    text-align: right;
    position: relative;
	line-height:1.5em;
}
#smartshare #isa_gt {
	margin-left:16px;
}
#smartshare #isa_g{	
     margin-left:-10px;	
     margin-right:-20px;
}
#smartshare #isa_g,
#smartshare #isa_g > div{
     max-width:90px !important;
}

Step 3 – Call it

Call it from a template file like this:

<?php echo isa_smartest_share(); ?>