Facebook javascript SDK 分享图片问题
Posted
技术标签:
【中文标题】Facebook javascript SDK 分享图片问题【英文标题】：Facebook javascript SDK share image issue 【发布时间】：2019-08-22 16:16:06 【问题描述】：我想为通过 Facebook 分享图片制作自定义按钮。
我一开始已经添加了 JS SDK 脚本：
<script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>
然后我添加了FB.ui按钮点击功能：
$('.fb.btn').click(function()
// Open FB share popup
FB.ui(
method: 'share_open_graph',
action_type: 'og.shares',
action_properties: JSON.stringify(
object:
'og:url': window.location.href,
'og:title': 'My Title',
'og:description': 'Some description here',
'og:image': 'img url'
)
,
function (response)
// Action after response
);
);
所以，我想将我网站主页的链接指定为og:url。
我还想指定images文件夹中的共享图片。
但是FB.ui 函数会忽略除og:url 之外的所有og 参数。它获取网站 URL 并从 URL 中提取所有参数，但不从 FB.ui 函数中的指定参数中提取。它不会在共享链接中显示指定的图像，它只是从主链接 (og:url) 获取任何图像。标题也一样。
尽管我可以单独指定这些参数，为什么它仍然从一个页面中获取所有内容？
我想将www.example.com 作为og:url 传递，Hello World 作为og:title 和www.example.com/images/hello.jpg 作为og:image 传递。
如何使用FB.ui 函数并传递与我指定的完全相同的参数，而不管og:url 页面？
【问题讨论】：
你不能。您必须将 og-tags 放在您共享的页面上 不幸的是 og-tags 在静态页面上也不起作用 网址是什么？ 那么我应该设置所有这些参数（og:title、og:description、og:image）什么？ 您将这些标签放在您共享的页面上。您可以将它们设置为任何您想要的。 【参考方案1】：我发现只有在我的域上放置带有适当 og: 标记的静态页面，然后为这个特殊页面提供共享权的链接时，它才对我有用。
通过 Facebook 请求分享链接示例：
function share_fb(url)
window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(url),'sharer','toolbar=0,status=0,width=1200,height=630', '_blank');
var shareLinkFB = 'www.example.com/page_for_fb_sharing.html';
share_fb(shareLinkFB);
在您的服务器上共享链接 (www.example.com/page_for_fb_sharing.html) 的示例页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta property="og:title" content="My website title" />
<meta property="og:description" content="Some description" />
<meta property="og:caption" content="Also caption" />
<meta property="og:image" content="www.example.com/images/sharing_image.png">
<meta property="og:url" content="www.example.com/page_for_fb_sharing.html">
<title>Playstation</title>
</head>
<body>
<!-- just empty body -->
</body>
</html>
现在，当您在share_fb 函数中提出请求时，Facebook 必须在共享消息中正确显示标题和图像。
如果您在后端配置路由，此页面也可能是动态的（即 www.example.com/page_for_fb_sharing/id），但主要是为 og:url 元标记和共享链接本身分别设置相同的 URL否则 Facebook 将找不到您的分享页面，分享链接将被破坏。
所以使用这种方法你可以准备一堆静态页面，并根据它们给出不同的分享链接或制作动态页面。您还可以将 JS 脚本放在此共享页面的正文中，并自动重定向到另一个页面以拥有一个共享页面，特别是用于 FB 共享渲染，但动态以进一步重定向命中。
<script>window.location.replace('www.example.com/quiz_result.html?result=value');</script>
在这种情况下根本不需要使用FB SDK。
删除<script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>
【讨论】：
以上是关于Facebook javascript SDK 分享图片问题的主要内容，如果未能解决你的问题，请参考以下文章
html Facebook Javascript SDK演示
html 异步加载Facebook JavaScript SDK
Facebook javascript SDK 分享图片问题
Facebook 登录：如何将 JavaScript 与 PHP SDK 结合起来？