Nov
12
2010

 

Background

For an introduction to how to add a basic Facebook Like Button, head over to: http://www.permadi.com/blog/2010/10/adding-facebook-like-widget-button-to-your-web-pages/.  This tutorial build upon that tutorial and shows how you can customize the appearance of the post when someone clicks the Facebook Like button.

Introduction

In order to control the appearance of the post that appears when someone click your Facebook Like Button, you should use Facebook Open Graph protocol meta-tags which lets Facebook knows some informations about your site, such as the description, image to use, etc. You can read the Open Graph Meta Tags section in the following link to read more about it, otherwise just follow along the step by steps I described.

Adding Facebook Open Graph Schema Into The Header

http://developers.facebook.com/docs/reference/plugins/like
and http://developers.facebook.com/docs/opengraph.

To begin with, add the following into the <html> tag in to the page:

[c]
xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml"
[/c]

Like so:

[c]
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml">
[/c]

Adding Facebook Open Graph Meta Tags Into The Header

Then we need to add some meta-tags that describes your page. Below are the required ones:

og:tag Description
og:title The title of the post.
og:type What is the type of your post content. Examples are “book”, “food”, “drink”, “website”, “game”, “product”.  The complete list is at http://developers.facebook.com/docs/opengraph#types. Note: if you use an invalid type, it will simply not show up in the post.
og:image This is the URL of an image that you want to appear with the post. The minimum image dimensions is 50×50 pixels. The maximum image dimensions is 100×100 pixels.  You can link to a larger image, but it will be scaled to 100×100 pixels. You should use standard web supported images, such as png, gif or jpg. You should put the full URL here since Facebook need to grab the image.
og:url The URL that will appear as a link on the title. I.e.: when someone clicks on your wall post title, the link will open.
og:site_name The site name.
fb:admins The Facebook id of the administrators of the page (separate with a comma fore multiple ids). Note that this is not the Facebook user name but the numeric ID associated with the user name. If you don’t know your Facebook numeric id, then do this to get it:

  • Login to your Facebook account.
  • Click on Accountmenu on the top right.
  • Click/select your name.
  • Copy the URL that appears in the browser. It will be something like: http://www.facebook.com/profile.php?id=100001729250263.
  • The number after the = sign is your numeric id, ie: 100001729250263 in my example.

Note: You must specify either the fb:admins or fb:app_id tag, but you don’t need to specify both.

fb:app_id If you have registered as a developer and created an application for your site, you can enter it here.Note: You must specify either the fb:admins or fb:app_id, but no need to specify both.
og:description A description that you want to appear with the post.

The meta tags should go into the <head> section of your html page in the following format:

[c]
<meta property="og:tag name" content="tag value"/>
[/c]

For example:

[c]
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>

<meta property="og:title" content="My Example Facebook Open Graph Page"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://www.permadi.com/facebook-like-example.html"/>
<meta property="og:image" content="http://www.permadi.com/myLogo.png"/>
<meta property="og:site_name" content="permadi website"/>
<meta property="fb:admins" content="100001729250263"/>
<meta property="og:description" content="This is an example Open Graph description."/>

</head>
[/c]

If you are using CMS such as WordPress or Drupal, you can automate the process of creating the meta-tags for you so that each page will have their own unique url, title, description, and image.

Adding The Facebook Like Button

Last step is to add the actual Like Button as described here: http://www.permadi.com/blog/2010/10/adding-facebook-like-widget-button-to-your-web-pages/ or head over to http://developers.facebook.com/docs/reference/plugins/like to get the code.

[c]
<iframe src="http://www.facebook.com/plugins/like.php?href=
www.permadi.com%2F%2Ftutorial%2Ffacebook-with-open-graph.html
&amp;layout=standard&amp;show_faces=true
&amp;width=450&amp;action=like&amp;colorscheme=light
&amp;height=80" scrolling="no" frameborder="0"
style="border:none; overflow:hidden; width:450px; height:80px;"
allowTransparency="true"></iframe>
[/c]

How Do These Tags Affects What Users See?

By the end of this tutorial, this is how the post will look like when someone clicks the Like button on your page:

And this is how it will appear in the Likes and Interest section of your Profile:

In addition, an app-page will be created by Facebook (roll over and click the link to open the page):


You can go to the link below to see the example app-page:
http://www.facebook.com/pages/My-Example-Facebook-Open-Graph-Page/128184600573187

Another benefit of using the Open Graph is that when someone adds your URL into their Facebook Wall, they will see the same nicely formatted info, like this:

Example

You can open the bare-bone example page here (obviously you’ll need to replace the meta tags if you are using it as a template):
http://www.permadi.com/tutorial/facebook-like-button-example/sample-facebook-like-button-with-open-graph.html

2 Responses to “Adding Advanced Features To Facebook Like Button”

  1. [...] permadi.com » Adding Advanced Features To Facebook Like Button [...]

  2. [...]   As you can see, it's very simple to add a Like button to your page.  However, this could be a tedious task if you have many pages.  In the next tutorial, I will show more options (such as how to associate image with the news-feed). Read on: http://www.permadi.com/blog/2010/11/adding-advanced-features-to-facebook-like-button/ [...]

Leave a Reply

*