Facebook notes

Notes about some things I’ve come across with Facebook that are relevant for web developers.

Link preview / News Feed story

When you add a link to Facebook it detects various details of your page for its link preview. For example it will automatically grab the first image on the page to use as the thumbnail, it grabs the first chunk of text to use as description, etc.

You can customise these things by adding Open Graph tags to your page:

<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>

Caching

If you find information caching, for example you change the image but Facebook still uses the old ones, then it’s probably been linked before and Facebook is caching what it found last time.

You can clear the cache by first loading the URL in Facebook’s Debugger.

References

Last modified: 13/11/2012 Tags:

This website is a personal resource. Nothing here is guaranteed correct or complete, so use at your own risk and try not to delete the Internet. -Stephan

Site Info

Privacy policy

Go to top