拉动时 Facebook 错误 og:image

Question

无论出于何种原因，我在 FB 上分享 link 时尝试使用的图像无法加载。给出的确切错误是：

提供og:image，无法下载。发生这种情况的原因有多种，例如您的服务器使用不受支持的内容编码。爬虫接受 deflate 和 gzip 内容编码。

我正在使用 s3 存储桶来保存我的图像，据我所知，该存储桶是 public，我可以在任何浏览器上加载这些图像。我还添加了 og:image、og:image:url、og:image:secure_url、og:image:高度、og:image：宽度和 og:image:type 到元标记，所以就元标记而言，我认为我已经涵盖了所有理由。是否有我应该添加的特定设置？感谢任何帮助

Answer 1

一段时间后我解决了这个问题。事实证明，FB Sharer 不接受 base64 图像。我做的是直接将base64二进制保存到S3，因此FB无法显示图像。

因此，如果有人正在做与我相同的事情，请先将您的 base64 图像保存到 file/directory，然后再将其上传到 S3。

Answer 2

对于其他来到这里的人，我暂时遇到了这个问题。 Facebook Sharing Debugger 异步获取图像并可能给出错误的 404。

我建议再刷几次以确认。

Answer 3

首先我将 HTML 转换为 canvas，然后将 canvas 转换为图像，然后使用 canvas 绘制此图像以裁剪初始图像以摆脱额外 space。完成后，图像被发送到服务器进行存储，并在 og:image 元标记中传递给 FB。

$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

Answer 4

就我而言，这是由于图像的扩展。我将 .PNG 更改为 .JPEG 并开始工作。所以请尝试更改您的扩展名，然后重试。

拉动时 Facebook 错误 og:image

Facebook error when pulling og:image

share

facebook

amazon-s3

amazon-web-services