多渠道分享实践

财富云平台的业务场景有包括海外渠道等多渠道的分享需求，结合了国内微信的分享，设计了一套多渠道分享方案。

本文涉及到的分享渠道有微信、微信朋友圈、Facebook、Twitter、Messenger、Instagram、Viber 和 Whatsapp。主要介绍了以上渠道的分享方式，以及根据业务场景设计的分享方案。

以上渠道分享出来的卡片样式大同小异，主要包括：title、description、image，以及分享文案，我们可以命名为 content。

分享卡片

分享方式

一次分享

一次分享即为从 APP 内直接分享到对应渠道。

目前分享主要涉及两种方式：SDK卡片式、开放图谱读取。

SDK卡片式

国内的分享，比方说微信分享、也包括 Messenger，主要从 APP 分享的方式是主要为 Native 调用 SDK 的方式进行分享。根据对应平台提供的 SDK 及其分享字段规则，就可以唤醒 APP 并触发分享。

微信：https://developers.weixin.qq.com/doc/oplatform/Mobile_App/Resource_Center_Homepage.html

Messenger：https://developers.facebook.com/docs/sharing/messenger?locale=zh_CN

分享的效果是直接拼好一个卡片，即为分享的全部内容。

开放图谱读取

而国际渠道的分享，包括 Facebook、Twitter 等，分享卡片的生成是靠开放图谱。

分享的效果是先通过 SDK 分享出一段代链接的文案，对应 APP 去读页面里埋的分享内容而生成分享卡片样式。

本文涉及的这些渠道所读取的主要有以下两种：

以 Facebook 为代表的: https://developers.facebook.com/docs/sharing/webmasters#markup

1
2
3
4
<meta property="og:url" content="http://www.myj.name/" />
<meta property="og:title" content="多渠道分享实践" />
<meta property="og:description" content="本文涉及到的分享渠道有微信、微信朋友圈、Facebook、Twitter、Messenger、Instagram、Viber 和 Whatsapp。" />
<meta property="og:image" content="shareCard.png" />

以 Twitter 为代表的：https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary-card-with-large-image

1
2
3
4
5
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" content="http://www.myj.name/" />
<meta name="twitter:title" content="多渠道分享实践" />
<meta name="twitter:description" content="本文涉及到的分享渠道有微信、微信朋友圈、Facebook、Twitter、Messenger、Instagram、Viber 和 Whatsapp。" />
<meta name="twitter:image" content="shareCard.png" />

开篇所说的几个通过开放图谱获取分享内容的渠道整理如下：

渠道 Android IOS
Facebook og: og:
Instagram og: og:
Twitter twitter: twitter:
Viber twitter: twitter:
Whatsapp og: twitter: & og:

如果你仔细看了上面提供的文档，你会发现 Twitter 也会读取 og:的标签。而更加神奇的是，Whatsapp 会在不同的平台上读取不同的标签！

在我们调研过的很多页面中，页面标准的元数据标签<meta>、og:标签和twitter:标签，都会埋入同样的描述内容，这就使得这些链接无论分享到哪个渠道，读取到的内容都是相同。

但如果需求要求针对不同的分享渠道进行区分，那就需要在分享出来的页面上面做一些手脚。

技术方案

APP 内

第一步，即使在 APP 内调用 SDK 分享到对应渠道。

回看一下分享卡片的几个元素，有一部分与链接拼在一起分享的文案，即为 content 部分。目前，微信、Facebook、Messenger 不支持拼接这个文案，需要在分享的时候用户自己输入。其余的渠道：Viber、Whatsapp、Instagram 和 Twitter 是可以在 SDK 分享中拼接 content。

有关于分享图片的大小和比例每个渠道不同，例如 Whatsapp 取 1:1，Messenger 取 1.9:1, Twitter 大卡片取 2:1。大多数的渠道都支持 1024*768，如果大小不符合则会截取。如果介意可以配置多个图片到:image标签下。

分享落地页

由于现在大部分的页面都是前端框架渲染，为了方便分享内容的抓取，我们需要预先渲染一部分内容。
我们目前并没有使用同构的条件，所以我们在实际分享的内容前面加了一个页面，专门用作分享。

这一个页面承接了不同业务场景，支持分渠道、多语言。为了区分不同分享渠道的内容，也为了兼容像是 Whatsapp 这种迷惑的读取行为，我们采取了相对简单粗暴的方式:

当我们获取到当前分享的渠道，我们把这个渠道配置的分享内容全部饱和的塞到图谱标签内。例如，当我们获取到当前分享的链接是 Facebook 的，我们会把为 Facebook 配置的内容给og:标签和twitter:标签都赋值。

1
2
3
4
5
6
7
8
9
10
11
<title>多渠道分享实践</title>
<meta name="description" content="" />
<meta property="og:url" content="http://www.myj.name/" />
<meta property="og:title" content="多渠道分享实践" />
<meta property="og:description" content="本文涉及到的分享渠道有微信、微信朋友圈、Facebook、Twitter、Messenger、Instagram、Viber 和 Whatsapp。" />
<meta property="og:image" content="shareCard.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" content="http://www.myj.name/" />
<meta name="twitter:title" content="多渠道分享实践" />
<meta name="twitter:description" content="本文涉及到的分享渠道有微信、微信朋友圈、Facebook、Twitter、Messenger、Instagram、Viber 和 Whatsapp。" />
<meta name="twitter:image" content="shareCard.png" />

之后这个页面会根据业务场景进行跳转，并对链接里面的参数进行透传。在暴露链接的分享渠道中使用短链重定向，可以使用户无感知。
这样做一是保证了分享出去的链接一定可以读取到内容并且 Android 和 IOS分享内容一致，二是读取同样标签的渠道（twitter、viber）也可以区分分享内容。

唯一需要考虑的是，在二次分享的时候如果改变了渠道，也不会读取为该渠道所配置的内容。例如从 Facebook 分享到了 Twitter，所展示的内容依然是为 Facebook 所配置的那套，而不会是 Twitter 的。

二次分享

二次分享即为从分享出来的页面转发分享。

转发分为两种：1、用户手动粘贴分享的链接到分享的渠道 app 上面；2、页面里调用转发功能

二次分享需要和一次分享的开放图谱图谱结合，因为本质上，这些渠道就是对分享出去的内容进行一个抓取。所以需要补充一下开放图谱的读取：

渠道 Android IOS
Messenger og: og:

作为 Facebook 的亲儿子，Messenger 一脉相承了开放图谱的读取。

在微信里打开的页面做微信转发是需要调用微信SDK，引入之后在页面中进行配置，并在分享的时候配置对应的title、description、image。

微信 SDK：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

从浏览器进行Facebook 以及 Twitter 分享并不在此次需求中，不过分享的方式很类似：

1
2
3
4
5
<!--安装过的时候唤起-->
<a href="fb-messenger://share/?link=https%3A%2F%2Fh5.lui.com&app_id=123456789">Messenger</a>
<!--分享到页面-->
<a href="https://www.facebook.com/sharer.php?title=facebookShare&u=https%3A%2F%2Fh5.lui.com" target="_blank">Facebook</a>
<a href="https://twitter.com/share?text=twitterShare&url=https%3A%2F%2Fh5.lui.com" target="_blank">Twitter</a>
share, multi-channel, open graph