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

参考

推荐阅读更多精彩内容