Facebook – How to get Facebook to show the site’s logo when I paste the link in a post/status/comment

facebookthumbnails

Facebook sometimes does this really neat thing where they show a thumbnail preview of a website you link to in a status update. It is usually the website's logo.

I'm wondering what the trick is to get this to work for my site, so if I were to share http://www.example.com, I would see my site's logo/favicon in that preview box. How would I do this?

Best Answer

Try your site in this facebook debugger tool.

http://developers.facebook.com/tools/debug

It will tell you what is missing.Eg. below in page head

<meta property="og:image" content="[url to image]" />
<meta property="og:title" content="[page name]" />
<meta property="og:description" content="[content description]" />

There are different ways depending on how your site is built. Eg. This Wordpress plugin creates a link for each image on the page so you can chose between your logo and any other post image on the page.

Update 2017: It is now recommended to register a Facebook App ID for your site otherwise the debugger will give you an error. More tags and info

Related Solutions

Facebook Post Link Image

The easiest way is just a link tag:

<link rel="image_src" href="http://stackoverflow.com/images/logo.gif" />

But there are some other things you can add to your site to make it more Social media friendly:

Open Graph Tags

Open Graph tags are 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 six 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., "IMDb".
fb:admins or fb:app_id - A comma-separated list of either the Facebook IDs of page administrators or a Facebook Platform application ID. At a minimum, include only your own Facebook ID.

More information on Open Graph tags and details on Administering your page can be found on the Open Graph protocol documentation.

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

Facebook – FB OpenGraph og:image not pulling images (possibly https?)

Some properties can have extra metadata attached to them. These are specified in the same way as other metadata with property and content, but the property will have extra :

The og:image property has some optional structured properties:

og:image:url - Identical to og:image.
og:image:secure_url - An alternate url to use if the webpage requires HTTPS.
og:image:type - A MIME type for this image.
og:image:width - The number of pixels wide.
og:image:height - The number of pixels high.

A full image example:

<meta property="og:image" content="http://example.com/ogp.jpg" />
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" /> 
<meta property="og:image:type" content="image/jpeg" /> 
<meta property="og:image:width" content="400" /> 
<meta property="og:image:height" content="300" />

So you need to change og:image property for your HTTPS URLs to og:image:secure_url

Ex:

HTTPS META TAG FOR IMAGE:

<meta property="og:image:secure_url" content="https://www.[YOUR SITE].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" />

HTTP META TAG FOR IMAGE:

<meta property="og:image" content="http://www.[YOUR SITE].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" />

Source: http://ogp.me/#structured <-- You can visit this site for more information.

Hope this helps you.

EDIT: Don't forget to ping facebook servers after updating your codes - URL Linter

Best Answer

Related Solutions

Facebook Post Link Image

Facebook – FB OpenGraph og:image not pulling images (possibly https?)

Related Topic