Facebook like button imageFacebook like button image technology is the result of years of work, and it usually looks great. However, Facebook image selecting algorithms are not always perfect. Often website owners want a specific image, which is most relevant to the content of the website, to be displayed with their Like button. Luckily for those users, Facebook now has a way to choose your own custom Facebook like button image. It can be used for any page. Even pages that don’t have their own Like buttons can use this technology. The same technology will help you in case you want to customize other things, like title and description.

The key to changing Facebook functionality is the OG meta tag. Like any other tag, it should be placed between the head tags in any HTML page. Here is what these OG tags should look like:

< meta property = “og:[attribute]” content = “[content]” />

This is the code you need to use for images:

< meta property = “og:image” content = “[IMG URL]” />

Remember that in order for the image to be displayed correctly, the URL of the image should be full. So avoid using relative image URLs. Below you’ll see a correct URL:

< meta property = “og:image” content = “http://www.thewebsite.com/imgs/bluebunny.jpg” />

This one is incorrect:

< meta property = “og:image” content = “/imgs/bluebunny.jpg” />

As we’ve already noted, in addition to the og:image meta tag, Facebook has introduced several other options for tags that allow you to alter the content of your widgets. Here is the list of the most useful and important ones:

  • og:site_name is used to indicate the name of the website the page is taken from. It might seem like this tag is the same as the title of the page, but, in fact, the tag is used instead of the website name.
  • fb:admins has to contain the user ID of the Facebook user that is the administrator of the page.
  • og:title tag is used for indicating the title of the actual page. It is very similar to the title tag, but at the same time it allows more flexibility. Using og:site_name and og:title tags together gives you more opportunities to customize your widget.
  • og:description is perfect for keeping a short description of the website and its contents. If you don’t use this tag, the info is taken from the page itself. Usually it’s the first paragraph of the article, which sometimes can be not relevant to the content of the website at all. We advise to keep the description of your website short: descriptions under 150 characters work best.
  • og:url is a great tag to use with URL shorteners, like bit.ly. It provides the actual URL of the page, so that users see the full URL at any time.