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

前端 未结 12 2042
忘掉有多难
忘掉有多难 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 05:05

    I had this problem and fixed it with manuel-84's suggestion. Using a 400x400px image worked great, while my smaller image never showed up in the sharer.

    Note that Facebook recommends a minimum 200px square image as the og:image tag: https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/#tags

    0 讨论(0)
  • 2020-11-21 05:07

    I couldn't get Facebook to pick the right image from a specific post, so I did what's outlined on this page:

    https://webapps.stackexchange.com/questions/18468/adding-meta-tags-to-individual-blogger-posts

    In other words, something like this:

    <b:if cond='data:blog.url == "http://urlofyourpost.com"'>
      <meta content='http://urlofyourimage.png' property='og:image'/>
     </b:if>
    

    Basically, you're going to hard code an if statement into your site's HTML to get it to change the meta content for whatever you've changed for that one post. It's a messy solution, but it works.

    0 讨论(0)
  • 2020-11-21 05:10

    Put the following tag in the head:

    <link rel="image_src" href="/path/to/your/image"/>
    

    From http://www.facebook.com/share_partners.php

    As far as what it chooses as the default in the absence of this tag, I'm not sure.

    0 讨论(0)
  • 2020-11-21 05:12

    To change Title, Description and Image, we need to add some meta tags under head tag.

    STEP 1 :
    Add meta tags under head tag

    <html>
    <head>
        <meta property="og:url" content="http://www.test.com/" />
        <meta property="og:image" content="http://www.test.com/img/fb-logo.png" />
        <meta property="og:title" content="Prepaid Phone Cards, low rates for International calls with Lucky Prepay" />
        <meta property="og:description" content="Cheap prepaid Phone Cards. Low rates for international calls anywhere in the world." />
    

    NEXT STEP :
    Click on below link
    https://developers.facebook.com/tools/debug

    Add your URL in text box (e.g http://www.test.com/) where you mentioned the tags. Click on DEBUG button.

    Its done.

    You can verify here https://www.facebook.com/sharer/sharer.php?u=http://www.test.com/

    In above url, u = your website link

    ENJOY !!!!

    0 讨论(0)
  • 2020-11-21 05:14

    As of 2013, if you're using facebook.com/sharer.php (PHP) you can simply make any button/link like:

    <a class="btn" target="_blank" href="http://www.facebook.com/sharer.php?s=100&amp;p[title]=<?php echo urlencode(YOUR_TITLE);?>&amp;p[summary]=<?php echo urlencode(YOUR_PAGE_DESCRIPTION) ?>&amp;p[url]=<?php echo urlencode(YOUR_PAGE_URL); ?>&amp;p[images][0]=<?php echo urlencode(YOUR_LINK_THUMBNAIL); ?>">share on facebook</a>
    

    Link query parameters:

    p[title] = Define a page title
    p[summary] = An URL description, most likely describing the contents of the page
    p[url] = The absolute URL for the page you're sharing 
    p[images][0] = The URL of the thumbnail image to be used as post thumbnail on facebook
    

    It's plain simple: you do not need any js or other settings. Is just an HTML raw link. Style the A tag in any way you want to.

    0 讨论(0)
  • 2020-11-21 05:14

    Old way, no longer works:

    <link rel="image_src" href="http://yoururl/yourimage"/>
    

    Reported new way, also does not work:

    <meta property="og:image" content="http://yoururl/yourimage"/>
    

    It randomly worked off and on during the first day I implemented it, hasn't worked at all since.

    The Facebook linter page, a utility that inspects your page, reports that everything is correct and does display the thumbnail I selected... just that the share.php page itself doesn't seem to be functioning. Has to be a bug over at Facebook, one they apparently don't care to fix as every bug report regarding this issue I've seen in their system all say resolved or fixed.

    0 讨论(0)
提交回复
热议问题