in , ,

How to add Social Share Buttons to WordPress without Plugins

Add Social Share Buttons to Wordpress

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.

However, I’ve written this tutorial directly after implementing the below code within my own WordPress theme. I’ve kept the design generic. So, feel free to copy the styling straight of my page!

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:

<?php
/* Social Share Buttons template for Wordpress
* By Daan van den Bergh
*/
$postUrl = 'http' . ( isset( $_SERVER['HTTPS'] ) ? 's' : '' ) . '://' . "{$_SERVER['HTTP_HOST']}{$_SERVER['REQUEST_URI']}"; ?>
<section class="sharing-box content-margin content-background clearfix">
<h5 class="sharing-box-name">Don't be selfish. Share the knowledge!</h5>
<div class="share-button-wrapper">
<a target="_blank" class="share-button share-twitter" href="https://twitter.com/intent/tweet?url=<?php echo $postUrl; ?>&text=<?php echo the_title(); ?>&via=<?php the_author_meta( 'twitter' ); ?>" title="Tweet this">Tweet this</a>
<a target="_blank" class="share-button share-facebook" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $postUrl; ?>" title="Share on Facebook">Share on Facebook</a>
<a target="_blank" class="share-button share-googleplus" href="https://plus.google.com/share?url=<?php echo $postUrl; ?>" title="Share on Google+">Share on Google+</a>
</div>
</section>

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. 🙂

Buy me a beer?

Do you appreciate my work and support? Please consider supporting me by donating, so I can continue to develop and write useful solutions for you.

Choose amount

Personal Message

Thank you! 🙂

Written by Daan van den Bergh

Magento 2 Back-end Developer with a passion for trainlifting, airplane-gliding, hunting trees and creating fake hobbies.

4 Comments

Leave a Reply
  1. Hi there,
    Thank you for your very useful post on Social Sharing without plugins! I am trying to reconfigure mine and wanted to add the ‘wordpress’ social sharing button. I did this but I cannot get the ‘url’ for sharing on WordPress. Nor can I find it anywhere..!
    I see that you don’t include it in your code either. Is there a particular reason for doing so? If you do know what the ‘url’ value for WordPress sharing is, do you mind sharing it with me please??
    Thanking you in advance..!

    • Oof! Good question! I don’t do it, because I’m not a WordPress.com-member (this is a self-hosted WordPress.org blog). I believe sharing on WordPress.com becomes available with the default share buttons, delivered along with the Jetpack-plugin. Have you checked it out?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.