前言

??最近在做网页内部点击按钮，分享网页到facebook，假如是单纯的链接分享到facebook就很简单了，但是假如网页展现的是商品介绍，分享一个商品的网页到facebook，那么就必需以图文介绍的方式分享到facebook，效果如下所示：

假如分享到facebook必需以图文方式分享，而且你又刚好看了 Facebook API 未处理问题，那么这篇文章很适合你看。

注意点一

在我们分享的网页中，必需配置meta部分，如下所示：

<meta property="og:url"           content="https://www.your-domain.com/your-page.html" /><meta property="og:type"          content="website" /><meta property="og:title"         content="Your Website Title" /><meta property="og:description"   content="Your description" /><meta property="og:image"         content="https://www.your-domain.com/path/image.jpg" />

注意点二

<meta property="og:url"           content="https://www.your-domain.com/your-page.html" />

content中的网址，必需是标注网址，不得包含任何计数器和会话变量，这是重点！

错误地址如下:

https://www.your-domain.com/your-page.html?a=1https://www.your-domain.com/your-page.html?a=1&b=2

对于这个问题，在我们项目中，分享出去的是商品页，所以商品的ID都是动态的！对于这个问题，有两种解决方式：

• 1：前台动态往head中加入meta部分。
• 2：后端制作动态网页，内含meta部分。

??如https:/abc.com/app/api/v1/dynamic-page/item-batch/ENUS/h5token/2/68/item-facebook-share.html为后端路由网页，其中ENUS/h5token/2/68/为动态数据，包含语言，token，邀请人ID以及商品ID，这样对于og:url的参数，我们就完美处理了，这部分由后端完成！

注意点三

对于og:url内容地址，假如你不知道facebook能否可以识别，那么就把你的网页放到 facebook for deverlopers 中测试一下，该结果就会显示出你的网页内，能否包含了必要参数，如下所示：

当你看到这个画面，facebook读出你的网页包含了规定的meta，那么你分享出去，就是图文形式了！！

注意点四

分享代码如下：location.href = `https://www.facebook.com/sharer/sharer.php?kid_directed_site=0&u=${url}`url: 该链接和meta部分的og:url值一模一样，就是哪个标准的分享网页地址！

总结

懒人代码：拿走即可使用！！

  第一步：后端生成含有meta部分的标准路径网页，例如：http(s)://a.com/c.html  第二步：location.href = `https://www.facebook.com/sharer/sharer.php?kid_directed_site=0&u=http(s)://a.com/c.html`

说明

原创作品，禁止转载和伪原创，违者必究！