facebook
Controlling The Appearance Of Your Link On Facebook Users Wall
November 13, 2010
0

This tutorial explains how to spice-up the appearance of your URL when someone post it on their Facebook Wall, using the Open Graph Facebook meta-tags.

To illustrate how an user may add a Link to their Facebook wall, go to the Profile menu on Facebook, select the Wall tab, then click the Link Icon (shown below):

Let’s say I am adding a link to my website: https://www.permadi.com.  Assume that I have not implemented the so-called Open Graph meta tags into my page, here’s what the post will look like:

Frankly, this looks terrible!

However, this is because I do not have a lot of text on the front page, so Facebook tries its best to grab text from irrelevant place.  Depending on your site, the result might look okay or it might not but we should not rely on chances.

The good news is that Facebook makes it easy for you ton control how your page appears by using the Open Graph meta-tags.

This is how it looks like after I added the meta-tags:
Notice the addition of a logo and description? They are controlled by the Facebook Open Graph Meta Tags and the process is explained below.

Adding Facebook Open Graph Schema Into The Header

To begin with we need to add the Facebook schema into the html tag. This is simply adding the following into the <html> tag on your page:

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

Like so:

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

The next step is to define the Meta Tags.

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:

Tag Note
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 fb:admins or fb:app_id, 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 fb:admins or fb:app_id, but no need to specify both.
og:description A description that you want to appear with the post.

You can read more at http://developers.facebook.com/docs/reference/plugins/like
and http://developers.facebook.com/docs/opengraph.

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

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

For example:

<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="Permadi.com"/>
    <meta property="og:type" content="website"/>
    <meta property="og:url" content="https://www.permadi.com/"/>
    <meta property="og:image" content="https://www.permadi.com/logo.png"/>
    <meta property="og:site_name" content="permadi website"/>
    <meta property="fb:admins" content="100001729250263"/>
    <meta property="og:description" content="Games, web development, and programming."/>
...
</head>

Note: It may take a while after you put up the Open Graph before the update is picked up by Facebook (it seems that once an URL is added to Facebook, it is cached for a period of time). If you need to test how your new link looks immediately, add a random query string, for example if to test how my site looks now, I can force refresh it by entering https://www.permadi.com?q=12345 where 12345 is a random number of your choice.

You can also add a Facebook Like Button into your page as described in https://www.permadi.com/blog/2010/10/adding-facebook-like-widget-button-to-your-web-pages/.