The official sharing buttons that social media websites such as Facebook and Twitter provide are great, but they come at a price.
They come with bloat. Often times much of it. Loading multiple badges on a page (Twitter, Facebook, Pinterest, Google+, Stumble Upon) can have make a negative impact on page performance.
In many cases, if you don’t need the “share count”, a better solution is to simply create your own social media sharing buttons. It’s not near as hard as you think. The code below will get you started and includes the base functionality for the 4 top social media services.
<?php | |
$url = urlencode( get_permalink() ); | |
$img = urlencode( genesis_get_image( array( 'format' => 'url' ) ) ); | |
$title = urlencode( get_the_title() ); | |
echo '<a href="http://www.facebook.com/sharer/sharer.php?u=' . $url . '&t=' . $title .'" class="share-button facebook" target="_blank">Share on Facebook</a>'; | |
echo '<a href="http://www.twitter.com/intent/tweet?url=' . $url . '&text=' . $title . '" class="share-button twitter" target="_blank">Tweet Me!</a>'; | |
echo '<a href="http://pinterest.com/pin/create/button/?url=' . $url . '&media=' . $img . ' &description=' . $title . '" class="share-button pinterest" target="_blank">Pinterest</a>'; | |
echo '<a href="http://plus.google.com/share?url=' . $url . '" class="share-button google" target="_blank">Google+</a>'; | |
echo '<a href="http://www.linkedin.com/shareArticle?mini=true&url=' . $url . '" class="share-button linkedin" target="_blank">LinkedIn</a>'; | |
echo '<a href="http://www.reddit.com/submit?url=' . $url . '" class="share-button reddit" target="_blank">LinkedIn</a>'; | |
?> |
jQuery(document).ready(function($){ | |
$(".share-button").click(function(event){ | |
event.preventDefault(); | |
var window_size = ""; | |
var url = this.href; | |
var domain = url.split("/")[2]; | |
switch(domain) { | |
case "www.facebook.com": | |
window_size = "width=585,height=368"; | |
break; | |
case "www.twitter.com": | |
window_size = "width=585,height=261"; | |
break; | |
case "plus.google.com": | |
window_size = "width=517,height=511"; | |
break; | |
case "www.pinterest.com": | |
window_size = "width=700,height=300"; | |
break; | |
case "www.reddit.com": | |
window_size = "width=800,height=400"; | |
break; | |
default: | |
window_size = "width=585,height=511"; | |
} | |
window.open(url, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,' + window_size); | |
}); | |
}); |