how to add a preview image to facebook share

Posted by: Wenbo in: ● September 23, 2010

In: Technical
Comentar!

Updated Dec, 2010

According to the official post from facebook, http://developers.facebook.com/docs/opengraph/, the Open Graph Protocol enables you to integrate your Web pages into the social graph.

Open graph has four required properties:

og:title – The title of your object as it should appear within the graph, e.g., “The Rock”.

og:type – The type of your object, e.g., “movie”. See the complete list of supported types.

og:image – An image URL which should represent your object within the graph. The image must be at least 50px by 50px and have a maximum aspect ratio of 3:1. We support PNG, JPEG and GIF formats. You may include multiple og:image tags to associate multiple images with your page.

og:url – The canonical URL of your object that will be used as its permanent ID in the graph, e.g., http://www.imdb.com/title/tt0117500/.

It also has several optional properties

og:site_name – A human-readable name for your site, e.g., “IMDb”.

fb:admins or fb:app_id – A comma-separated list of either Facebook user IDs or a Facebook Platform application ID that administers this page. It is valid to include both fb:admins and fb:app_id on your page.

og:description – A one to two sentence description of your page.

A sample:
    <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."/>

Deprecated

Short answer: edit the “title”, “description” and “image_src” tags in the head tag. <html> <head> <meta name=”title” content=”A title for you” /> <meta name=”description” content=”Some description text for you” /> <link rel=”image_src” href=”http://wenbowang.com/wp-content/uploads/2010/03/recipe-300×142.png” /> </head> <body> <p>Your html page</p> </body> </html>

The title and description is pretty standard; a good web designer should always include these two meta tags. One thing to keep in mind is: facebook will only show the first 100 characters of your title. So, don’t make it too long.

For the “image_src”, facebook will use it as preview image. What’s great here is that facebook automatically scales for you. Hassal free!

If you want a sample preview, here it is:

Add a preview to facebook share

No related posts.

Wenbo Wang

how to add a preview image to facebook share

2 Comments to "how to add a preview image to facebook share"

Write Comment

Search

Category

Archives