分享链接的结构化展示

目录

1. 背景

2. 实现方案

2.1 TikTok:

2.2 YouTube :

2.3 Facebook :

3. 其它问题

3.1 TikTok短链无法获取embed信息

3.2 TikTok缩略图过期

3.3 Facebook视频过期

4. 参考资料


1. 背景

        最近在做即时通信IM相关的内容,有一个需求是分享链接的结构化展示,就是当用户发一条URL链接的时候,解析出URL的大概信息并展示出来。如下图,我在slack平台上发一条链接:

https://www.facebook.com/watch/live?ref=watch_permalink&v=556810805847482

 发出去之后会展示下面这样,相当于链接所指页面的预览。如果不解析的话,消息就是一条普通文本,如图2:

图1. 结构化消息
图2. 普通文本消息

显然,结构化消息展示的信息更全面、更丰富,用户无需点击链接跳转就能够知道链接的内容。

        我们业务的需求是解析TikTok、Facebook、YouTube 三家的链接,经过一番调研之后,找到了两种实现方案:

        方案1:调用平台的开发者接口获取embed信息展示。

        方案2: 爬取链接页面的OG标签对应信息来展示。

2. 实现方案

          在介绍方案具体实现之前,可以先看下效果:

TikTok效果图:

图3. Tik Tok链接

Facebook效果图: 

图4. Facebook 链接

YouTube效果图 

图5. YouTube 链接

        下面详细介绍下这三个平台的具体实现方案:

2.1 TikTok

        TikTok 链接结构化信息是通过请求TikTok开发者平台API接口获取,接口比较简单,将TikTok链接当做参数传入,可以拿到链接类型、标题、作者名,embed html、缩略图、缩略图宽高等。

图5. TikTok 开发者平台

 使用Postman请求接口:

图6. Postman请求Tiktok api

2.2 YouTube 

        YouTube 的结构化信息获取和TikTok类似,都是调用开发者api获取的。这里我实现的方案是先获取链接里的视频ID,然后再调用YouTubeAPI获取视频信息,如图7所示,通过video api可以拿到视频的title、description、channel title、缩略图以及宽高、embed html。另外为了拿到发布者的头像,还额外调用了channel 的api 获取channel信息。另外YouTube api调用需要申请开发者账号,使用账号新建应用,然后将应用的key当做api传参传入。

图7. YouTube api
// youtube api
https://developers.google.com/youtube/v3/docs/videos/list

2.3 Facebook 

        和YouTube一样,Facebook也有自己的开发者平台,也提供了api获取embed信息,只不过这个api需要审核,考虑到审核的时间成本以及复杂度,我使用了另外一种方案来获取URL链接结构化信息,即OG标签,og标签指的是html head头域里面的og标签,实际上还有个OG协议,这个协议是由facebook于2010年提出的,专门用于分享链接的结构化展示,关于og协议说明,可以参考这个链接,下图8是我使用Postman 发送http Get请求返回的html文档,可以看到http头域中有og:title, og:description, og:url、og:image、og:video等,在代码里使用了开源的golang colly爬虫爬取页面信息。

图8. Facebook 请求
图9. Golang Colly 爬取页面

3. 其它问题

3.1 TikTok短链无法获取embed信息

TikTok链接分为两种,一种是短链另一种长链

短链:
https://vt.tiktok.com/ZSRdf9w6k/
长链:
https://www.tiktok.com/@lolies_haven/video/7117150232458038530?enter_from=video_detail%26is_copy_url=1%26is_from_webapp=v1

使用短链请求emebed信息会提示错误 :

图10. TikTok短链请求报错

我这里的处理方案是先通过http请求短链,在http响应头域中拿到Location地址,然后根据这个重定向地址去请求emebed信息。

3.2 TikTok缩略图过期

        通过TikTok api 获取的缩略图是带有过期时间的,过期后就无法打开,如下图11,针对这种情况,我的处理方案是转存图片,通过TikTok API拿到缩略图信息后,下载下来转存到我们业务自己的存储上,然后提供自己的访问URL来避免图片过期问题。

图11. TikTok缩略图过期

3.3 Facebook视频过期

        和TikTok缩略图过期类似,Facebook og:video也有过期时间,针对这种场景就没办法转存了,这里我们业务的处理方案是当用户点击播放按钮的时候,前端会调后台接口获取最新的播放链接从而规避这个问题。

4. 参考资料:

1. 前端应该知道的:开放图谱协议(The Open Graph protocol)

2. TikTok embed api 

3. YouTube video api

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值