In general, I just use one of the many available plugins for WordPress to include social share buttons on my web site. But sometimes, some projects call for a little customization.

In this article I will show you how to include custom share buttons in WordPress without using a standard WordPress plugin. This involves the use of a tiny amount of PHP, some HTML, JavaScript, and CSS. All code will be provided below.

Truthfully, it can all be done without the JavaScript but the JavaScript allows for a cross-browser friendly way to have the share pages to show up in popup windows after the buttons are clicked.

Watch the video below to see it in action.

Follow These Steps To Include The Custom Share Buttons Into Your WordPress Site

1. The first step is to put the JavaScript in place.

We can download the required JavaScript files from this page here. The direct download link is here.

Don’t follow the WordPress instructions on that page though because they simply don’t work. The JavaScript itself works flawlessly however (in my experience). I do advise however that you use it at your own risk. Neither myself or Webmaster.net can claim responsibility if something goes awry after using the code.

Once downloaded, you can unzip the files onto your computer. To have things work out of the box without tweaking any file paths later on, upload just the “jqSocialSharer” and “jqSocialSharer.min” files to the “js” folder that resides within your current theme folder. If there isn’t one in there, go ahead and create one. Use FTP or your web host’s File Manager to get that folder created and to upload the JavaScript files.

2. Call the script from your header template file.

Yes, I am having you modify the theme in this case. If you’d rather not, have a quick peek around this site for a quick way to add the lines using a custom WordPress function or plugin.

Ok, if you want to follow along and edit the template file, we are modifying header.php here.

Right above the wp_head() command in header.php, include the following line of code:


<?php wp_enqueue_script('jquery'); ?>

We need that line in place in order to be able to use jQuery, as you might’ve guessed. It uses WordPress’s version, which may or may not be ideal, depends who you ask. If you ask me, I say it works, no muss, no fuss.

Now, just below the wp_head() command in header.php, include the following lines of code:


<script src="<?php echo get_template_directory_uri(); ?>/js/jqSocialSharer.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$("#share a").jqSocialSharer();
});
</script>

Those lines are necessary to call the JavaScript function that we want to use for our cross-browser popups.

3. Now we can include the code needed to display the buttons.

In my example (shown in the video) I am using the buttons on each WordPress page of the site, so that is what I will be explaining below. You can modify the placement of the code slightly to accommodate your needs.

The code I use requires that it is placed within the WordPress loop. You can make tweaks to have it work outside the default loop if need be. That won’t be covered here however.

Alright, for this I modified the Page Template file (page.php). Actually, more specifically I modified the content-page.php sub file for the theme that I am using, but in general this code would go in page.php.

Below is the PHP/HTML/JS/CSS code that goes within the loop. It dynamically inserts the page title and URL into the sharer links for the corresponding social networks. The JavaScript function supports Pinterest too but in this example I am only using Facebook, Twitter, and Google+.


<div style="margin:10px 0 10px 0;text-align:center;" id="share">
<a href="#" class="facebook" data-social='{"type":"facebook", "url":"<?php the_permalink(); ?>", "text": "<?php the_title(); ?>"}' title="<?php the_title(); ?>"><img src="share3-facebook-alt.png" width="200" height="80" alt="share on Facebook"/></a> <a href="#" class="twitter" data-social='{"type":"twitter", "url":"<?php the_permalink(); ?>", "text": "<?php the_title(); ?>"}' title="<?php the_title(); ?>"><img src="share3-twitter-alt.png" width="200" height="80" alt="share on Twitter"/></a> <a href="#" class="plusone" data-social='{"type":"plusone", "url":"<?php the_permalink(); ?>", "text": "<?php the_title(); ?>"}' title="<?php the_title(); ?>"><img src="share3-google-alt.png" width="200" height="80" alt="share on Google+"/></a>
</div>

>> You can download all of the code here (note: this does not include the JavaScript file, use the link earlier within this article for that source)

Be sure to modify the code for the images that you are using for the buttons. In particular you will want to change the width, height, and image path. You might also want to play with the margin and alignment styles in the div tag wrapped around it.

Other than that, it’s best not to touch anything unless you know what you are doing. In particular the id and class CSS names are necessary for this to work properly.

The output displays the images side by space with a space in between. There might be better ways to do that, or you might have other ideas for placement, like having them stacked for example. Change the code accordingly to accommodate placement if necessary, but please be careful.

As for the images (custom social buttons), I used ones that were provided by the OptimizePress theme and plugin. I’m pretty sure I can’t rightfully share those or else I would. You can do a Google search for sites that offer buttons. Or you can use Google Image search with the appropriate settings to find buttons that you have the rights to use on your sites.