How To Add The Facebook Like Button To WordPress. (Without Plugins)

Facebook Likes and Comments

If there’s one thing I love doing more than anything, its making stuff for the internet. So as a result I’ve made hundreds of websites (often built with WordPress) and have learned quite a lot about the design and the back end code that goes with it. But you can only do so much with a ‘Free WordPress Theme’ aside from slapping on a load of pre-made plugins.

So I decided it was time to make my own theme, have it exactly how I want it with all of the features that I usually add in with plugins, baked right into the theme itself.

Features for example that include the Facebook Like Button and Facebook comments on every post to increase the chance of a viral post.

The first thing I wanted was to have a ‘Facebook Like Button’ on every post. So to achieve that I simply went to the Facebook developer website.

You first need to associate an ‘app’ to your website and you can do that by heading to https://developers.facebook.com/apps/ .

create a facebook app

Create your app and grab the App ID and place this code inside Header.php of your theme

<meta property='fb:app_id' content='YOUR APP ID HERE' />

You can find the App ID at the top of the page, once you’ve created the app.

You will also need to finish off the app set-up with some prerequisite information. Namely the Privacy Policy URL (Good thing WordPress gives us one automatically!)

add a privacy URL to the facebook app

Once you’ve done that and enabled your app to go live, We can begin to add the Like button to our website

Facebook Like Button For the web

Now to make this actually work for every post individually I had to change some of the code around. Initially you might see something like this when adding a like button to your website.

Facebook Like Button HTML Code

I’ll break it down a little bit, the top part of code is the JavaScript that talks to the Facebook server and sends the like to Facebook, whilst also adding the like to your page.

The second part is the like button itself and this is what I had to change in order to work with every post on its own.

So instead of it looking like this …

<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-width="" data-layout="button" data-action="like" data-size="small" data-share="false"></div>

My code needed one little tweak

<div class="fb-like" data-href="<?php the_permalink(); ?>" data-width="" data-layout="button" data-action="like" data-size="small" data-share="false"></div>

You may not see much of a difference in the code but there is one crucial part to the second set of code that I included and that’s this bit.

<?php the_permalink(); ?>

By adding this bit of PHP Code it sends the permanent link for whatever post it is being displayed on to the Facebook servers and that is how you get Facebook likes on an individual post. No Plugins required, just a little bit of technical know-how and some determination to get the job done.

The next part was the Facebook comments and this was even easier

to achieve this, on the Facebook Developer website, on the left hand side hit ‘comments’

Facebook Developer Navigation

Then all you need to do is copy the facebook comments code into your Single.php code, remebering to change the data-href variable to <?php the_permalink(); ?> and voila. You now have Facebook comments on every one of your posts.

You can actually add a lot more to your website if you wanted to as well. Just remember that if you want to add a social button to any of your posts/pages that by using the permalink WordPress function, it will automatically link it to an individual post/page and won’t just link back to the default landing page.

Article by Matt Dean

My name is Matt Dean and I have made hundreds of websites often using WordPress as the foundation. Whether you are an amateur web developer or a business owner in need of a professional-looking website, I aim to provide you with practical advice for developing and maintaining your WordPress website.