拉og时出现Facebook错误:图片

时间:2018-05-25 03:15:40

标签: facebook amazon-web-services amazon-s3 share

无论出于何种原因,我在FB上共享链接时尝试使用的图像无法加载。给出的确切错误是:

提供og:image,无法下载。这可能是由于几种不同的原因,例如您的服务器使用不受支持的内容编码。抓取工具接受deflate和gzip内容编码。

我正在使用s3存储桶来保存我的图像,就我而言,存储桶是公共的,我可以在任何浏览器上加载这些图像。我还添加了og:image,og:image:url,og:image:secure_url,og:image:height,og:image:width和og:image:type to meta tags,so to meta标签是关注我认为我已涵盖所有理由。我应该添加一个特定的设置吗?谢谢你的帮助

3 个答案:

答案 0 :(得分:13)

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

我建议再次转义两次以确认。

答案 1 :(得分:4)

一段时间后,我能够解决问题。事实证明,FB Sharer不接受base64图像。我正在做的是直接将base64二进制文件保存到S3,因为FB无法显示图像。

因此,如果有人在做同样的事情,请先将base64图像保存到文件/目录,然后再将其上传到S3。

答案 2 :(得分:0)

首先,我将HTML转换为画布,然后将画布转换为图像,然后使用画布绘制此图像,以裁剪初始图像以消除多余的空间。完成此操作后,图像将被发送到服务器进行存储,并通过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