Home ยป Headline | Technology

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

  3. Jun 2010 by Soan

Update Sep. 26, 2011

If you use BlogEngine.net, then we have created an extension which can help you add this meta tag for your posts. Download it here.

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://am22tech.com, 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://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!

Would you like to share this article?

QR Code for this page Scan this QR code to open this
article in any mobile browser
or share with friends.


For more helpful articles like this, subscribe to our free newsletter or stay connected on social networks:

SUBSCRIBE
Subscribe to AM22 tech in Reader or by Email
Sign up for our updates in Email (Free):

 

Have questions? Write into comments or ask in forum