Adding Facebook Like Button To All Your WordPress Posts

 In WordPress

Recently a client made what should have been a simple request of me: add a button to facilitate liking their Facebook page at the end of every post. Of course, this is something you can manually do by simply pasting some HTML at the end of each post, but this is clearly not ideal. It’s incredibly error prone, and you’d have you to go back and edit every previous post on your site.

Luckily, we’re working with WordPress, which at its core is a template system. It comes with a variety of ways to manage content and its layout, including plugins and hooks and filters. To that end, I first started by searching the WordPress plugin repository for Facebook plugins, as I assumed this was a pretty common feature people wanted on their sites. But to my surprise, after trying half a dozen of the top Facebook WordPress plugins, none of them did exactly what I needed. Some of them use older Facebook APIs and simply don’t work anymore, while others required updates to template files to include short codes. I always try to avoid updating template files whenever I can because it creates maintenance problems: inevitably the theme or plugin will update the original template and you may not remember to go back and update your copy of it. That doesn’t mean it’s not a valid approach to solving problems in WordPress, but in this case I had a better idea that is upgrade-proof and simple to implement.

Adding a Facebook Like Button To WordPress Posts

As I mentioned above, one of the best ways to use native WordPress functionality to modify content dynamically is their robust system of hooks and filters. While these hooks and filters could change with WordPress, the core developers are very conscious of making changes that don’t break existing sites. And when breaking changes do occur, there is plenty of warning ahead of time. So in general, using hooks and filters is a safe and efficient way of doing exactly what we need here.

So first things first, make sure you’re using a child theme. This is always a WordPress best practice, and it’s something I do for all of my clients, even if I don’t have an immediate need when I create their site. It’s nice to have the infrastructure created and setup when the time comes to make changes, instead of having to create a child theme after launch and risk breaking the site. If you need help creating a child theme, the WordPress theme handbook is a great place to start.

With your child theme in place, it’s time to get to the business of adding your Facebook like button to your WordPress posts. There are two ways to create a Facebook like button on your site. One uses JavaScript and HTML, and the other is a simple iframe. We’ll the latter approach because, honestly, it’s simpler. If you go the JavaScript route, you have to worry about enqueuing scripts in the right place, and then adding the HTML code at the proper place in your theme or hook. With the iframe, we don’t have to enqueue any scripts and simply add the iframe HTML.

Your child theme should have a file named functions.php, which is where we’ll place our custom code. Open this file in the WordPress editor (Appearance > Editor from the admin screen) and add the following code:

This code makes use of the the_content filter in WordPress, which is triggered whenever the main content of a post or page has finished being rendered. Of course, make sure you change the page name to the name used in the URL of your Facebook page (just visit your page in any web browser and you’ll see it). Note that the code above checks if the page being rendered is a single post, as opposed to an archive, page, or other custom post type. If you need to display a Facebook like button on other parts of your site, just change the first if statement to meet your needs. For example, you could include the like button on WooCommerce products by using is_product() instead of is_single().

Also note the Facebook page plugin API has numerous options for what to display with the like button. The code above is minimal, and simply includes the page logo image and number of current page likes. But if you read Facebook’s documentation (link above), you’ll see there are lots of other options to include:

  • Current friends (of the visitor) who like the page
  • Page cover image
  • Page events, timeline, and messages

The more data you add the bigger the content becomes. Play around with adding and removing parameters until you find the look that’s right for you needs.

And finally, using this approach has one drawback. You are somewhat limited in where the Facebook like button appears on your posts. Your theme will determine the overall layout of content, and other plugins may append their own content when rendering posts. But overall, this approach is quick and simple and will meet most people’s needs.

Recent Posts
Google AdSense WordPressWordPress Social Media Sharing Basics