乐趣区

关于前端:将web内容分享到twitter

将 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…
著作权归作者所有。商业转载请分割作者取得受权,非商业转载请注明出处。

退出移动版