Custom Social Networking Buttons
Some research shows that having various social networking buttons on your site increases the likelihood users will share that content. It’s a verifiable fact, however, that adding the default buttons supplied by Google, Twitter, Facebook, etc. slows down your site. Basically, they pull in scripts from their servers. The more scripts you load on one page, the slower your site. And Google says that page speed is a factor when considering your site’s ranking with the search engines (not to mention slow sites suck).
So what do we do? Well, if you like the idea of sharing buttons but don’t care about whether the numbers are there showing how many times a page has been shared, I can help you with that.
Here’s the HTML:
<aside class="social-sharing">
<a href="https://plus.google.com/share?url=https://clicknathan.com" class="icon-googleplus" rel="nofollow" target="_blank" onclick="window.open(this.href,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=650,height=500'); return false;">Google+</a></li>
<a href="http://www.facebook.com/sharer/sharer.php?s=100&p[url]=https://clicknathan.com&p[images][0]=https://clicknathan.com/someimage.jpg&p[title]=Page Title&p[summary]=Some text" class="icon-facebook" rel="nofollow" target="_blank" onclick="window.open(this.href,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=500,height=500'); return false;">Facebook</a>
<a href="https://twitter.com/intent/tweet?text=Your tweet text&url=https://clicknathan.com" class="icon-twitter" rel="nofollow" target="_blank" onclick="window.open(this.href,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=500,height=500'); return false;">Tweet</a>
</aside>That requires some editing, such as dropping in your actual URLs, titles, tweet text, etc.
Or if you’re using WordPress, you can drop this in the loop to get everything setup automatically from the current post’s data.
<aside class="social-sharing">
<?php global $post;
$imgurl = wp_get_attachment_url(get_post_thumbnail_id($post->ID)); ?>
<a href="https://plus.google.com/share?url=<?php echo urlencode(get_permalink($post->ID)); ?>" class="icon-googleplus" rel="nofollow" target="_blank" onclick="window.open(this.href,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=650,height=500'); return false;">Google+</a></li>
<a href="http://www.facebook.com/sharer/sharer.php?s=100&p[url]=<?php echo urlencode(get_permalink($post->ID)); ?>&p[images][0]=<?php echo urlencode($imgurl); ?>&p[title]=<?php echo urlencode(get_the_title()); ?>&p[summary]=<?php echo urlencode(get_the_excerpt()); ?>" class="icon-facebook" rel="nofollow" target="_blank" onclick="window.open(this.href,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=500,height=500'); return false;">Facebook</a>
<a href="https://twitter.com/intent/tweet?text=<?php echo urlencode(get_the_title($post->ID)); ?>&url=<?php echo urlencode(get_permalink($post->ID)); ?>" class="icon-twitter" rel="nofollow" target="_blank" onclick="window.open(this.href,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=500,height=500'); return false;">Tweet</a>
</aside>And the CSS:
.social-sharing a {color:white; padding:15px; text-decoration:none; transition:background 500ms;}
.social-sharing .icon-googleplus {background:#cf0709;}
.social-sharing .icon-facebook {background:#3c599f;}
.social-sharing .icon-twitter {background:#28a9e0;}
.social-sharing .icon-googleplus:hover {color:#cf0709;}
.social-sharing .icon-facebook:hover {color:#3c599f;}
.social-sharing .icon-twitter:hover {color:#28a9e0;}
.social-sharing a:hover {background:#eee; transition:background 250ms; color:white; text-decoration:none;}That will give you something like this:
I’m using Open Sans as the font, but the CSS above will just inherit your own font.
If you’d also like to show the icons for each network, I recommend installing an icon font, especially if you’re already using one. For the purposes of this post, you can download the icon fonts I use (gathered from Icomoon). There’s a json file in there you can even upload to Icomoon to add more icons to it if you’d like. Once you’ve got those fonts where you want them on your server, use this updated CSS (change the assets/fonts/ to match your own filepath):
@font-face {
font-family: 'icomoon';
src:url('assets/fonts/icomoon.eot?-mr75u6');
src:url('assets/fonts/icomoon.eot?#iefix-mr75u6') format('embedded-opentype'),
url('assets/fonts/icomoon.woff?-mr75u6') format('woff'),
url('assets/fonts/icomoon.ttf?-mr75u6') format('truetype'),
url('assets/fonts/icomoon.svg?-mr75u6#icomoon') format('svg');
font-weight: normal; font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.icon-googleplus:before {content:"\e606";}
.icon-facebook:before {content:"\e602";}
.icon-twitter:before {content:"\e603";}
.icon-replacement {text-indent:-999em; overflow:hidden; display:block; position:relative;}
.icon-replacement:before {position:absolute; left:0; top:0; text-indent:0;}
.social-sharing a, .social-sharing a:visited {color:white; padding:15px; text-decoration:none; transition:background 500ms;}
.social-sharing .icon-googleplus {background:#cf0709;}
.social-sharing .icon-facebook {background:#3c599f;}
.social-sharing .icon-twitter {background:#28a9e0;}
.social-sharing .icon-googleplus:hover {color:#cf0709;}
.social-sharing .icon-facebook:hover {color:#3c599f;}
.social-sharing .icon-twitter:hover {color:#28a9e0;}
.social-sharing a:hover {background:#eee; transition:background 250ms; color:white; text-decoration:none;}
.social-sharing a:before {font-size:1.5em; position:relative; top:5px; margin-right:5px;}Now we’re looking at something like this:
Sometime soon I hope to figure out the various networks APIs and look into storing share counts in a database to be used with the popup numbers, but that’s for some mythological day where I have free time and don’t want to use it to go outside…
Enjoy!
And yes, I realize the irony of this post considering I haven’t gotten around to updating the sharing buttons on this site yet… They say a good web designer never has time to update his own site, so I’m using that defense! 🙂
Up Next: A Brief Walkthrough of Woocommerce