Adding a Like Button

by Peter S. Conrad on Tuesday, June 29, 2010 at 10:36am ·

When you add a Like button to your Web site, it lets visitors create a relationship with your page (by liking it), lets you publish stories to people who like your page, and also gives you a way to increase and analyze traffic and engagement with your content. In this tutorial, you'll add two components to your existing Web page:

  • Like button, a Social Plugin that lets people create arelationship to your page (by liking it)
  • Meta tags based on the Open Graph Protocol, a way of describingwhat your Web page represents

The Like button and the Open Graph protocol work together to add your Web page to the social graph, which represents connections between people, their friends, and thethings they like. The Like button uses the Open Graph tags to add your page to the social graph so that people can connect to it. You can then manage your page from your Facebook account to publish News Feed stories or see analytics, statistics about traffic and engagement with your page.

 

Getting Started

You'll need a few things to get started:

  • A Web page (and a place to host it)
  • Basic knowledge of HTML
  • A Facebook account

When you are ready, open the Web page in your favorite HTML editor.

 

Adding a Like Button

The easiest way to add a Like button to your Web page is to copy and paste code. In a browser, go to the Like Button documentation. There are a number of fields for configuring the look and behavior of the Like button; for now, just type the full URL of your Web page into the URL to Like field, then click Get Code.There are two types of code presented: iframe and XFBML. XFBML looks simpler, but actually requires a bit more setup; for this tutorial, use the iframe code. Copy the entire code block and paste it into the source code of your Web page in your HTML editor, in the location where you want the Like button to appear.When someone clicks the Like button, Facebook will post a message visible to that person's friends with a link back to your page: Your Friend likes www.example.com.Don't publish the page yet—there is one more step to unleashing the power of the Like button: adding meta tags based on the Open Graph protocol.

 

Adding Open Graph Tags

Open Graph tags describe the entity your page represents, whether it is a band, restaurant, blog, or something else. When someone clicks the Like button on your page, it creates a relationship between that person and the entity your page is about. There is a large assortment of Open Graph tags available, to provide descriptive information on your site. If you use Open Graph tags, the following six are required:

  • og:title - The title of the entity.
  • og:type - The type of entity. You must select a type from the list of Open Graphtypes.
  • og:image - The URL to an image that represents the entity. Images must be atleast 50 pixels by 50 pixels. Square images work best, but you areallowed to use images up to three times as wide as they are tall.
  • og:url - The permanant URL of the page representing the entity. When you useOpen Graph tags, the Like button posts a link to the og:url instead of the URL in the Like button code. If your site has several pages, the og:url should point to the specific page containing the Like button.
  • og:site_name - The name of the site.
  • fb:admins - A list of the Facebook IDs of page administrators, separated bycommas. If you do not want anyone else to be able to administer thepage, include only your own Facebook ID.

An Open Graph tag looks like this:

<meta property="og:&lt;/em&gt;tag name&lt;em&gt;" content="&lt;/em&gt;Tag value&lt;em&gt;"></meta>

 

If your page is about your hotel "The Dew Drop Inn," your Open Graph tags might look like this:

<meta property="og:title: content=" welcome="" to="" the="" dew="" drop="" inn=""></meta>
<meta property="og:type" content=hotel></meta>
<meta property="og:image" content="http://www.example.com/dewdrop.jpg"></meta>
<meta property="og:url" content="http://www.example.com/welcome.html"></meta>
<meta property="og:site_name" content="Dew Drop Inn Online"></meta><meta property="fb:admins" content=636217585></meta>

 

Copy and paste the above tags into the of your Web page, then change the values of the content parameters to describe your page. Once you are satisfied with the content of the tags, publish the page to the Web. You can use the Facebook URL Linter to make sure your page is represented correctly on Facebook, and to make sure that the tags are correct.

 

Now, try clicking the Like button on your Web page. Shortly, a message will appear on your Facebook Wall, indicating that you like the page:

 

You like Welcome to the Dew Drop Inn on Dew Drop Inn Online.

 

If your website is a blog or other site that publishes articles, use the og:type "website" for the main page and the og:type "article" for each article. This lets people create a connection to your site as a whole, and also like individual articles without creating a permanent connection to each one.

 

Page Administration

Now that your Web page is part of the social graph, you can administer it as a Facebook page. There are two ways to get to the page administration screen:

  • From your Web page, click Admin Page next to the Like button.
  • From Facebook, click Manage Pages under the Account tab, then click Go To Page next to your page name.

Click See All next to Insights to get more information about traffic to your page. You can publish stories to your users the same way you write a Facebook post from your own wall: by typing in the Publisher, the field at the top of the screen that says "What's on your mind?" The stories appear in the News Feed of anyone who has clicked the Like button on your Web site.

 

More Information

For more information, see the following pages:

Share