Facebook javascript SDK 共享图像问题

Question

I want to make custom button for an image sharing via Facebook.我想为通过 Facebook 的图像共享制作自定义按钮。

I've added JS SDK script at first:我首先添加了 JS SDK 脚本：

<script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>

Then I've added FB.ui function on button click:然后我在按钮点击时添加了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
   });
});

So, I want to specify link for the main page of my website as og:url .所以，我想将我网站主页的链接指定为og:url 。

Also I want to specify picture for sharing which is in images folder.另外我想指定images文件夹中的共享images 。

But FB.ui function ignores all og parameters except og:url .但是FB.ui函数会忽略除og:url之外的所有og参数。 It takes website URL and pulls all parameters from the URL but not from specified params in FB.ui function.它获取网站 URL 并从 URL 中提取所有参数，但不从FB.ui函数中的指定参数中FB.ui 。 It doesn't show specified image inside shared link, it just gets any image from the main link ( og:url ).它不会在共享链接中显示指定的图像，它只是从主链接 ( og:url ) 获取任何图像。 The same for title.标题也是一样。

Why it takes all stuff from one page anyway despite that fact that I can specify these params separately?尽管我可以单独指定这些参数，但为什么它仍然从一页中获取所有内容？

I want to pass www.example.com as og:url , Hello World as og:title and www.example.com/images/hello.jpg as og:image .我想通过www.example.com作为og:url ， Hello World作为og:title和www.example.com/images/hello.jpg作为og:image 。

How to use FB.ui function and pass exact the same params as I specified regardless to og:url page?如何使用FB.ui函数并传递与我指定的完全相同的参数，而不管og:url页面如何？

Answer 1

I figured out that it works for me only if I put static page with proper og: tags on my domain and then give a link for sharing right for this special page.我发现只有当我在我的域上放置带有适当og:标签的静态页面，然后提供一个链接来共享这个特殊页面的权限时，它才对我og: 。

Make request for sharing link via Facebook example:通过 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);

Example page for sharing link ( www.example.com/page_for_fb_sharing.html ) on your server:您服务器上的共享链接示例页面 ( 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>

And now Facebook must show title and image properly in sharing message when you make request within share_fb function.现在，当您在share_fb函数中发出请求时，Facebook 必须在共享消息中正确显示标题和图像。

Also this page might be dynamic ( ie www.example.com/page_for_fb_sharing/{id} ) if you configure route on the backend but the main thing is to have identical URLs for og:url meta tag and for sharing link itself respectively otherwise Facebook will not find your sharing page and sharing link will be broken.如果您在后端配置路由，此页面也可能是动态的（即www.example.com/page_for_fb_sharing/{id} ），但主要是og:url元标记和共享链接本身具有相同的 URL，否则 Facebook将找不到您的共享页面，并且共享链接将被破坏。

So that using this approach you can prepare a bunch of static pages and give different sharing links according to them or make dynamic page.所以使用这种方法你可以准备一堆静态页面，并根据它们给出不同的共享链接或制作动态页面。 Also you can put JS script in the body of this sharing page and make auto redirect to another page to have one sharing page especially for FB share rendering but dynamic for further redirect hit.您也可以将 JS 脚本放在此共享页面的正文中，并自动重定向到另一个页面以获得一个共享页面，特别是对于 FB 共享渲染，但动态用于进一步重定向命中。

<script>window.location.replace('www.example.com/quiz_result.html?result={value}');</script>

There is no need to use FB SDK at all in this case.在这种情况下根本不需要使用 FB SDK。

Remove <script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>删除<script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>

Facebook javascript SDK 共享图像问题

问题描述

1 个解决方案

解决方案1
0 2019-11-27 09:20:06

Facebook javascript SDK 共享图像问题

问题描述

1 个解决方案

解决方案1 0 2019-11-27 09:20:06

解决方案1
0 2019-11-27 09:20:06