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

Question

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 selected  and how can I ensure that any particular image on my page is always included in this list

User · Answer

Put the following tag in the head    lt link rel  image src  href   path to your image   gt    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

User · Answer

As of 2013  if you re using facebook com sharer php  PHP  you can simply make any button link like    lt a class  btn  target   blank  href  http   www facebook com sharer php s 100 amp amp p title   lt  php echo urlencode YOUR TITLE    gt  amp amp p summary   lt  php echo urlencode YOUR PAGE DESCRIPTION    gt  amp amp p url   lt  php echo urlencode YOUR PAGE URL     gt  amp amp p images  0   lt  php echo urlencode YOUR LINK THUMBNAIL     gt   gt share on facebook lt  a gt    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

User · Answer

To change Title  Description and Image  we need to add some meta tags under head tag   STEP 1   Add meta tags under head tag        lt html gt   lt head gt       lt meta property  og url  content  http   www test com     gt       lt meta property  og image  content  http   www test com img fb-logo png    gt       lt meta property  og title  content  Prepaid Phone Cards  low rates for International calls with Lucky Prepay    gt       lt meta property  og description  content  Cheap prepaid Phone Cards  Low rates for international calls anywhere in the world     gt    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

User · Answer

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    lt b if cond  data blog url     http   urlofyourpost com   gt     lt meta content  http   urlofyourimage png  property  og image   gt    lt  b if gt    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

User · Answer

For secure HTTPS    lt meta property  og image secure url  content  https   image path png    gt

User · Answer

Old way  no longer works      lt link rel  image src  href  http   yoururl yourimage   gt    Reported new way  also does not work    lt meta property  og image  content  http   yoururl yourimage   gt    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

User · Answer

Use facebook feed dialog instead of share dialog to show custom Images   Example   https   www facebook com dialog feed app id 1389892087910588  amp redirect uri https   scotch io  amp link https   scotch io  amp picture http   placekitten com 500 500  amp caption This 20is 20the 20caption  amp description This 20is 20the 20description

User · Answer

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     lt img src  imagename jpg  width  1  height  1    gt    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

User · Answer

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

User · Answer

When you share for Facebook  you have to add in your html into the head section next meta tags     lt meta property  og title  content  title    gt   lt meta property  og description  content  description    gt   lt meta property  og image  content  thumbnail image    gt    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

User · Answer

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      lt meta property  og image  content  http   ia media-imdb com rock jpg   gt   lt meta property  og image secure url  content  https   secure example com ogp jpg    gt    and it should be present inside the  lt head gt  lt  head gt  tag at the top of your page     If these tags are not present  it will look for their older method of specifying an image   lt link rel  image src  href   myimage jpg   gt    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    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    lt html xmlns  http   www w3 org 1999 xhtml        xmlns og  http   ogp me ns         xmlns fb  https   www facebook com 2008 fbml  gt

User · Answer

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 amp p title  THIS IS MY TITLE amp p summary  THIS IS MY SUMMARY amp p url  http   www MYURL com amp  amp 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

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

Examples related to facebook

Examples related to facebook-opengraph

Examples related to facebook-sharer