发表新帖
发表新帖

How does Facebook Sharer select Images and other metadata when sharing my URL?

前端 未结
关注
12 2041
忘掉有多难
忘掉有多难 2020-11-21 04:20

When using Facebook Sharer, Facebook will offer the user the option of using 1 of a few images pulled from the source as a preview for their link. How are these images selec

相关标签:
12条回答
  • 名媛妹妹
    2020-11-21 04:54

    How do I tell Facebook which image to use when my page gets shared?

    Facebook has a set of open-graph meta tags that it looks at to decide which image to show.

    The keys one for the Facebook image are:

    <meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />

    and it should be present inside the <head></head> tag at the top of your page.

    If these tags are not present, it will look for their older method of specifying an image: <link rel="image_src" href="/myimage.jpg"/>. If neither are present, Facebook will look at the content of your page and choose images from your page that meet its share image criteria: Image must be at least 200px by 200px, have a maximum aspect ratio of 3:1, and in PNG, JPEG or GIF format.

    Can I specify multiple images to allow the user to select an image?

    Yes, you just need to add multiple image meta tags in the order you want them to appear in. The user will then be presented with an image selector dialog:
    Facebook Image Selector

    I specified the appropriate image meta tags. Why isn't Facebook accepting the changes?

    Once a url has been shared, Facebook's crawler, which has a user agent of facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php), will access your page and cache the meta information. To force Facebook servers to clear the cache, use the Facebook Url Debugger / Linter Tool that they launched in June 2010 to refresh the cache and troubleshoot any meta tag issues on your page.

    Also, the images on the page must be publicly accessible to the Facebook crawler. You should specify absolute url's like http://example.com/yourimage.jpg instead of just /yourimage.jpg.

    Can I update these meta tags with client side code like Javascript or jQuery? No. Much like search engine crawlers, the Facebook scraper does not execute scripts so whatever meta tags are present when the page is downloaded are the meta tags that are used for image selection.

    Adding these tags causes my page to no longer validate. How can I fix this?

    You can add the necessary Facebook namespaces to your tag and your page should then pass validation:

    <html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://ogp.me/ns#"
      xmlns:fb="https://www.facebook.com/2008/fbml">
    0 讨论(0)
  • 耶瑟儿～
    2020-11-21 04:58

    Use facebook feed dialog instead of share dialog to show custom Images

    Example:

    https://www.facebook.com/dialog/feed?app_id=1389892087910588
&redirect_uri=https://scotch.io
&link=https://scotch.io
&picture=http://placekitten.com/500/500
&caption=This%20is%20the%20caption
&description=This%20is%20the%20description
    0 讨论(0)
  • 忘了有多久
    2020-11-21 04:59

    For secure HTTPS 

    <meta property="og:image:secure_url" content="https://image.path.png" />
    0 讨论(0)
  • 被撕碎了的回忆
    2020-11-21 05:00

    From my experience, the http://www.facebook.com/sharer.php does not use meta tags. It uses the string you pass. See below.

    http://www.facebook.com/sharer.php?s=100&p[title]=THIS IS MY TITLE&p[summary]=THIS IS MY SUMMARY&p[url]=http://www.MYURL.com&&p[images][0]=http://www.MYURL.com/img/IMAGEADDRESS

    The meta tags work with Facebook's developer like/send buttons, as does the other Open Graph info. So if you use one of Facebook's actual elements like the comments and such, that will all tie into the Open Graph stuff.

    UPDATE: There are two ways to use the sharer * note the ?s versus the ?u value in the query string
    1 ==> STRING: http://www.facebook.com/sharer.php?s + content from above
    ~~> Will pull info from the string.
    2 ==> URL: http://www.facebook.com/sharer.php?u=url where url equals an actual url
    ~~> Will scrape the page provided in the url value
    ~~> You can test test the values here: https://developers.facebook.com/tools/debug

    0 讨论(0)
  • 北荒
    2020-11-21 05:03

    When you share for Facebook, you have to add in your html into the head section next meta tags: 

    <meta property="og:title" content="title" />
<meta property="og:description" content="description" />
<meta property="og:image" content="thumbnail_image" />

    And that's it!

    Add the button as you should according to what FB tells you.

    All the info you need is in www.facebook.com/share/

    0 讨论(0)
  • 粉色の甜心
    2020-11-21 05:04

    This is what worked for me: I placed the desired thumbnail image on the page right after the tag and making it too small to see..

    <img src="imagename.jpg" width="1" height="1" />

    I have not tested it with height 0 and width 0 but it probably will still work.. This does not guarantee the user will select this image..

    ALSO it seems like Facebook caches the thumbnails on your page and doesnt always check it for new ones.. try adding this to another page on your site and you'll see that it works.

    0 讨论(0)
 看不清?
提交回复
热议问题