前言
我们在做开发的时候，需要将自己开发的网页分享到facebook、telegram、line等页面。然后需要在分享到的社交软件或者是朋友圈的时候，展示一些和链接相关的文案和图片（也就是富媒体展示）。在国内的一些社交网站上可以调用SDK或者url使用传递参数的方式来展示分享的内容。
方案
一、生成数据源
社交平台获取链接相关的信息时，一般都是通过抓取链接响应的meta标签来实现的（可以理解成我们使用ajax读取了我们传递的url的页面的信息，然后解析html结构读取meta标签上的配置信息）。
因为不是在浏览器中运行，所以meta标签的数据在服务器端获取的时候就需要生成，不能抓取js来生成meta标签。meta标签分享的配置有一个协议（facebook制定的，很常用的三方社交网站支持这个协议），下面说一下这个协议。
OG协议首页：http://ogp.me/
我们最常用的字段如下（此处不多做介绍，可以使用上面的链接自行查询API）：
<html prefix="og: http://ogp.me/ns#">
<head>
<title>分享测试</title>
<!-- 显示在分享上的title，一般是显示在第一行 -->
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="article" />
<!-- 显示在分享上的描述信息，一般是显示在第二行的小字 -->
<meta property="og:description" content="该网页的描述" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>
下面有两种方式可以定制分享的内容：
1、使用静态的meta标签；
简单来讲就是，将所有的数据写死在html文件head里面，这样的坏处就是不能根据内容来定制自己展示的样式，比较不常用，常见的方式是作为网站的宣传来分享使用，对于内容固定的场景。
2、使用后端语言生成meta标签；
也算是服务端渲染的一个场景吧，就是根据我们传递的数据让后端动态生成图片文本等资源，这样做的好处就是显示的内容由用户定义，比较灵活；缺点是需要服务端的辅助，前端是实现不了的。还有部分三方应用并不支持动态的资源定义，就像telegram的分享，只能注册过的链接才会富媒体展示。
二、实现分享
1、facebook分享方式
facebook分享的时候需要在meta里面配置开发这id，详细：
使用SDK的方式（推荐）
A、首先我们要加载facebook的sdk，加载方式：
https://developers.facebook.com/docs/javascript/quickstart
developers.facebook.com/docs/javascript/quickstart
window.fbAsyncInit = function() {
// 到这里就说明FB加载成功了，这里我们一般会以事件的形式通知调用者来调用
FB.init({
appId : 'your-app-id',
autoLogAppEvents : true,
xfbml : true,
version : 'v3.0'
});
// 这里我做一个基于jq的事件通知
$('window').trigger('fbSdkLoaded');
window.fb = FB;
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
B、我们配置一下我们要分享的页面的meta标签：
<meta property="og:site_name" content="这里是title" />
<meta property="og:title" content="这里也是title" />
<meta property="og:url" content="点击以后要跳转的地址"/>
<meta property="og:description" content="这里是分享的描述文件" />
<meta property="og:image" content="这里是图片的地址" />
<meta property="fb:app_id" content="这里是fb的开发者id"/>
C、开始分享我们的链接：https://developers.facebook.com/docs/sharing/reference/share-dialog，下面就封装一个分享的方法：
function share() {
function handle() {
// 这个方法的参数可以看上面的链接，不一定向下面的这样写。
FB.ui({
method: 'share_open_graph',
action_type: 'og.likes',
action_properties: JSON.stringify({
object:'https://developers.facebook.com/docs/',
})
}, function(response){});
}
if (window.fb) {
handle();
} else {
// 如果没有加载成功，需要监听事件
$(window).on('fbSdkLoaded', handle);
}
}
使用链接的方式（也需要配置meta标签，同上）
A、直接将location.href导向分享地址即可（注意里面的href需要使用encodeURIComponent方法转一下），在这里还是推荐使用SDK的方式分享。
https://www.facebook.com/dialog/share?
app_id=145634995501895
&display=popup
&href=你要分享给别人的地址
&redirect_uri=分享成功后需要跳转的地址
2、line分享方式
使用链接的方式
A、我们先在要分享的页面加上meta的信息，这个不需要开发者id，例子：
<meta property="og:title" content="显示的title信息"/>
<meta property="og:description" content="描述信息"/>
<meta property="og:image" content="图片的地址"/>
<meta property="og:url" content="点击以后要跳转的地址"/>
<meta property="og:type" content="article">
B、这个比较简单，在分享的链接中配置好meta元数据后，直接使用链接就能实现分享到timeline或者好友群组等。下面是分享的链接：
https://social-plugins.line.me/lineit/share?url=${encodeURIComponent(location.href)}
3、telegram分享方式
使用链接和机器人注册的方式
也是通过链接分享的，但是如果需要该链接富媒体展示，需要在机器人做注册（机器人注册时基于链接的，如果链接修改了，就不能显示富媒体了，即使参数和hash修改都会导致显示富媒体失败）。
A、去机器人注册一下你要分享的链接（机器人地址：https://t.me/webpagebot）;
B、分享链接：https://t.me/share/url?url=你要分享的URL;
C、你去调用一下分享，发现在聊天的是窗口已经可以展示图片和文本了。
参考
- Open Graph protocol
- https://telegram.wiki/general/website-sharing
- https://telegram.wiki/general/link-previews
- https://social-plugins.line.me/zh_TW/how_to_install
- https://developers.facebook.com/docs/sharing/reference/share-dialog
- https://developers.line.me/en/faq/
- How to force telegram to update link preview?
- Meta Property之Open Graph Protocol（开放内容协议）
