After being brought on to rebuild many a WordPress install loaded down with performance sucking, security risking plugins, figured I’d begin covering ways to write this stuff in natively. A great place to start is custom social shares.
Now, no disrespect to all the very smart plugin authors out there on the grind. Keep on doing it guys. And, there are plenty of super valuable plugins that seriously improve the Wp workflow – caching, Contact Form 7 and ACF for example. But, when it comes to a simple action like social promotion, most sites could benefit from some handcrafted love.
Too Much Tuna
- Facebook ‘Like’: 270Kb
- Google+ Share: 135Kb
- Twitter Share: 95Kb
- LinkedIn Share: 80Kb
Add it up are we’re talking 580Kb— or more than 10 seconds on a good mobile connection. Lame. And what for? I know your blog posts are awesome and all, but honestly, how many are getting crazy pushed to each network?
Cutting the Fat
Luckily, the major social networks all offer a url-based sharing system that launches an auto-populated form ready to rock and roll. Each network has a unique link structure to grab this info, but they all include the page’s link, title, description, and sometimes image. Here’s a run down of the big ones:
You get the idea. Plenty of resources out there if you need them all. I myself only care about Twitter, but I hear this Fb thing is pretty popular too.
Let’s Do It… Dynamically
Now that we have our social links, let’s add them to our own icons and use Wp tags to populate the page link:
<php the_permalink(); ?> and page title:
<?php the_title(); ?>.
For your iconography, I’d recommend heading over to a service like IcoMoon and building a fresh icon font.
Next, open up your single.php file and figure out where you want the shares to appear. I usually design a little post footer, right after post content, to house my socials, author meta, etc.
Bringing everything together – icon font, url structure & template tags – it goes a little something like this:
<!--Twitter--> <a href="http://twitter.com/home?status=<?php the_title(); ?>+<?php the_permalink(); ?>"> <span class="icon-twitter"></span></a> <!--Facebook--> <a href="http://www.facebook.com/share.php?u=<?php the_permalink(); ?> /&title=<?php the_title(); ?>"<span class="icon-facebook"></span></a> <!--Linked In--> <a href="https://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>&summary=&source=<?php get_home_url(); ?>"<span class="icon-linkedin"></span></a> <!--Google Plus--> <a href="https://plus.google.com/share?url=<?php the_permalink(); ?>"> <span class="icon-gplus"></span></a>
Simple right? Plugin free, fat free, custom icon awesomeness. A great first step in really owning your site and theme.