Modify how the shared item appears on Facebook

Thousands of websites are shared in facebook each day. Whenever you share a URL on facebook, it generates a feed against that url. The feed has a title, an excerpt or description and an image.

You can enhance how the shared item appears on Facebook by configuring how it gets previewed on a user’s profile and when a user tries to share it.You do this with <meta> tags. If there are no meta tags specified then Facebook share will take the site title, starting content of the site as excerpt and usually the first image shown.

In order to customize how your site looks while being shared on facebook you need to add meta tags in the <head> of your page.

For the title of shared link :

<meta name="title" content="title to be shown" />

For the Description/Excerpt :

<meta name="description" content="excerpt to be shown" />

For Thumbnail Image :

<link rel="image_src" href="absolute path to the image" />

The thumbnail’s width AND height must be at least 50 pixels, and cannot exceed 130×110 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 126×39 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.
-Facebook

EDIT:  May 15, ’11:

I have just noticed that FB is starting to end the support of these basic tags which I have explained above, I will still prefer using them as many other websites use these tags to get the specified data, but you should also use the new Open Graph tags by Facebook which I am quoting from Facebook’s documentation which is quite clear so I think I don’t have to add my own explanation:

Open Graph Tags:

Open Graph tags are <meta> tags that you add to the <head> of your website to describe the entity your page represents, whether it is a band, restaurant, blog, or something else.

An Open Graph tag looks like this:

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

If you use Open Graph tags, the following are required:

  • og:title – The title of the entity.
  • og:type – The type of entity. You must select a type from the list of Open Graph types.
  • og:image – The URL to an image that represents the entity. Images must be at least 50 pixels by 50 pixels. Square images work best, but you are allowed to use images up to three times as wide as they are tall.
  • og:url – The canonical, permanent URL of the page representing the entity. When you use Open Graph tags, the Like button posts a link to the og:url instead of the URL in the Like button code.
  • og:site_name – A human-readable name for your site, e.g., “Kaizen”.

Facebook also has a sixth tag on their documentation but I dont think it will really be necessary for most of the sites.

Source: http://developers.facebook.com/docs/reference/plugins/like/

Found this post helpful? Want to return the favor? Use the button below :)




Published by Umair Jabbar

Umair Jabbar is an enthusiast, a Software Engineer / Web Developer who wants web to be simpler for everyone.

Join the Conversation

38 Comments

  1. I dont understand why some of my blog posts will display an image when linked on FB but others will not, this is extremely frustrating and confusing, i have done nothing differently on the new posts as compared to the older posts when the image displayed properly, It is very important that my description and image show when shared on FB and its not working HELP PLEASE, email me at yourguymatt@gmail.com

  2. Now working per your instructions above, I inserted this code in a custom html module that appears on all pages: /. However, FB doesn’t pick up other thumbnail images that may be on a page.

    1. When you have told Facebook to pick the image that you have provided in your head section then Facebook doesn’t look for any further images on the page

  3. could you please help me? I am running a blog where each post has it’s own fb like button. Whenever someone “likes” a certain post, I want the picture of the post to be displayed on their profile. The problem with this is that this picture is obviously different for every post. Any suggestions?

        1. Hi Jack, sorry I have been busy with some stuff. I will write down a plugin for you to do that this weekend most probably.

    1. @32a380c091cea1b7e7b0363bb22e1a94:disqus Try un listing your profile from search results. in you privacy settings there is a setting where you can let FB not show your profile in search listings.

  4. Hi, i’ve loaded title, keyword & description within my meta-data and it has been working fine when i share or like the page on FB so far. However, now that the content of the page changes, i need to display new title and description. I’ve updated that on the page, but FB is still displaying the old cache. I need to addon to the like count, thus can’t use adding of ”
    ?v=1″
    at the end of the url. What else can i do to get the soonest result?

    1. @maurice: Hi, I just shared your url on my FB and it shows the info on your page in the said tags
      please find the attached screenshot

      I will also be updating this post tomorrow for the latest technique

  5. do you know how to prevent a specific image on my wordpress blog from showing up on the facebook newsfeed when someone likes a post? There is currently a particular image on my website that it always uses to display in facebook, even though the image isn’t a tag in my . All I want to do is prevent facebook from using that picture without needing to add any tags in my . Any ideas?

  6. Hello, I’ve tried several plugins for my Tumblr, but it never takes the posts’ description, always the one of the whole site, and I have no clue how to fix it.
    I’d also prefer for it to select a relevant picture (the one in the post).. I’d be very happy if you could help me a little cause I’ve been googling for ages and just have no clue what to do about it.

      1. I’m facing the exact same problem – did you manage to find a solution to the above? thanks in advance.

  7. Dear Umair, I manage a FB acount where I link some standard web pages. In this pages, appers some pics and I chose one of them for show this link in FB. Every time different one.

    The think is; then I change this pics in my standard web pages, FB still showing the old pics.

    I tryed all process availables on net, like ?v=1 and so. Nothing runs. FB cache still there…

    Only if I link the specific pic url, shows the correct one, but then, the link is not for the page, it’s only for the pic.

    Please, could you suggest som idea for clean or renew FB cache?

    Ex: one of my pages http://www.ametllaweb.com/Botiga/Irene.html

    Thanks a lot in advance

  8. Dear Umair, you are right. It runs. But only if you link your url without http://www

    We must see what happens on next time… When I renew again my pics…

    By the moment, it runs Ok

    Thanks, man

  9. Really a nice post, who can think about this at-least i am not, You are genius man, Good Post….Keep Posting This kind of unique things…

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.