Handy Share Links Reference

Those pre-built widgets are cool and all, but they don’t style well.  So, it’s a pretty common thing to custom-build your own social sharing buttons. For your coding pleasure, here’s a reference of some basic HTML and a little JavaScript to get you started.  I’ve also thrown in a little PHP for those of you working in WordPress theme templates. At the end, we’ve included a working example using the Bootstrap 3 responsive framework.

The basic HTML

For the basic HTML, let’s just say we’re working on separate links for each property.  Here is the HTML for Twitter, Facebook, LinkedIn and Google+.

NOTE: I’m using the placeholder {} to show that this is where you need to change things to match your site and what to change them to.

<a href="https://twitter.com/share?text={title}&url={fullURL}&via={twitterhandle}" title="Share on Twitter">Tweet</a>
<a href="http://www.facebook.com/share.php?u={fullURL}" title="Like on Facebook">Like</a>
<a href="http://www.linkedin.com/shareArticle?mini=true&url={fullURL}&title={title}" title="Share on LinkedIn">LinkedIn</a>
<a href="https://plus.google.com/share?url={fullURL}" title="Share on Google Plus">+1 it</a>

A little JavaScript

That’s great and all, but the user will leave your page when they click on any of these links (even if you set the target="_blank").  Instead, let’s add a few things and use a little basic JavaScript to open these links in a mini-window (not a modal).

So, let’s add class “mini” to each line of the HTML, like so:

<a class="mini" href="https://twitter.com/share?text={title}&url={fullURL}&via={twitterhandle}" title="Share on Twitter">Tweet</a>
<a class="mini" href="http://www.facebook.com/share.php?u={fullURL}" title="Like on Facebook">Like</a>
<a class="mini" href="http://www.linkedin.com/shareArticle?mini=true&url={fullURL}&title={title}" title="Share on LinkedIn">LinkedIn</a>
<a class="mini" href="https://plus.google.com/share?url={fullURL}" title="Share on Google Plus">+1 it</a>

Great.  Now, let’s add the following JavaScript to our main JS file.  I’ll call it main.js, but it could be whatever you’re using to customize things like jQuery plugins or whatever.  If you don’t have one, you could always just add it before the </body> tag wrapped in <script> … </script>.

jQuery(document).ready(function( $ ) {
$('.mini').click(function(event) {
var width  = 575,
height = 400,
left   = ($(window).width()  - width)  / 2,
top    = ($(window).height() - height) / 2,
url    = this.href,
opts   = 'status=1' +
',width='  + width  +
',height=' + height +
',top='    + top    +
',left='   + left;

window.open(url, 'Share', opts);
return false;
});
});

You’ll notice you can change the width and height of the window, but I would suggest you leave them alone.  We’re doing a little calculation anyway to make it look great–even on mobile devices.

Using PHP with WordPress

Put all that together with a little WordPress magic and you’ve got a handy piece of copy & paste code to use.  In this example, let’s say you’re working on the single.php theme template.  Add the above JavaScript to your main.js (or whatever) file and add the following HTML (with PHP) to create your social sharing links automatically.

<?php
$url = get_permalink() ;
$text = get_the_title();
?>
<a class="mini" href="https://twitter.com/share?text=<?php echo htmlentities($text); ?>&url=<?php echo urlencode($url); ?>&via={twitterhandle}" title="Share on Twitter">Tweet</a>
<a class="mini" href="http://www.facebook.com/share.php?u=<?php echo $url; ?>" title="Like on Facebook">Like</a>
<a class="mini" href="http://www.linkedin.com/shareArticle?mini=true&url=<?php echo urlencode($url); ?>&title=<?php echo htmlentities($text); ?>" title="Share on LinkedIn">LinkedIn</a>
<a class="mini" href="https://plus.google.com/share?url=<?php echo urlencode($url); ?>" title="Share on Google Plus">+1 it</a>

You might be wondering why we’re setting those two PHP variables ($url and $text) at the top?  That’s a performance thing.  It’s faster to run those functions (which query the database) one time and assign them to local PHP variables to be used over and over again on this page, rather than use those functions over and over again to get the exact same result.

The performance difference is pretty small but the fix, as you can see, is too easy not to try.

BONUS: Bootstrap 3 Integration Example

Purely for the fun of it, let’s put all that together again, but using Twitter Bootstrap 3 and Fontawesome icons to build something even more, well, awesome.  Here goes.

<!-- Social Sharing -->
<div class="post-share text-center bordered">
<small>Share this via:</small>
<?php
$url = get_permalink() ;
$text = get_the_title();
?>
<ul class="list-inline social-share">
<li><a class="mini" data-original-title="Share on twitter" data-toggle="tooltip" href="https://twitter.com/share?text=<?php echo htmlentities($text); ?>&url=<?php echo urlencode($url); ?>"><i class="fa fa-twitter"></i></a></li>
<li><a class="mini" data-original-title="Share on google-plus" data-toggle="tooltip" href="https://plus.google.com/share?url=<?php echo urlencode($url); ?>"><i class="fa fa-google-plus"></i></a></li>
<li><a class="mini" data-original-title="Share on facebook" data-toggle="tooltip" href="http://www.facebook.com/share.php?u=<?php echo $url; ?>"><i class="fa fa-facebook"></i></a></li>
<li><a class="mini" data-original-title="Share on linkedin" data-toggle="tooltip" href="http://www.linkedin.com/shareArticle?mini=true&url=<?php echo urlencode($url); ?>&title=<?php echo htmlentities($text); ?>"><i class="fa fa-linkedin"></i></a></li>
<li><a data-original-title="Open in new window" data-toggle="tooltip" href="<?php the_permalink(); ?>" target="_blank"><i class="fa fa-link"></i></a></li>
</ul>
</div>

Depending, of course, on your CSS, the result will look something like what you see at the top of this page if you cycle left and right.

Don’t forget to add that JS to your main.js file and you may need to “opt-in” to Bootstrap’s tooltips like so…

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

Happy coding!