Question

Well, as stated in title, is there any way to block certain images from Facebook js sharer?

Facebook js sharer automatically fetches images from the page and allows user to choose the image to show as thumbnail in shared post. At the moment, we've got a situation, that it fetches advertisement images on the pages with no other images presented.

I can imagine that banners could be shown as background images for divs, or by adding them dynamically, but still maybe there is special tag for images to be excluded or sharer init options... Can't find anything related on the FB docs, but they are very "specific"...

To clarify the above take look at the markup:

<!DOCTYPE html>
<html lang="en" 
      xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:og="http://ogp.me/ns#"
      xmlns:fb="https://www.facebook.com/2008/fbml">
 <head>
  <meta property="og:image" content="/logo.jpg">
 </head>
 <body>
  <article>
   ..plain text content
  </article>
  <aside>
   <img src="/banner.jpg"> <!-- fetched image for share, wrong -->
  </aside>
 </body>
</html>

P.S.: I've read this question: how to exclude an image from facebook sharer - but actually adding banners dynamically (selected answer) is not the way it meant to be.

Was it helpful?

Solution

This is a C&P of another answer I gave to a different question, though it fits here too:

A solution for your problem might be to check whether a real user or the Facebook bot is visiting your page. If it is the bot, then render only the necessary meta data for it. You can detect the bot via its user agent which according to the Facebook documentation is:
"facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)"

The code would look something like this (in PHP):

function userAgentIsFacebookBot() {
    if ($_SERVER['HTTP_USER_AGENT'] == "facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)") {
        return true;
    }
    return false;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top