Controlling Facebook user referral link content

comments

Social networking has taken the world by storm, and added a new tool to web developers’ marketing arsenal (along with Digg, Reddit etc), in the form of link sharing. The problem is that it is nearly impossible to have a say in most social network link sharing, along with how you are promoted. However in Facebook’s case we have a few tricks up our sleave.

Whenever a user enters or cuts & pastes a link to your site into their status feed, or any number of areas once logged into their account, the Facebook site will try and load an image, a title and description or the links destination all from the meta tags on your site, and if it can’t find them, the content. The meta tags that Facebook searched are all specified in the Facebook developer wiki and can be found here.

Example

FaceBookLinkInsertion

As your can see from the screen shot above, getting these tags in place can make for a much nicer link sharing experience, as well as giving you the opportunity to display something specifically for Facebook users.

How do i make it happen?

In order to get these nice link sharing attributes working for your users, you simply need to add some extra meta tags to your site. For the un-initiated among us, these are inserted between your <head></head> tags.

The elements that Facebook lets you define are:

  • Link Title
  • Description
  • Image URL to point to the image that will be shared
  • Audio (Optional)
  • Video/Flash (Optional)

Special attention must be paid to the image, as Facebook’s developer documentation states:

The thumbnail's width AND height must be at least 50 pixels, and cannot exceed 130x110 pixels. The ratio of both height divided by width and width divided by height (w / h, h / w) cannot exceed 3.0. For example, an image of 126x39 pixels will not be displayed, as the ratio of width divided by height is greater than 3.0 (126 / 39 = 3.23). Images will be resized proportionally.

Example Facebook tags:

<head>
<title>Ninja dude’s blog</title>
<meta name="title" content="Ninja dude’s blog" />
<meta name="description" 
    content="Ninja dude, known for nunchucks (nunchaku)" />
<link rel="image_src" href="http://ninjadude.com/facebook-pic.jpg" />
</head>

Example with flash video

<head>
<title>Ninja dude’s blog</title>
<meta name="title" content="Ninja dude’s blog" />
<meta name="description" 
    content="Ninja dude, known for nunchucks (nunchaku)" />
<link rel="image_src" href="http://ninjadude.com/facebook-pic.jpg" />
<link rel="video_src" href="http://ninjadude.com/facebook.swf"/>
<meta name="video_height" content="280" />
<meta name="video_width" content="420" />
<meta name="video_type" content="application/x-shockwave-flash" />
</head>

Things to think about

If you have a link you think may be extremely popular, you may want to post the image for the above link on a CDN, so that if you ever become incredibly popular over night, your websites bandwidth won’t be used by facebook users who may not even be coming to visit.

If you do decide to host the image on your website, and are not allowing referred images to be hotlinked (to stop people stealing your bandwidth with forum posts etc) you will need to remove the block for this image.