Facebook error when pulling og:image

Question

For whatever reason, the image that I'm trying to use when sharing a link on FB doesn't load. The exact error that's being given is this:

Provided og:image, could not be downloaded. This can happen due to several different reasons such as your server using unsupported content-encoding. The crawler accepts deflate and gzip content encodings.

I'm using an s3 bucket to hold my images, and as far as I'm concerned the bucket is public and I can load these images on any browser. I'm also adding the og:image, og:image:url, og:image:secure_url, og:image:height, og:image:width, and og:image:type to the meta tags, so as far as meta tags are concerned I think I've covered all grounds. Is there a particular setting that I should be adding? Thanks of any help

Answer 1

For other people who end up here, I encountered this issue temporarily. The Facebook Sharing Debugger fetches images asynchronously and can give false 404s.

I recommend scraping again a couple of times to confirm.

Answer 2

After some time I was able to solve the problem. It turns out, the FB Sharer doesn't accept base64 images. What I was doing was directly saving the base64 binary to S3, and because of that FB couldn't display the image.

So if someone out there is doing the same thing as I was, save your base64 images to file/directory first before uploading it to S3.

Answer 3

At first I convert HTML to canvas, then canvas to image and afterwards this image is drawn with canvas for cropping the initial image to get rid of extra space. After this is done, the image is sent to the server for storage and passed to FB in og:image meta tag.

$scope.facebookShared = () ->

      $window.open "//www.facebook.com/sharer/sharer.php?u=" + encodeURI($location.absUrl()), "sharer", "toolbar=0,status=0,width=" + 500 + ",height=" + 500 /// this is window for share fb

      height=$('.sharing').height()
      html2canvas document.body,
        onrendered: (canvas) ->

          context = canvas.getContext('2d')
          image = new Image()
          image.src = canvas.toDataURL("image/png")
          image.onload = ->
            sharing=$('.sharing')
            canvas.height = Math.round(sharing.width()/1.91)
            canvas.width = sharing.width()

            context=canvas.getContext('2d')

            pos =  sharing.parent(0).parent(0).position()
            context.drawImage(this, pos.left, pos.top, sharing.width() + 20, sharing.height(),0,0,sharing.width()+20,sharing.height())

            $.ajax
              url: '../../save_img'
              type: 'post'
              beforeSend: (xhr) ->
                xhr.setRequestHeader "X-CSRF-Token", $("meta[name=\"csrf-token\"]").attr("content")
                return
              data:
                base64_image: canvas.toDataURL("image/png").replace(/^data:image\/(png|jpg);base64,/, "")
                claim_slug: $scope.claim.slug

            return false

        width: $('.claim-page ').width()
        height: height+115

      return