Facebook Like Button: Add it to your WordPress or other Website

Facebook Like Button: Add it to your WordPress or other Website

A nice thing to have on each of your blog posts or web pages is a like button from Facebook which will allow users to like individual posts. This will help you gauge how people have received each post in comparison to others.

Facebook Like

With the like button, there is a nice feature to prompt the user to share it to their feed. This will exposure your post to more people (you should be able to try it above – you can always un-like and un-share it too!).

The code is very simple to add, but it is code, so it looks scary!

The latest code at the time of writing is here. It requires that some Javascript be added on the page and also a “div” (read division or section) where the like button will actually go.

There are a few different parameters (and you should play around with them); but for the purpose of getting the current page (and hence post) leave the URL to Like blank. Alternatively if you want people to just like your Facebook page then put that in the top box. Then use the settings you want (you get a nice preview of what it will look like in the top right too):

Like Settings

Hitting “Get Code” gives you potentially a scary looking dialog box. This contains the Javascript I mentioned at the top and the “div” where the like button should go.

Like Code

Next steps:

In WordPress go to Appearance->Editor.

Don’t be scared!

You will now need to find the page on the right hand side which has the template for a post. Usually called “post” or “content” but each theme has it’s nice intricacies. If you are not sure then perhaps add the number “1” to the very beginning of the file and save your changes – refreshing the site will show that “1” and you can check it is the correct page.

For my current theme it is is in “content.php”:

Content Php EditorAt the top of this file (for simplicity), before any other text, add the Javascript section as above.

For me I wanted to put the like at the top of the post below the title (you could put it at the bottom of the post too?!). So I found where title was on the page and simply pasted the “div” code a line below it.

Div Like Below Title

Hitting save changes will automatically add it to the page and will immediately update the site. Check back on the post page to see if and where it has got to and play around with where it is as it isn’t an exact science! You are unlikely to break anything – but if you are playing around a lot then I suggest backing up the file before doing anything you are unsure about (copy it all into notepad or textpad).

Hope this helps those out there! I may even create a widget that does this automatically – but I’ll save that for a rainy day…

p.s. One thing worth mentioning is that if you update your theme then you might lose the button – you can always add it back in because it was simple though – right?!

Comments are closed.