How to Add Social Sharing Buttons to a List of WordPress Posts on an Index Page with No Plugins

It’s easy to grab the code from Twitter, Facebook and Google and add sharing buttons to WordPress sites, especially if you’re even semi-familiar with how coding WordPress themes works. There are also a plethora of plugin options out there that non-coders can take advantage. Here I’ll explain how to add these three types of sharing buttons—Google +1 buttons, Facebook Like buttons, and Twitter “Tweet” buttons—without using plugins and so that they actually work.

Note that the reason I’m even posting this is because just grabbing the code those pages provides isn’t enough to get the job done. By default, they’ll work fine on a “permalink” page, for example a single.php or page.php page, but for index.php, archive.php, search.php and category.php pages (to name a few), where you have multiple posts listed at once, they aren’t so great as they only point to the URL of the actual page, not the post itself. So if you had twenty posts on an archive page, say, clicking the buttons on those pages would only promote the archive page itself, not the actual individual posts. Read on to rectify.

Firstly, you can get the code for each of the various pages in the following locations:

I only cover those three here because they’re the only services I recommend to my clients (aside from occasionally LinkedIn). I don’t believe in having dozens of sharing buttons on a site because all of those Digg, Reddit, Stumbleupon, etc. buttons only pollute your site, slow it down with their incessant need to load a bunch of scripts and graphics, and dilute the likelihood of someone clicking a valuable button that might be seen by a large number of users on popular networks with the off chance that someone will share you on some fledgling social networking site. But anyway, off to the races.

Google +1 Buttons for WordPress Loops

  1. Go to the official Google +1 page for creating buttons.
  2. Choose your size, annotation & width.
  3. Copy and paste the code as provided in the Copy and paste the following code into your siteinto the various correct positions on your site as follows:
    • Open up your header.php file and paste the second part of the code somewhere above the call to <?php wp_head() ;?>

      <script type="text/javascript">
      (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 paste this into your theme wherever you’d like to place the actual button itself. Note that it should be within the Loop.
      <g:plusone annotation="inline" ></g:plusone>
  4. Now we have to modify the code slightly to tell Google not to +1 the entire page, but just the specific post on that page. Add the following highlighted code to the snippet:
    <g:plusone annotation="inline" href="<?php the_permalink(); ?>"></g:plusone>

You’re all set for proper Google +1 buttons. Make sure to check all instances of your site’s theme, such as index.php, archive.php, category.php, search.php, tags.php, and any custom listings pages your theme might implement.

Facebook Like Buttons for WordPress Loops

  1. Go to the official Facebook page for creating buttons.
  2. For the URL to Like field, just enter in your website’s main URL for now, something like http://yourwebsite.com. You can set any of the other settings as you’d like.
  3. Click Get the Code and choose IFRAME as the type of code you want to use.
  4. Copy and paste the providing code into your theme where you want the button to appear.
  5. Before saving, look through the code for the text “http://%3A%2F%2Fyourwebsite.com”, as highlighted in the example below:
    <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fyourwebsite.com&send=false&layout=standard&width=450&show_faces=true&action=like&colorscheme=light&font&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>
  6. Replace that entire highlighted section with <?php the_permalink(); ?>

And tooty fruity oh rudy you’re all set for Facebook. What we did there was used WordPress’ the_permalink() function to set the URL instead of the one Facebook asks us to manually enter.

Twitter Share / “Tweet” Buttons for WordPress Loops

  1. Go to the official Twitter page for creating buttons.
  2. Choose Share a Link from the list of options, if it’s not already chosen. For the Share URL field, tick the second radio button / option and enter your website’s URL, something like http://yourwebsite.com.
  3. Copy the code that Twitter provides.
  4. Paste the that code into your theme where you want the Twitter share button to appear.
  5. Before you save the file, look through the code for the text “http://yourwebsite.com”, as highlighted in the example below:
    <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://yourwebsite.com">Tweet</a>
  6. Replace that entire highlighted section with <?php the_permalink(); ?>

You’re good to go with Twitter now as well.

Hope you’ve enjoyed this blast from the present, fun filled tutorial adventure!

Up Next: How to Change any Image used in a WordPress Plugin without Editing the Plugin Itself