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:
| <?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. 🙂
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?
Thank you so much… instead of text i replaced img…
now look at this….
http://www.newsmirchi.in
Looks great! Thanks for stopping by!
Hi Daan,
since this post is 2 years old: is this still the easiest way of creating sharing buttons? I’m kind of stuck and love your approach.
I don’t see why not! It’s simple, doesn’t require anything besides PHP and it’s speedy. Go ahead and give it a whirl! If you need any help, don’t hesitate to ask!
Thanks a lot! I can share it to facebook,
See this: https://www.lyricsofindia.com/
but only main domain will show not the post url after the share. How to display the post featured image when sharing?
thanks. Good work. Keep it up.