How to Add a Like Button on Facebook

In our previous post, Top Things to Do on Facebook, we began a miniseries on the top things you should be doing on Facebook, starting with adding a like button to your website.

In this post, we continue our miniseries on the top things you should be doing on Facebook, with a look at how to go about adding a Like button to your site.

Some rights reserved by ZK-NGJ

How to Add a Like Button

OK, assuming we haven’t frightened you off the Like button, here’s how to add one to your site.

First off, review Facebook’s Terms of Service (TOS) pertaining to the use of their social plug-ins. Here’s the relevant portion of the current TOS:

Special Provisions Applicable to Social Plugins

If you include our Social Plugins, such as the Share or Like buttons on your website, the following additional terms apply to you:

We give you permission to use Facebook’s Social Plugins so that users can post links or content from your website on Facebook.
You give us permission to use and allow others to use such links and content on Facebook.
You will not place a Social Plugin on any page containing content that would violate this Statement if posted on Facebook.

The third point refers to Facebook’s restrictions on nudity and other lewd content. We’re assuming you’re in no danger of running afoul of these policies.

With the introduction of Facebook’s Open Graph protocol, you can essentially turn your page into a Facebook page. According to Facebook:

The Open Graph Protocol enables you to integrate your Web pages into the social graph. It is currently designed for Web pages representing profiles of real-world things — things like movies, sports teams, celebrities, and restaurants. Including Open Graph tags on your Web page, makes your page equivalent to a Facebook Page. This means when a user clicks a Like button on your page, a connection is made between your page and the user. Your page will appear in the “Likes and Interests” section of the user’s profile, and you have the ability to publish updates to the user. Your page will show up in the same places that Facebook pages show up around the site (e.g. search), and you can target ads to people who like your content. The structured data you provide via the Open Graph Protocol defines how your page will be represented on Facebook.

You need to create the programming code you want to add to your pages, starting with meta tags. If this sentence just made you want to skip the whole thing, you’ll need to corral a techie to help you. We’ll help a bit by explaining what we just said.

Meta tags are bits of code that inserted into the HTML code of your page, generally at the beginning. There are lots of meta tags that are standard, and Facebook has created some that are specifically used to identify the content of your page to Facebook.

For example, here’s Facebook’s example of meta tags for the movie The Rock:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://ogp.me/ns#"
      xmlns:fb="https://www.facebook.com/2008/fbml">
  <head>
    <title>The Rock (1996)</title>
    <meta property="og:title" content="The Rock"/>
    <meta property="og:type" content="movie"/>
    <meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
    <meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
    <meta property="og:site_name" content="IMDb"/>
    <meta property="fb:admins" content="USER_ID"/>
    <meta property="og:description"
          content="A group of U.S. Marines, under command of
                   a renegade general, take over Alcatraz and
                   threaten San Francisco Bay with biological
                   weapons."/>
    ...
  </head>
  ...
</html>

Those lines that begin with “<meta property” help describe the movie to Facebook. The “og:” portion of the meta tag identifies is as a Facebook Open Graph tag. An explanation of Open Graph is beyond the scope of this post; suffice it to say it’s a way for any page to interact directly with Facebook.

You’ll need to read about adding meta tags to your page at the Facebook developer page at bit.ly/YdhNQY

Basically, any page you want the Like button on has to have the Open Graph meta tags. If you don’t know how to modify the code that produces your page, you’ll have to get a techie involved.

If we haven’t lost you yet, let’s take a look at adding the Like button using the two methods Facebook supports: XFBML and iframe.

XFBML is Facebook’s variant of the XML standard. It’s the more-sophisticated way to add the Like button to your site and is likely to be the method that will continue to be supported in future browsers.

An i-frame is like combining two Websites in one browser view. Your main Website appears just as it usually does, but the i-frame is like a window into another Website, showing you what that Website is displaying. In the olden days, you actually saw a dividing line that showed where one site began and the other ended. There are a variety of problems, some of them security-related, in using i-frames, so talk to your techies before proceeding.

Add a Facebook Like Button Using an I-frame

In general, using an i-frame is simple, and lots of sites do it. Here’s the code you add to the page to get the button to work:

<iframe src="Some Facebook URL" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:200px">

You substitute an URL you get from Facebook for “Some Facebook URL” and change the width and height parameters to specify in pixels how wide and tall you want the button, and you’re done. Facebook’s developer’s page has a configurator[1] to help you generate the code (see the following figure.) Press the Get Code button, copy it into the source of your Webpage and you’re done.

Figure 62 — Facebook Like Button Configurator and Resulting Code

The ease of adding the i-frame version of the Like button is a good reason why lots of sites prefer it. A quick look at using the JavaScript version will demonstrate why.

There are other social plug-ins such as the Like Box, so if you’re interested, and have access to a willing techie, you can take a look at the Facebook for Websites manual.[2]

Next up: Create a Facebook Page for Your Business

How to Add a Like Button on Facebook is the 126th in a series of excerpts from our book, Be a Person: the Social Operating Manual for Enterprises (itself part of a series for different audiences). We’re just past page 339. At this rate it’ll be a long time before we get through all 430 pages, but luckily, if you’re impatient, the book is available in paper form at bit.ly/OrderBeAPerson and you can save $5 using Coupon Code 6WXG8ABP2

Get our new book, The Infinite Pipeline: How to Master Social Media for Business-to-Business Sales Success online here. You can save $5 using Coupon Code 62YTRFCV

What Others Are Saying

“Infinite Pipeline offers practical advice for using social media to extend relationship selling online. It’s a great way to get crazy-busy prospects to pay attention.”
—Jill Konrath, author of SNAP Selling and Selling to Big Companies

“Sales is all about relationships and trust. Infinite Pipeline is the ‘how to’ guide for maximizing social networks to find and build relationships, and generate trust in our digital age.”
—Sam Richter, best-selling author, Take the Cold Out of Cold Calling (2012 Sales book of the year)

“Infinite Pipeline will be the authority on building lasting relationships through online social that result in bottom line business.”
—Lori Ruff, The LinkedIn Diva, Speaker/Author and CEO of Integrated Alliances

[1] Facebook develop’s configurator: bit.ly/bzw78P

[2] Facebook for Websites manual: bit.ly/b2uYU3