Giving readers an easy way to share your content is a no-brainer. There are tons of free WordPress social media sharing plugins, but what if none if them is “just right” or you want to add social sharing buttons without a plugin? What’s a Goldilocks-inspired WordPress developer to do?
The answer? Build it yourself!
Before we dive into the “how to”, let me address a question that might be on your minds…
Why bother doing it yourself?
If there are plugins out there that’ll do the work, why on earth re-create the wheel? Here are a few pros & cons of using a social sharing plugin in WordPress.
Pros
- Stay up to date. Leave the burden to the plugin author to stay up-to-date on any protocol changes (and to you, of course, to keep your plugins updated).
- Fast & easy to deploy. Let’s face it, using a plugin is faster than creating custom social links and is plain good enough most of the time.
Cons
- Limited control over placement. I’m limited to where I can place social share buttons on each page.
- Limited style control. I’m limited to the button styles that come with the plugin. Maybe I want to get fancy (or maybe I simply want to know that I could get fancy).
- Pre-fab is not good enough. I like to do things my way. Can you blame me?
At this point you may not be convinced that the cons outweigh the pros. If not, and you’ve found something that already works well for you, don’t waste your time reading on! Instead, spend your extra minute watching this unrelated video.
So, why Did I Bother?
I liked the idea of including my social sharing buttons with a formal call to action, inviting my readers to DO SOMETHING as a result of reading my post. Below is an example. It’s not perfect, but you get the idea.
Sample “Call to Action” for end of post.
I couldn’t do this with a plugin, so I decided to take matters into my own hands. I’ll show you how to do it, too.
How To: Add Your Own Social Sharing Buttons
For this example, we’re going to add links for the Fantastic Four: Facebook, Twitter, Google+, and LinkedIn.
We’re gonna do it in a three-step process:
- Create some script to support the Facebook button.
- Create a file called social.php to contain our buttons.
- Add some code to our theme file to make sure social.php gets included in the right spot on our post.
Step 1
You need to head over to the Facebook developers area and generate a spot of code. (Note: You’ll need a Facebook App ID). Fill out the form as you wish.
Facebook Like Button Code Generator – Sample
Once you hit Get Code, you’ll be presented with a pop-up, like this:
Like Button Code – The Javascript SDK
Copy that bit of code in the first box (the Javascript SDK) and we’ll paste it in a sec. Facebook recommends putting it right after the opening <body> tag, but I’m a big rebel and opted to put include it in <head> tag. If you’re using the Genesis Framework, you can be-bop over to your Genesis > Theme Settings and drop the code in your Header Scripts section.
Okay, go ahead and paste it.
Done?
Let’s roll to step two.
Step 2
We need to create a file that will house our social media buttons. Let’s call that file social.php. This file will include the actual buttons as well as some <div> tags to let us control the styling.
Here’s an outline of what our page structure (I’ll give you the complete code further down):
<div class="social-button-container"> <!-- Facebook --> <div class="social-fb"></div> <!-- Twitter --> <div class="social-twitter"></div> <!-- Google Plus --> <div class="social-gplus"></div> <!-- LinkedIN --> <div class="social-linkedin"></div> </div>
I won’t detail the CSS since you’ll need to change it for your own site, but here’s something to get you started. 
.social-button-container {
clear: both;
overflow: hidden;
margin: 0 auto;
width: 50%
}
.social-fb, .social-twitter, .social-gplus, .social-linkedin {margin: 7px 0;text-align:left;}
Okay, let’s start filling in those divs! We’ll start with Facebook. Go back to that code you generated in Step 1 and copy/paste between the Facebook <div> tags.
<div class="fb-like" data-href="<?php the_permalink(); ?>" data-send="false" data-width="150" layout="button_count" data-show-faces="false"></div>
Note that I changed the data-href attribute from the site URL to <?php the_permaklink(); ?>. That’s the magic bit of code the enables the Facebook button to dynamically “like” whatever page you’re on, not just a hard-coded URL.
Now for Twitter. (This code comes from the Twitter Button Resource page)
<a href="https://twitter.com/share" class="twitter-share-button" >Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
And Google+. (This code came from Google Developers instructions on adding a +1 button)
<g:plusone></g:plusone>
<script type="text/javascript">
window.___gcfg = {
lang: 'en-US'
};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
And lastly, LinkedIn. (This code comes from the LinkedIn’s Share Plugin Generator tool)
<script src="//platform.linkedin.com/in.js" type="text/javascript"></script> <script type="IN/Share" data-url="<?php the_permalink(); ?>" data-counter="right" data-showzero="true"></script>
Note once again the use of the_permalink() instead of a hard-coded URL.
Alright, let’s put it altogether. Your completed social.php file should look like this:
<div class="social-button-container">
<!-- Facebook -->
<div class="social-fb">
<div class="fb-like" data-href="<?php the_permalink(); ?>" data-send="false" data-width="150" layout="button_count" data-show-faces="false"></div>
</div>
<!-- Twitter -->
<div class="social-twitter">
<a href="https://twitter.com/share" class="twitter-share-button" data-via="cdils">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<!-- Google Plus -->
<div class="social-gplus">
<g:plusone></g:plusone>
<script type="text/javascript">
window.___gcfg = {
lang: 'en-US'
};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
<!-- LinkedIN -->
<div class="social-linkedin">
<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/Share" data-url="<?php the_permalink(); ?>" data-counter="right" data-showzero="true"></script>
</div>
</div>
Now FTP social.php to your theme’s root directory (i.e. wp-content/themes/mytheme/).
You’re SO CLOSE! Let’s move on to Step 3.
Step 3
The final step is to tell our theme to execute social.php in the right spot. For this example, I want to add it ONLY on single posts and to place it right after the post.
If you’re using the Genesis Framework, you can add this to your functions.php file (or init.php).
/** Add Social Sharing Links on Single Posts **/
add_action('genesis_after_post', 'include_social', 9);
function include_social() {
if ( is_single() )
require(CHILD_DIR.'/social.php');
}
If you’re using a different WordPress theme or framework, the logic will be the same, you’ll just need to change the first line (add_action('genesis_after_post', 'include_social', 9);) to reflect the right action hook.
Are you ready to give it a try for yourself?
Go Try it!
If you’re still reading at this point I’m thinking you’re committed to trying this out for yourself. Try starting small and create a baby social.php file that will print “hello world” the screen, like this:
echo "Hello World";
Got your file created? Okay, upload it to the server and try Step 3 (the part where you call that file into your theme).
Did it work? If you’ve got it working this far, all that’s left is to go back and throw in the actual social link buttons. You can do eet!
There are definitely different ways to go about including these social links on a post. I’d love to hear your thoughts about a different or better approach.
That’s all Folks
There are definitely other ways to go about adding custom social sharing links. If you have suggestions for a different or better method or would like to share your successes, please leave a comment below!
Love it! Thanks for the help today. The tut worked like a charm but I wonder if this method is slowing down my page loads? I get something pixel.quantcast.com which seems to take forever to load or its my service provider which is normally the case.
Try this for checking site speed: http://tools.pingdom.com/fpt/. Might check it and then check again removing the call to that social.php file. Not sure about the pixel.quantcast.com thing. My guess is it’s being called in via javascript somewhere, but not sure if that’s related to the social icons.
Hi Carrie,
Great tutorial. I’m linking to this in my talk tonight at the Austin WordPress Meetup. You’re doing what I like to do for clients – just use the simple code from the social media platforms. It just works.
Bobby, this can potentially slow down the page load as each button is making a call to an outside host. So there’s your page loading waiting on Google, Facebook, LinkedIn, etc. to load the buttons and code from their servers. That’s why I stongly advise people to only place these on single Posts, not their blog index or archive pages.
Cheers!
Pat
Hey Pat,
Great point about the individual server calls – is there anything you would recommend doing differently? I guess the Facebook script that’s dropped in the header could be conditionally called in on posts to save that script from executing on all pages…
Appreciate the mention. Enjoy the meetup!
Carrie
You may want to consider a lazy loading version if you are having speed issues. http://socialitejs.com is pretty cool.
Nice! I’ll check it out – thanks for the tip!
Hi Carrie,
Thanks for your ideas, but I don’t see the tutorial. Also, I really like your share link with the rollover choices. What do you use?
David
Hey David,
I’ve made a mess of my site and the pagination buttons were buried beneath the related posts. Here are the links to pages 2 and 3 of the article:
http://www.carriedils.com/social-sharing-without-plugins-wp/1411/2
http://www.carriedils.com/social-sharing-without-plugins-wp/1411/3
I’m currently using Sharedaddy (included with Jetpack), but don’t know that I’ll keep it. I’m always experimenting around here.
Carrie
Carrie, thank you. I so wish I had found this a month ago. I’m a graphic designer and total WP CSS hack, and I’ve tried so many ugly plugins. It’s a deadly combo, because the answer to ‘How many designers does it take to screw in a lightbulb?’ always seems to be, ‘Does it have to be a lightbulb?
If you want to make your social buttons look a bit different you can use the javascript plugin called Sharrre to create your own social buttons.
Thanks, Paul!
have you tried doing a custom pinterest button with a custom image?
Hey Paul,
I haven’t but the “Pin It Buttons for Websites” on this page will generate the code you need. You could just sub in a custom image if you wanted. Not sure I’ve got things worth pinning around here.
Carrie
Hi Carrie,
I’ve been enjoying your blog. I’m having a heck of a time finding the code I need to make simple share icons. I have my own images and don’t want to track how many times someone tweets or likes one of my posts, so I don’t want any numbers displayed.
I’m using Genesis and can easily insert the code via hooks, but I can’t figure out how to do this. Do you have any suggestions? Sometimes people don’t need to fancy stuff and just want streamlined and simple.
Thank you!!
Hi Carla,
Thanks for stopping by. This tutorial is using code snippets (and therefore images) provided directly from the social media platforms. I’m sure there are ways to do it using your own images, but I haven’t tried it. The same concept will apply for where you’re hooking into your theme, but the javascript connecting to the social media service will probably change a little.
I’ve seen some social share plugins that let you upload your own custom images – that might be a simpler route to go!
Carrie