前端使用Facebook和Line等分享

前端技术发表留言

前言

我们在做开发的时候，需要将自己开发的网页分享到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>The Rock (1996)</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

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、你去调用一下分享，发现在聊天的是窗口已经可以展示图片和文本了。

参考

留下回复