海外主流社交 APP 分享指南

了解开放图谱

一个被分享到社交平台的网页,通常以包含标题、描述和缩略图等摘要的卡片形式显示。网页的内容千差万别,用户想要分享的可能是一篇文章,一首歌,亦或是一部电影。社交平台该如何呈现分享内容才能兼具准确和美观呢?

开放图谱(Open Graph)是 Facebook 公司创造的一种通讯协议,它使任何网页都能成为社交网络中的富对象(具有标题、描述等属性的数据实体)。简单地说,Web 开发者在网页中使用标记语言设置分享内容,网页被用户分享,Facebook 抓取网页上的分享内容,经过加工后显示在页面上。

开放图谱能够带给用户更好的社交体验。举个例子,当用户分享一个视频网站的播放页面 Foo,实际上想要分享的是上面的视频 Bar。在网页标记了视频链接的情况下,Facebook 能够直接显示可播放的视频 Bar,而不需要用户再跳转到网页 Foo 浏览。

目前海外主流的社交软件基本上都支持开放图谱。有了它,我们能够控制网页在社交网络上展示的形式和内容。

在网页的 head 中使用 meta 标签添加开放图谱标记:

1
2
3
4
5
6
7
8
9
<head>
<title>Example Page</title>
<meta property="og:url" content="https://example.com">
<meta property="og:type" content="website">
<meta property="og:title" content="Introducing AI Retouch">
<meta property="og:description" content="I am using BeautyPlus ...">
<meta property="og:image" content="https://example.com/image.jpg">
...
</head>

上面的开放图谱标记声明了用户分享的是一个网页,并且提供了标题、描述和图片供社交平台展示。

更多开放图谱骚操作请阅读 Facebook 网站管理员分享指南

分享到 Facebook

首先,在 Facebook 开发者平台上 创建应用 获得 AppId ,在网页中 加载和初始化 SDK

在需要分享内容的时候调起分享对话框:

1
2
3
4
5
6
window.FB.ui({
method: 'share',
quote: 'some text', // 引文
hashtag: '#frontend', // 话题
href: 'https://yiming.blog' // 链接
})

随后页面将跳转到 Facebook 的发帖页面。

分享到 Twitter

Twitter 提供了 Web Intents 用于通过网页分享内容,只需使用户跳转到一个链接。

1
https://twitter.com/intent/tweet?text={推文}&hashtags={话题}&url={网页链接}

可以自定义预设推文 text ,一个或一个以上用逗号分隔的话题 hashtags ,以及网页链接 url 。URL 需要用 encodeURIComponent 编码,否则可能出现跳转到 Twitter 后的链接不完整。

若用户安装了 App,唤醒客户端。否则通过网页版分享。

分享到 Instagram

很遗憾,目前 Instagram 暂时没有提供任何可靠的 Web 分享方式。

唯一可能有用的是,官方文档中提到的用于调起客户端功能的 iPhone Hooks —— 实际上就是深度链接(Deep Linking)。对于分享图片的场景,可以先引导用户保存图片,然后用深度链接唤醒 Instagram App,最后由用户手动选择图片发帖。

1
instagram://app

注意,经测试这些深度链接在 Android 设备上并不好使,很可能只在 iOS 平台实现。

分享到 WhatsApp

目前 WhatsApp 仅支持通过深度链接调起 App 的方式分享一段文本。幸运的是,我们可以把网页链接放在 text 中,分享后应用会依据开放图谱友好显示。

1
whatsapp://send?text={文本}

分享到 Line

Line 提供了 Social Plugins 用于分享网页,只需让用户跳转到一个链接。跳转后会唤醒 App 或者进入网页版 —— 取决于用户是否安装了客户端。

1
https://social-plugins.line.me/lineit/share?url={网页链接}

分享到 Facebook Messenger

Messenger App 提供了用于分享的深度链接,允许发送一个网页。

1
fb-messenger://share/?link={网页链接}