Adding a Facebook Like button to your website is easy. Facebook has a handy form that you fill out which gives you a block of code to copy and paste, and you’re done! If that’s too much, there’s plenty of third party plugins that make adding a Like button to your websites as easy as clicking “Install”. This simple process is a big part of why Facebook’s Like initiative has become so successful in the past few years. The Like button is functional right out of the box with little-to-no customization, but that doesn’t mean it’s effective. Too many companies think that adding a Like button is good enough, without bothering to optimize them properly.
When a user clicks “Like” a few things happen. Right off the bat, it connects the user to the website in Facebook’s open graph. It also posts a story to the newsfeed and appears on the user’s timeline. These things happen regardless of whether you’ve optimized your Like buttons or not. Facebook will take a look at the page in question and get the title, url, image and description. Sounds great, right? Less work for you! Not quite, sadly. Facebook has no way of deciding which image on the page best represents your brand, which is why many people will end up with random icons or other irrelevant images along side their newsfeed stories. It’s also possible that it won’t retrieve other data properly, such as the canonical URL.
Luckily you can use a set of meta tags placed in the <head> section of your website, called “open graph meta tags”, to tell Facebook everything it needs to know. Facebook has a small form on their Like Button plugin page that guides you through generating these tags, but it doesn’t do a great job of letting you know just what these tags do and why you need them. Each of the meta tags Facebook gives you has a property to identify what it is. Let’s break it down!
This is the title of the page being liked, and will be the text the user clicks to get to your site. If you don’t specify it, Facebook will grab your title tag. Your title should just be the basics of what’s being shared with no branding information.
A category for your page. Is it a website or blog? A band? An athlete or author? This doesn’t have much affect on the newsfeed story itself, but it does define where it appears on the user’s timeline. Each user has a section for their Likes which is split into categories. The type that you specify here determines what category your site fits into.
For example, if you have a website for your band you would want to specify a type of “band” or “musician” so that the Like shows up underneath the user’s “Music” category, instead of getting lost among all the other uncategorized Likes which have much lower visibility. Facebook also states that the type you set will affect how often your content appears in newsfeeds. This likely has to do with their newsfeed algorithm, which strives to show users only content which is relevant to them.
The canonical url that the like button should point to. The Like button automatically grabs the URL of the current page, but you can override it with this tag. The og:title links to this URL.
This is an important one. Facebook is a bad judge of images, it could pull anything off your page to use for news feed stories. Choose an image that you want to represent your page and put the URL here. It’s what will appear as the thumbnail next to your news feed story, and is a big factor in how much news feed real estate you get.
Recent changes to Facebook’s newsfeed have made it so that Facebook prefers a minimum of 200px by 200px for these images, though they can go up to 1500px by 1500px, which Facebook will resize and crop appropriately. The average size of images in Facebook’s improved newsfeed layout are 600px by 600px, and they (and I!) encourage you to take advantage of it.
Note: Facebook terms say that you can only have 20% of your image be text, so be wary of this when creating these images.
Facebook defines this as the “human-readable name for your website”. If this is specified, it will appear underneath the linked og:title and point back to your site’s domain.
This one isn’t included in Facebook’s quick form, which is disappointing, so you’ll have to add it yourself to the code block. By default, for the few sentences of description to go underneath the title and alongside the image thumbnail, Facebook will use your meta description. If you want to customize it, you can put a description here instead. Use the space that Facebook is giving you here! A couple word description means less visibility. For a properly optimized Like, your description should be at least two sentences long.
This facebook specific open graph tag connects user(s) to your Like button. Many people skip this, or just leave it set at the default value in Facebook’s form, but this step is essential if you want to see statistics for your Like button. Insights, Facebook’s internal analytics service, is available for all manner of Facebook objects, including Like buttons. The user(s) whose ids are stated in this meta tag will be those who can see this Insights data. Multiple users can be connected by entering them as a comma separated list.
This tag is used for connecting your Like button(s) to a Facebook Platform application. This is especially handy if you have a large amount of Like buttons and want to be able to reach out to all of the users who have liked anything on your website. Basically, if you want access to your Insights data and connected users for multiple Like buttons programatically, you create a Facebook application and put the Facebook ID for it in this tag.
Note: Not sure what your Facebook id is? User ids have been old news since Facebook switched to friendlier looking usernames for user profiles and pages. If you need to get your user id, check out our Facebook ID Lookup Finder Search Tool! Enter in either the username or the full URL for your Facebook profile or page, and it will give you the numerical user id that you need for the two meta tags above.
After you’ve added the above tags into the <head> section of your website, there’s one more step you need to take in order to see the Insights information for your Like buttons. Navigate to http://www.facebook.com/insights/ and click on the green “Insights for your Website” button in the upper right hand corner. Enter your domain and then click “Get Insights”. If you have added the proper fb:admins tags, and the user id you entered is the same as the user you are logged in as, then it should properly identify your website and you’ll see Insights data in no time!
Note: If you added multiple ids into the fb:admins tag, each of those people must click “Like” on your domain to verify that they want to be an admin. They will not see Insights data until they do this.
That’s it! By this point you should have properly optimized Like buttons. Users will see larger images which represent your brand, and an informative title and description, leading to higher visibility and increased reach in newsfeeds. Plus you’ll be able to properly measure your social efforts using Facebook’s Insights analytics service. If you want to customize your social plugins further, you can add additional optional meta tags, which let you specify industry specific data, contact information and even versions of your website in other languages! Check out Facebook’s Open Graph Protocol documentation as well as the official Open Graph Protocol page for more options.