How to clear Facebook Share’s Cache

Facebook share is good, simple, lets us share almost everything on web in seconds. But Facebook caches already shared urls/pages for better performance. This causes issues at time when we update the title, picture being shared or the description of the page because Facebook still shows the older version of the page.

For modifying which image, title and description FB chooses, read this

I will discuss three simple ways to force facebook to go and fetch the latest stuff from the page being shared.

Method 1 :

Facebook treats each url as unique and caches the page based on that url, so if you want to share the latest url the simplest solution is to add a query string with the url being shared. In simple words just add ?v=1 at the end of the url. Any number can be used in place of 1,

This method is fairly simple but it doesn’t retain the share count for this page, as it treats this page as a different url hence the count for this url will be restarted from 0. Plus if someone else shares the original url without the querystring the information will still be the old one.

Method 2:

Using url shortner services like bit.ly. shorten your url form bit.ly and then use the new url for Facebook share. This too is a simple and quite popular method but has the same issues as the first one.

Method 3:

Facebook has a tool called Debugger (formerly known as URL Linter). This tool gives us an idea about how a url will be shared on Facebook, what content, which image will be fetched. Further details about this tool can be found here.

We can use this tool for any url and it fetches the latest title, description, excerpt and other stuff that will be shown while sharing the link. If you use an already shared URL with this tool then Facebook fetches the latest content, and also updates it cache with the latest content.

With this methos the url remains the same hence the share count will persist and the content will be updated. Someone else sharing the url will also see the latest content now. So this method is of course the best.

The Debugger tool can be accessed here.

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




How will a page show up on Facebook Share. URL Linter

Facebook share is widely used these days to share web pages people like, on their profile. The sharing mechanism is quite simple, fetches the related image and excerpt from the url being shared to ensure that the person seeing the post gets an idea of what the shared page is about. A webdesigner has control over how the webpage will look when shared on facebook. How to control what image and text shows up when your page is shared is explained here.

This post is focused on how to test exactly what your page will look like, even the minor details. Facebook has a very simple tool for this called URL Linter.

Just paste the URL of the page to be tested and facebook will fetch the title, description/excerpt, image, the link shown with the post, and any other meta properties on the page. This is extremely helpful for any page which is expected to be shared alot on fb, so that it can be tested before making it public. Another advantage of using this url linter is that once you make changes to your page and try the linter it will go for the latest version and not show the cached copy while normal facebook share will show a cached copy for a url that has been shared previously.

I hope this post gives you an edge while using Facebook share.

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




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