Use Template Part to add social media sharing buttons to your site

There is a huge number of different plugins available to add social media sharing buttons to your site. But why use a plugin that has more than hundred different buttons when you’re only going to use a handful of them?

Here on WPTIPS, we only use our own shortlink and the Google+ button and before June 2011, we even didn’t have that sharing button. We have chosen for this minimal approach, because we think that if you want to share our tips, you are very capable of doing that with our shortlink or using your own choice of social media. We like Google+ and it’s the only social media we actively use at the moment, so that is also the only button that made it on our site.

Of course it also depends on what audience you target with your website. Some people are not so tech-savvy and for them simply clicking a button is easier than the DIY approach.

And for sites with such a target audience the following tip might come in handy. For this tip we only focus on adding four social media sharing buttons, namely the ones of Facebook, Twitter, Google+ and LinkedIn. If you want, you can easily extend it to more than those four.

To add these four social media sharing buttons to your site, we don’t use a plugin. Instead we use a template part.

From the WordPress Codex:

A template part makes it easy for a theme to reuse sections of code and an easy way for child themes to replace sections of their parent theme.

So basically you can use a template part for anything that you can reuse within a theme and even among different themes.

In case you think that never before you have used template parts, then we can tell you that most likely you actually have used them already. For example loop-single.php (Twenty Ten) and content-single.php (Twenty Eleven) are both template parts!

Take a look at the code below and although it has clear instructions in the top of the file, we list them here too for your convenience.

Instructions:
• Step 1. Take the code from line 10-36 of this file, paste them into a blank file, save that file as icons-social.php and upload it to your theme’s directory. On lines 19 and 21 you need to fill in your Twitter username and on line 24 you need to upload your favourite tweet-button (or grab it from http://a2.twimg.com/a/1319826270/images/goodies/tweetn.png) to the images folder of your theme.
• Step 2. Take line 39 of this file and paste it into your template files on the place where you want the icons to show up.
• Step 3. Take the scripts of line 42-49 and paste them in your footer.php file just above the closing tag.
• Step 4. Style through CSS. NOTE that with the code below you will get 4 working share buttons. If you however want to make adjustments then visit the following pages: Facebook , Twitter, Google+, LinkedIn (all links go to developers pages of the resp. sites)

Inspired by Yoast and we got to write this tip due to a recent LinkedIn WordPress Group discussion.

Which approach do you take towards adding social media sharing buttons to your site?