There are many plugins out there that allow you to easily add social media sharing links to you website, but most of them add more code bloat than they are worth. You can add social media sharing to your pages without any bloat at all by either using hard-coded href urls or tying in some dynamic code into your existing main javascript file. Here is a quick reference guide for how to do both ways. You should also set up your Open Graph and other meta data for things like thumbnail images (which are detected automatically for most social sites), page title, and description.
Hard-Coded Social Sharing Links
Each social media site has it’s own URL and query string syntax, so you’ll need to either remember these, or just refer back to this page for them. In the following list I am using “Gearside Creative” as the page title and “http://gearsidecreative.com” as the encoded URL. Obviously, replace those with your own.
http://www.facebook.com/sharer.php?u=http://gearsidecreative.com&t=Gearside%20Creative
https://twitter.com/intent/tweet?text=Gearside%20Creative&url=http://gearsidecreative.com
Google+
https://plus.google.com/share?url=http://gearsidecreative.com
http://reddit.com/submit?url=http://gearsidecreative.com&title=Gearside%20Creative
Tumblr
http://tumblr.com/share?s=&v=3&t=Gearside%20Creative&u=http://gearsidecreative.com
http://pinterest.com/pin/create/button/?url=http://gearsidecreative.com&media=https://gearside.com/img/fb-thumb1.jpg&description=Gearside%20Creative
http://www.linkedin.com/shareArticle?mini=true&url=http://gearsidecreative.com&title=Gearside%20Creative
mailto:?subject=Gearside%20Creative&body=http://gearsidecreative.com
Dynamic Social Sharing Links
The above social sharing links are fine if you only have a few pages that you can manually modify the code, but if you are running a CMS or need something more robust, we can modify the above links using javascript. First, start by adding <a> tags with the links from above (this way you’ll have your fallback in case JS is disabled on a user’s browser). Add classes to each <a> tag corresponding to which social site it is linking to. I like to use “share-facebook” or “share-twitter” as my convention. If you wanted to get even more crafty, you could detect the domain from each url above and modify the href from that selection (may be overkill for what you need). Once that is ready, add the following code to your main javascript file (or script tags):
JavaScript
That should do it! If you have a featured thumbnail for each post, you could change the thumb variable to grab that too (I would use a conditional to say if it exists: grab it, else: use a hardcoded logo).
