How To Optimize The Facebook Like Button

While most people would think that implementing the Facebook like button on a website is as easy as dropping in a piece of code, you can dramatically boost your results by making a few subtle changes.

While most people would think that implementing the Facebook like button on a website is as easy as dropping in a piece of code, you can dramatically boost your results by making a few subtle changes.

Put Your Like Button In A Prominent Position

As I browse around the web I often find sites that aren’t optimizing their like button placement. When designing a site, it’s important to be clear about what your objectives are. On our site, for example, obtaining fans, RSS readers, and newsletter subscribers are our primary goals. Additionally, driving traffic to our supporting sponsors is a priority.

Place Calls To Action Above The Fold

One of the first things that you want to keep in mind: Content which falls “above the fold” will generate a much greater response. On our site, we saw a more than 400 percent increase in email subscriptions and likes by moving our calls to action further up the page.

Top Of Articles

For sites with articles, placing your like button toward the top of articles will result in far more likes. It may sound obvious, but many sites miss out on this. No site emphasizes this more than the Huffington Post, which has the sharing calls to action before any content is displayed.

Pick The Right Like Button

There are many types of like buttons that you can use on your site. Depending on what the user is liking, you’ll want to implement a different button. You can find the standard like button code by visiting this page. In some cases, you won’t be able to implement the optimal button because of space restrictions. However, I’ve listed out the like button priorities that you’ll want to consider below.

Include Friend Photos

One thing to keep in mind, is that whenever you can, include friend photos in your like button implementation. While I’m not sure of the exact percentage increase in conversion, these images are a guaranteed way to get web users to take an action. More importantly, the faces pictured are of their friends. That means social proof will be working to your advantage.

Use the Like Box For Pages

If you are trying to get people to like your Facebook page, you can use the normal like button, but the like box plugin will have greater performance. There are a number of reasons to do this, but the most important aspect is that it makes what the user is liking completely transparent. While the standard like box is really large, you can make a relatively small version and place it toward the top of the page (as we have on the right hand side of this site).

Just head over to the like box page (found here) and uncheck all the checkboxes.

Further Down, Use A Larger Like Box
While a small like box tends to increase conversion dramatically, you can boost performance even more by adding an additional like box further down the page (below the fold).

We’ve done this on our site by including a larger like box below the ads. This means users who read through articles and end up at the comments will often see the like box and click the like button if they haven’t already.

Use Open Graph Tags

Probably the most important aspect of the like button is ensuring that the content published to the news feed when a user likes a page or article on your site looks good. This can have a dramatic impact on the number of users who share your content after finding it in the feed.

There are a number of critical open graph tags that you need to include in the meta data on your page, but these are the three most important:

  1. og:title – This tag will display the title within the news feed story when a user comes and likes your page.
  2. og:image – This will determine which image shows up within the feed story. If you don’t have the code for including an image on each page on your site, at a minimum select an image of your brand to show up next to each article.
  3. og:description – The description tag determines what text shows up next to each story in the news feed. For each article on our site, we write a short description that’s most likely to get people to click. Keep things short and sweet. In the example below, the Wall Street Journal drives results by asking a question: “Does this seem rational?” Experiment with various text.

Below is an image which illustrates how the three most important open graph tags get placed within an individual news feed story:

If you view the source code of any page on this site, you’ll see the open graph tags that we use. On this article, for example, we’ve used the following open graph tags in the header:

As you’ll notice there are a couple tags that we didn’t mention above. The og:type property describes the type of content that’s being liked. For most pages on our site this is an article. Previously this tag would have an impact on how content showed up in the feed, but Facebook has since adjusted things so that the three tags we previously mentioned are still the most important.

One thing that you will find however, is that entering this tag can have an impact on how much reach your content has. Facebook tends to prioritize articles over other types of content as it’s one of the most common types of content shared. The other tag that we didn’t mention was the og:site_name property. Ultimately this serves as more of a fall back when people are liking your page if your title doesn’t show up.

Conclusion

While you could simply go and grab the like button code from Facebook and drop it randomly into your site, taking the time to think about where to place the button can have a dramatic impact. Additionally, optimizing your open graph tags will also have a major impact on how much your content is shared around the social network.