将 web 内容分享到 twitter
需要背景
公司为 数百万个用户 提供了年度报告的数据。因为不心愿更新 APP 版本,所以决定用 web 的模式展现在 APP 内,并且能够一键分享到 twitter。同时分享到 twitter 的内容须要生成 twitter 卡片,而且卡片的内容是动静生成的;以图片的模式分享。
技术调研
如何分享
依据 twitter-for-websites 材料得悉,分享到 twitter,是通过链接跳转的模式实现的。然而 携带过来的内容只能是字符串 。如果 携带的字符串蕴含一个非法 URL 的时候,twitter 就会开始剖析这个地址所指向的页面内容以生成卡片。
生成规定
依据 twitter-for-websites 下 card 的 getting-started 材料得悉,卡片的生成规定是辨认页面的 head 标签里非凡的 meta 配置。例如:
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@nytimesbits" />
<meta name="twitter:creator" content="@nickbilton" />
<meta property="og:url" content="http://bits.blogs.nytimes.com/2011/12/08/a-twitter-for-my-sister/" />
<meta property="og:title" content="A Twitter for My Sister" />
<meta property="og:description" content="In the early days, Twitter grew so quickly that it was almost impossible to add new features because engineers spent their time trying to keep the rocket ship from stalling." />
<meta property="og:image" content="http://graphics8.nytimes.com/images/2011/12/08/technology/bits-newtwitter/bits-newtwitter-tmagArticle.jpg" />
twiiter 辨认到的 meta 配置必须是动态的,也就是说用 js 动态创建的标签是有效的。
需要边界
卡片辨认出的图片是动静的,动静内容次要从 web 页面到图片的生成,最初到一个动静的 html 构造。如何解决图片就须要额定留神:
- 当工夫和估算都足够,能够依据用户活跃度的程序,为一定量的用户提前生成好图片。最初把大量的图片放到购买的云存储服务上
-
条件无限时,按需生成的图片须要思考服务器的负载状况
- 为了进步读取速度,服务器的存储是否足够
- 为了缓解存储压力,服务器的运行内存是否足够
开发调试
倡议配合 vercel 来校验生成的成果,把 vercel 赋予的域名粘贴到 twiiter 里即可。但须要留神,一旦 twitter 从一个域名地址里辨认到了生成卡片的配置,就会产生强缓存。只有地址变了,才会从新辨认,所以能够每次校验的时候给域名轻易增加一个参数即可。
具体实施
Web
<a href="https://twitter.com/intent/tweet?url=hello">share</a>
点击这个链接就会跳转到 twitter,并且会辨认出 url 字段的字符自动弹出表单填入
- 如果作为 webview 被嵌入到 app 里,并且手机也装置了 twitter,跳转时会主动关上 twitter 并填入 url 字段的字符
- 如果只是为了填入表单,不作卡片辨认,倡议用 text 字段
Server
上述的 url 的字段,须要指向一个服务端渲染的 html 页面,内容还是动静的。以 Express 为例
export const shareTwitter: RequestHandler = async (req, res) => {
const url = ''; // 点击 twitter 卡片时跳转的地址
const image = ''; // 卡片辨认到的图片地址
res.send(`<!DOCTYPE html>
<html lang="en">
<head>
<meta name="twitter:site" content="@xxx" />
<meta name="twitter:creator" content="@xxx" />
<meta property="og:url" content="${url}" />
<meta property="og:title" content="title" />
<meta property="og:image" content="${image}" />
<meta content="summary_large_image" name="twitter:card" />
</head>
<body>
</body>
</html>
`);
};
假如这个接口的申请地址为 https://xxx.com/api/shareTwitter,那么在 web 页面下就是
<a href="https://twitter.com/intent/tweet?url=https://xxx.com/api/shareTwitter">share</a>
留神为 a 标签的 href 作 URL 编码
这时跳转到 twitter 后,主动填入表单的就是一个服务端渲染的 html 页面了。
从 web 内容到图片的生成就另一个技术方向了,可供选择的计划有很多,比方 sharp、puppeteer 等等。笔者的做法是采纳的 sharp,因为 puppeteer 对内存的占用太大。即便如此,sharp 生成图片的单次申请,也会耗费几兆的内存。倡议应用 vercel 的 satori 工具,能够将 html 转换成 svg,对内存耗费更小,出现成果也更好。
作者:Alex
文章公布日期:2023-01-28 13:11
原文博客链接:https://alex-blog-site.vercel…
GitHub: https://github.com/Alex-Progr…
著作权归作者所有。商业转载请分割作者取得受权,非商业转载请注明出处。