The Like Button Style Guide: How to Pick the Design That's Right for Your Website

The following is an excerpt from the Facebook Marketing Bible, the comprehensive guide to marketing your company, app, brand, or website using Facebook. The full version of this article, available through a Facebook Marketing Bible subscription, includes a guide to choosing whether to use the verb "Like" or "Recommend" in your button, what button color scheme will match best with your site, advantages and disadvantages of showing users the faces of friends who've clicked a Like button, and exactly what signals are summed to determine the Like count that a button displays. This is the first installment in a three part series detailing how to use the Like button. Subsequent installments will cover how to choose the Open Graph meta tags that will give your Like buttons the ability to publish news feed stories to users, and strategies for implementing Like buttons on a variety of sites ranging from news publishers to brand websites to social games. The Like button is an embeddable plugin for third-party websites and Facebook apps. When clicked by a Facebook user, it publishes the piece of content the button is attached to to the user's wall and the news feeds of their friends. In many cases it also causes the Liked object to appear in the user's profile and allows the owner of the button to publish news feed updates to the user in the future. Facebook offers several different implementations of its Like button social plugin. Here we'll discuss the advantages and disadvantages of different stylistic options, and provide a guide for choosing the Like button implementation that will drive the most clicks and thereby generate the most referral traffic for your website. Like Button Creation and Implementation Steps To create and install a Like Button: Visit the Like button documentation page Input the URL of the website page or piece of content you want the Like button to represent Use the configurator in Step 1 to choose style options for your Like button Click the "Get Code" button Copy the iframe or XFMBL code Paste the code into your website's code Return to the Like button documentation page Use the configurator in Step 2 to select Open Graph tags in order to describe the website page or piece of content your Like button represents Click the "Get Tags" button Copy the tag codes Paste the tag codes into the of your website Like Button Options URL to Like: Use the URL of the entity you want the Like button to represent. You can embed the button on multiple website pages, such a both a ecommerce product page and a directory of products. However, his URL should the one dedicated to what the button represents, such as the product page. Layout Style: This determines the size and amount of social context that appears next to the button. There are three options Standard - displays social text to the right of the button and the profile pictures of friends below of applicable. Minimum width: 225 pixels. Default width: 450 pixels. Height: 35 pixels (without photos) or 80 pixels (with photos). The widest, and all around largest Like button, and the only one that can display the names and faces of a user's friends who have already clicked. Best for sites with ample empty space, or which dynamically resize, such as blogs. Its large size makes it especially noticeable, and the faces of friends creates a compelling personal social recommendation to click. For most sites that have space for this button, this is the best layout option. button_count - displays the total number of likes to the right of the button. Minimum width: 90 pixels. Default width: 90 pixels. Height: 20 pixels. The shortest and all round smallest Like button. Best for sites displaying large quantities of Like buttons on a single page, or that are trying to integrate the button into a short header of a news article. With no protruding elements, it is the most elegant Like button, and is therefore the best choice for those trying to minimize Facebook's presence or impact on their site's design. box_count - Displays the total number of likes above the button. Minimum width: 55 pixels. Default width: 55 pixels. Height: 65 pixels. The narrowest Like button. Best for sites displaying multiple social media sharing buttons side by side. It depicts the total Like count more prominently than other layouts, and is therefore good for sites that receive a lot of LIkes. It is also good for niche sites as it provides the most compelling social recommendation that doesn't require a user's friends to have clicked, as the Likes of non-friends are displayed prominently in the count. Access the full Like button style guide including tips for choosing between Like and Recommend terminology, pros and cons of showing the faces of friends who've clicked the button, and more marketing best practices at the Facebook Marketing Bible, Inside Network’s industry leading resource for marketing and advertising on Facebook.

Social Pro Daily

The Like Button Style Guide: How to Pick the Design That's Right for Your Website

Josh Constine

About

Subscriptions

Events

Publications

WORK SMARTER - LEARN, GROW AND BE INSPIRED.

Subscribe today!

Josh Constine