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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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>'; | |
| ?> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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); | |
| }); | |
| }); |
Questions, comments, or suggestion for improvement? Leave a comment on the GitHub Gist page.