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

Facebook Marketing Bible

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:

  1. Visit the Like button documentation page
  2. Input the URL of the website page or piece of content you want the Like button to represent
  3. Use the configurator in Step 1 to choose style options for your Like button
  4. Click the “Get Code” button
  5. Copy the iframe or XFMBL code
  6. Paste the code into your website’s code
  7. Return to the Like button documentation page
  8. 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
  9. Click the “Get Tags” button
  10. Copy the tag codes
  11. Paste the tag codes into the <head> 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.

    Tumblr Marketing

    Mediabistro Course

    Tumblr Marketing

    Starting December 1, learn how to market using the most popular visual blog! In this course, you’ll learn how to develop a strategy for your own Tumblr account, get people to read and share your content, and integrate your marketing efforts with other social platforms. Register now!

     

    Leave a Reply

    Get the latest news in your inbox
    interested in advertising with inside facebook?

    Social Media Jobs
    of the Day

    Social Media and Online Assistant

    Education Management
    Chester, PA

    Web Content Creator

    John Paul Mitchell Systems
    Los Angeles, CA

    Social Media Specialist

    Penske Media Corp.
    Los Angeles, CA

    Director of Marketing

    Broadway Across America
    Baltimore, MD

    Featured Company

    Join leading companies like this one and recruit from the nation's top media job seekers on the Mediabistro Job Board. Every job post comes with our satisfaction guarantee. Learn More
     

    Our Sponsors

    Mediabistro A division of Prometheus Global Media home | site map | advertising/sponsorships | careers | contact us | help courses | browse jobs | freelancers | content | member benefits | reprints & permissions terms of use | privacy policy Copyright © 2014 Mediabistro Inc. call (212) 389-2000 or email us