Question

Possible Duplicate:
How does Facebook Sharer select Images?

Want to have share thumbnail when user shares site url using share button on site which uses http://www.facebook.com/sharer.php to achieve that.

Site dose not have img tags, all images are defined in css.

I added meta tags for image:

<meta property="og:image" content="/images/branding/branding-logo.png"/>

and

<link rel="image_src" href="/images/branding/branding-logo.png"/>

but it's not working :(

Was it helpful?

Solution

Use the full list of Open Graph Meta Tags:

  • 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.

Also use absolute URLs instead of relative!

EDIT:
Please note that Facebook caches webpages for specific periods so you may not notice your changes right away. A good way to check if Facebook is/will actually take your changes is by faking a parameter in your URL.
for example if your URL reads: http://example.com/index.php
Add something like: http://example.com/index.php?123 and then use it in the URL Linter. ;-)

EDIT 2:
You could directly use the Facebook Linter (now called Debugger), but be aware that some data cannot be changed in some cases, described here:

Editing Meta Tags

You can update the attributes of your page by updating your page's tags. Note that og:title and og:type are only editable initially - after your page receives 50 likes the title becomes fixed, and after your page receives 10,000 likes the type becomes fixed. These properties are fixed to avoid surprising users who have liked the page already. Changing the title or type tags after these limits are reached does nothing, your page retains the original title and type.

OTHER TIPS

Paste your ulr here https://developers.facebook.com/tools/debug/ . The facebook Open Graph Debugger will tell you exactly what is reading from your page. And also will update facebook cache of your page so it can try to read images from it again.

As ifaour said, you have to use absolute URLs or they won't be displayed. The <link> tag should work fine.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top