3 Steps to Adding Facebook Like button to your website

If you are going to add a Facebook Like button to your WordPress blog, or any other site for that sake, the method is pretty darn simple. I would recommend you follow the following few steps.

1. Get the Facebook Like button code

The site you should visit to get the Like button on your website is the Facebooks center for Developers. There are three different types of boxes to choose between. Click around and you will get it soon enough.

2. Adding the code to your website

I suggest you select the HTML5 verified code. It might look a bit more scary than the iFrame option which is available, but it performs much better if you ask me.

Simply copy the first part of the code that looks like this:

Then copy that into your HTML-page where your <body> tag is. The body tag might be stuck between a lot of other code, so you do best in searching for it by using  + F on a Mac or Ctrl + F on a PC. Once you have found your body-tag, simply paste the code above beneath it so it looks something like this:

Secondly you add the second snippet of code where you want the button on your page. I have chosen to place it just underneath the title and date of my blog post.

3. Add the OG meta to your blog

In order for you to be able to control what is shared to Facebook, and possibly also get some more of that EdgeRank visibility juiced out of your links, you should add OpenGraph protocol to each of your pages.

OpenGraph protocol is something you should have on all of your pages really. The code looks something like this, and should be placed somewhere between the <head> and the </head> tags of your code.

<meta property="og:title" content="The title of your page" /> 
<meta property="og:type" content="website" /> 
<meta property="og:url" content="http://www.thelinktoyourpage.com" /> 
<meta property="og:image" content="http://theimagelinkyouwanttoshare.com/images/image.jpg" />

Regardless of whether or not you are using the Facebook Like button or not. If someone shares your link to Facebook, the OG controls what is being shared to the platform. Sharing my blogs about me page to Facebook, with OG, looks like this:

All OpenGraph standards can be found at the OpenGraph Protocol website. There are many more things you can control such as descriptive texts, playable formats etc. I suggest you play around and test it. A great place to test if you have implemented it correctly or not is if you go to Facebooks own debugger.

4. Changing the language of the Like Text and Customization

Now you might not want the Like text to say Like, but something in a specific language. I found a post from another dude or dudette that was awesome on the topic. You can find that one here: How to Add Facebook Like Button & Like Box for Different Languages

If you want to make it even a bit more advanced you should have a look at this post: How To Add a Custom Facebook Like Box to Your Site

Leave a Comment