3

please read through the whole post before marking this as duplicate of Facebook Share Story Image Does Not Appear For First time or related questions.

I'm creating a dynamic page (with unique url and image) that users can share on facebook with a share dialog.

According to https://developers.facebook.com/docs/sharing/best-practices#precaching Facebook need to scrape the url in og:image before it can show it in the share dialog.
This can be done either by using the sharing debugger OR setting og:image:width and og:image:height metatags on the page that is shared.

Since the site I'm making potentially can get a lot of unique pages and images, I don't want hack together a script to programmatic call the sharer debugger (or sharer.php with the unique urls) to make this work. So I'm trying to use the og:image:width and og:image:height metatags.

Unfortantly I've not been able to make this work.
The first time the page is shared it does not show the image specified in og:image. The second time it does.

I've created two demo-files to back this up:

http://beerco.de/fbgifshare/urls_without_ts.php This page has the follwing metatags and fb.ui code:

    <meta property="og:url" content="http://beerco.de/fbgifshare/test.gif">
    <meta property="og:title" content="Lorem Ipsum">
    <meta property="og:description" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum lacinia nisl ut hendrerit. Sed elementum, urna id accumsan ultrices, lectus felis bibendum lectus, sed ornare velit elit eleifend ipsum.">
    <meta property="og:image" content="http://beerco.de/fbgifshare/test.gif"
    <meta property="og:image:width" content="500">
    <meta property="og:image:height" content="500">
    ...
    FB.ui({
        method: 'share',
        href: 'http://beerco.de/fbgifshare/urls_without_ts.php'
    }, function(response){
        console.log(response);
    });

This will always work (after the initial share) since the href that is shared and the og:image is static.

http://beerco.de/fbgifshare/urls_with_ts.php This page will always share a unique URL and image:

    <meta property="og:url" content="http://beerco.de/fbgifshare/test.gif?ts=1484855521">
    <meta property="og:title" content="Lorem Ipsum">
    <meta property="og:description" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum lacinia nisl ut hendrerit. Sed elementum, urna id accumsan ultrices, lectus felis bibendum lectus, sed ornare velit elit eleifend ipsum.">
    <meta property="og:image" content="http://beerco.de/fbgifshare/test.gif?ts=1484855521">
    <meta property="og:image:width" content="500">
    <meta property="og:image:height" content="500">
    ...
    FB.ui({
        method: 'share',
        href: 'http://beerco.de/fbgifshare/urls_with_ts.php?ts=1484855521'
    }, function(response){
        console.log(response);
    });

The share dialog will not show the image preview the first time I open the feed dialog but it may show it if I try again (without reloading the page) because facebook then have scraped the image.

If i refresh the page and try to share again the preview is not shown since the urls got a new timestamp.

Am I missing something here or is the facebook documentation wrong?
I need the image preview to be shown the first time the user shares the page.
What is the best way to achieve this?

The reason for having the image-url in both og:image and og:url is because I want the animated gif to be played inline in facebook (like giphy does) when the page is shared.

Please view source on the two demo-files to see all OG tags and FB.ui code.

All help appreciated!

Community
  • 1
  • 1
mario
  • 320
  • 2
  • 14
  • _“having the image-url in both og:image and og:url”_ – I think that might be part of the problem here. With `og:url` you are explicitly telling Facebook, this is the actual URL of the page I want to share, please go fetch the meta data from there. But the image has not Open Graph meta data … You are simply doing stuff here that is not supposed to work that way, so you can’t expect it to work “as documented” either. – CBroe Jan 20 '17 at 09:11
  • You may be right, but I'm trying to use the same metatags as giphy does. Check out the metatags at http://giphy.com/gifs/nba-l0Ex86DDMemIyuD0Q. Note that the actual url that is shared with the FB.ui in my examples are to the page that have the og tags. I will try to edit the og tags so the url will point to the page instead and only the og:image will be the url of the gif. It's important that the gif will show up in the facebook feed as an animated gif - not just a link to the site. – mario Jan 20 '17 at 09:19
  • giphy uses a lot more OG meta tags; specifically they also deliver the animation as _video_. Plus, they might not rely on the image dimensions to guarantee the image is shown on first share attempt already, but probably _do_ pre-scrape. – CBroe Jan 20 '17 at 09:29
  • @CBro here is a test with og:url to the actual page: http://beerco.de/fbgifshare/og_url_to_page.php It will then read the title and description metadata but it will still not show the image preview the first time. Yes, giphy has swf as video - but this is legacy AFAIK. I don't think it is used anymore when sharing on facebook. As far as I can se a pre-scrape is the only solution - seems like a hack but it could work. – mario Jan 20 '17 at 09:30
  • Facebook converts all GIFs to videos (as do most sites, because GIF animations are very hard to “control” cross-browser when it comes to things like starting/stopping the animation); I don’t think that is “legacy” at all, but more likely giphy’s way of speeding things up or guaranteeing a certain quality factor is met or something like that. – CBroe Jan 20 '17 at 09:34
  • Yes, they may convert it to mp4 and display it with the gif-play-button in the feed. And to be clear - the gif (or video...) are working fine on both mobile and desktop after it's been shared. The problem is only that it won't show the first time a user want to share the generated gif. I'll try prescape even tho this seems like a hack to me. – mario Jan 20 '17 at 09:49

0 Answers0