Web page’s best image for thumbnail with facebook share links

You can easily tell facebook the choice of image that should be shared while someone shared your link with facebook share button.

I have been experiencing this issue for a while now and glad to have found a solution :).

It is like whenever we share a web page’s URL on Facebook, it suggests some thumbnail images to be associated with the URL we have specified.

Whenever I was sharing a URL, it used to suggest me images from what Facebook had cached earlier from my website. This is probably because its system was not able to identify the best image on my page which i would like it to show up with the link. Hence, I always used some unrelated thumbnail picture.

But there is a solution to make Facebook know about the best image you would like to be associated with the specific URL.

facebook like button thumbnail image For URL

You can specify a META tag on your web page and specify the FULL path of the best image for that particular page. Doing this, Facebook will always know about the image you want to show as thumbnail with the URL.

Important points:

  • Facebook uses meta tag og:image – The URL of the best picture for this page. The image must be at least 50px by 50px and have a maximum aspect ratio of 3:1.
  • For e.g. If i want to have the image of a rock to be specified as best image for my home page of http://104.196.159.131, then I would write meta tag as:
    facebook like button thumbnail image URL

    Note that your site’s image path might be different and you should use the one you have.

If you know the path of the image at design time itself, you can obviously use the above meta tag sample code and write it within your web page’s HEAD tag and your job will be done.

But just in case, you want to do it at runtime, Here is a C# code to add meta tag at runtime with the Image URL:
//You would need to include the following library for this code:
using System.Web.UI.HtmlControls;

//Add meta tag for an appropriate image for facebook - Start

// FULL path(URL) of the image on site should be specified, relative path won't work.
string ImgPath = "http://www.am22tech.com/" "IMAGE PATH";

HtmlMeta metaTagImgForFacebook = new HtmlMeta();
metaTagImgForFacebook.Attributes.Add("property", "og:image");
metaTagImgForFacebook.Attributes.Add("content", ImgPath);
Page.Header.Controls.Add(metaTagImgForFacebook);

//Add meta tag for an appropriate image for facebook -End

ENJOY!

Disqus Comments Loading...