How to add Social Share Buttons to WordPress without Plugins

There are plenty of plugins for WordPress that allow you to add social share buttons to your Posts and Pages. Usually, these plugins are bloated.

They require a lot of CSS-overrides to make it fit with your theme’s design. Some even slow your site down, because they’re not coded well or are packed with a bunch of options you don’t need.

Well, to hell with code-bloat! I want your site to be fast. Today I’m going to show you a really simple way to add your own social share buttons to your WordPress blog.

A pure PHP solution for Social Share Buttons

In this tutorial we’re going to build your social share buttons in pure PHP. That means, no fancy effects with jQuery pop-ups, etc.

I assume you’re familiar with WordPress’ theme structure and editing your (child-)theme. Of course, you’re going to have to style the buttons using CSS, but that’s beyond the scope of this tutorial.

Share buttons for Google+, Twitter and Facebook without the Bloat

I chose the following approach, because I think it’s easier and cleaner for your code to use templates (or code blocks).

Before we decide where to place the sharing box (although you’ll probably have a place in mind already) we have to create the template file.

Create a file called template-sharing-box.php in your (child-)theme’s folder and paste the following lines of code:

The variable $postUrl might seem overly complicated at first. What it does is check whether the used protocol is secure, before the rest of the request URI is added. I’ve added classes to every element, so they can be easily styled to blend in with your theme’s design.

Note: If you want to get the non-SEO-friendly URL (e.g. yoursite.com/?p=300), you can remove the $postUrl variable and replace every instance of it with get_permalink().

Each link opens in a new tab or window depending on the browser settings of the user. For Google+ and Facebook, only the post’s/page’s URL is passed in href (the hyperlink). For Twitter, the author of the post/page and the title are also passed for use in the retweet-message.

Now it’s time to decide where to add your social sharing box. Probably somewhere underneath the_post() or the_content(). For posts, open your (child-)theme’s single.php and place the below line of code, where you want your sharing buttons to appear. For pages, open page.php.

get_template_part('template', 'sharing-box');

That’s it. Now you have fully functioning social share buttons for Twitter, Google+ and Facebook in your posts and/or pages that can be styled to your wishes. Without plugins. Go ahead, give it a spin! Click one of the buttons below. 🙂