Adding Social Share Buttons to any WordPress Page, No Plugin, No External Javascript
I’m all about trying to squeeze every last ounce of performance out of my clients’ sites these days. Fractions of a second mean a world of a difference to the mighty Google.
Still, everyone really loves those social sharing buttons to be somewhere on their pages. Sharing, theoretically, boosts traffic. Scientifically, the data just isn’t there, but certainly we can all agree that if we’re going to have sharing buttons on our pages, they shouldn’t come with a bunch of bloated third-party scripts that will slow our site down.
It’s actually rather easy to add standard links that can perform more or less the same functionality, though we won’t be showing share counts here. Also note that this is all for WordPress, as there are functions to grab things like the URL, page title, etc.
This is what our buttons will look like when we’re done.Firstly, lets look at our HTML & PHP. You can add this wherever you want the buttons to show up, maybe the header, a floating sidebar, your footer. Dream a little dream for yourself.
<a class="icon icon-facebook icon-replacement" href="http://www.facebook.com/sharer/sharer.php?s=100&p[url]=<?php echo urlencode(get_permalink()); ?>" target="_blank">Like This Page on Facebook</a>
<a class="icon icon-twitter icon-replacement" href="https://twitter.com/intent/tweet?text=<?php echo urlencode(get_the_title()); ?>+<?php echo get_permalink(); ?>" target="_blank">Tweet This Page</a>
<a class="icon icon-google-plus icon-replacement" href="https://plus.google.com/share?url=<?php echo urlencode(get_permalink()); ?>" target="_blank">Plus One on Google</a>Three links, one for Facebook, Twitter and Google+.
Next up, lets use a little CSS to make things prettier:
.share-button {
background: black;
color: white;
border-radius: 2px;
padding: .5em;
text-decoration:none;
}
.share-button:before {margin-right:.5em;}
.share-button.icon-facebook {background:#4867aa;}
.share-button.icon-twitter {background:#5ea9dd;}
.share-button.icon-google-plus {background:#db4b40;}And I’ve also added some icons that I snagged from Icomoon. I won’t go through exactly how that all works, but if you’re not familiar with Icomoon, it’s a great resource for SVG icons / font icons. If you want to get these up and running on your own site:
- Download this ZIP file.
- Open it up and copy the four font files into your theme’s folder. I put mine in a folder setup like /wp-content/themes/MY-THEME-FOLDER/assets/fonts/ and will assume that you’ve done something similar from here on out. You can also copy the selection.json file for future reference. That will allow you to upload that back to Icomoon if you ever want to add more icons to your font file.
- Now open the CSS file that was in that icomoon-sharing-icons.zip file, and copy the CSS into your theme’s style.css file.
That CSS can be trimmed down to this if you’d like:
@font-face {font-family: 'icomoon';src:url('assets/fonts/icomoon.eot?-7ybozg');src:url('assets/fonts/icomoon.eot?#iefix-7ybozg') format('embedded-opentype'), url('assets/fonts/icomoon.woff?-7ybozg') format('woff'), url('assets/fonts/icomoon.ttf?-7ybozg') format('truetype'), url('assets/fonts/icomoon.svg?-7ybozg#icomoon') format('svg');font-weight: normal;font-style: normal;}
[class^="icon-"]:before, [class*=" icon-"]:before, [class^="icon-"].icon-after:after, [class*=" icon-"].icon-after:after {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-google-plus:before {
content: "\e902";
}
.icon-facebook:before {
content: "\e903";
}
.icon-twitter:before {
content: "\e904";
}Now you can add classes like icon icon-facebook to just about any element on your page and get the icons popping up before them.
At this point, you should have the very same social buttons as shown above.
Enjoy!
Up Next: How to Get Facebook Likes Count without a Plugin and with no Additional Pageload Time