Back in the day when I was doing client work, the single requirement that all clients wanted, no matter what, were the social sharing buttons. And for good reason. All were pushing fresh content on a regular basis and wanted that content to reach as many people as possible. These buttons were and still are the easiest, most recognisable way for a reader to share an article through their social channels.

Thus, during the years, I wrote code for a lot of share buttons, from the very simple, to the very complex, buttons with share counts, custom colors, custom icons and so on. Good thing that happened, because I reached a point were I started to put all the pieces together into a personal tool to help get the job done as quickly as possible, a tool that slowly became Social Pug, a fully featured social sharing plugin for WordPress.

But I don’t want to talk about the capabilities of a mature WordPress plugin, I want to help you add the simplest sharing buttons. Whether your client doesn’t want sophisticated stuff or you are just starting out with theme development, I’m sure you’ll find this information useful. So, let’s jump to it…

For this example we are going to add three share buttons, for Facebook, Twitter and Google+ just before the article’s content. To achieve this we’ll be writing two code blocks, one with a few lines of php that you can add in your theme’s functions.php file and one with a few lines of CSS that you can add in your theme’s style.css file.

The php

In the above code block we’ve added a filter to modify the content of the post that is being outputted in your website. We won’t actually alter the existing content, rather we will prepend the HTML for the social share buttons to it.

Going through the code, the first thing we do is grab the post’s URL and title, these being the pieces of information that will be shared by your readers. Having these, we will then compose the share link for each social network, which will be added as the “href” attribute of the share buttons.

Now that we have all the needed data, we can start composing the $output, which consists of three “<a>” tags, one for each social network, wrapped inside a “<div>”. Lastly we’re concatenating the $output with the $content and returning the value.

Optionally, if you want the share window to open in a pop-up, rather than a new tab, you can add the following “onclick” attribute to the “<a>” tags.

onclick="javascript:window.open(this.href,\'\', \'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600\');return false;"

The CSS

The CSS code block above is used for basic styling of the buttons, to give them a flat clean look with the background color of the social network they represent. Grab more social media website brand colors from this article: The Colors of the Social Media Websites.