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 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.
Once you’ve done that and enabled your app to go live, We can begin to add the Like button to our website
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.
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’
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.