首页 > web前端 > js教程 > 如何使用 JavaScript 在 Bluesky 上发布带有嵌入卡的链接

如何使用 JavaScript 在 Bluesky 上发布带有嵌入卡的链接

Susan Sarandon
发布: 2024-12-22 10:54:11
原创
259 人浏览过

How to post a link with embed card on Bluesky with JavaScript

随着 Bluesky 的不断流行,更多的工具正在围绕它开发。最流行的应用程序之一是后期调度和自动化。

但是,Bluesky 的 API 目前不提供直接发布 OpenGraph 卡片链接的方法。对于想要共享具有有吸引力预览的链接的用户来说,这可能是一个挑战。

在本教程中,我们将向您展示如何使用 JavaScript 在 Bluesky 上发布带有嵌入卡的链接。此方法可以解决 API 限制,让您更有效地共享链接。

让我们开始吧!

使用 JavaScript API 在 Bluesky 上发帖

使用 Bluesky API 非常简单。文档非常好。首先,我们需要从 NPM 安装 @atproto/api 包:

npm install @atproto/api
登录后复制
登录后复制

接下来,我们创建 Bluesky Agent 的实例并使用您的 Bluesky 凭据登录。

我建议为您的 Bluesky 帐户创建一个新的应用程序密码,而不是使用您的主密码。这将使您在需要时更容易撤销访问权限并确保您的主帐户安全。另请确保在项目中设置 BLUESKY_USERNAME 和 BLUESKY_PASSWORD 环境变量。

import { AtpAgent } from "@atproto/api"

const getBlueskyAgent = async () => {
  const agent = new AtpAgent({
    service: "https://bsky.social",
  })

  await agent.login({
    identifier: process.env.BLUESKY_USERNAME!,
    password: process.env.BLUESKY_PASSWORD!,
  })

  return agent
}
登录后复制
登录后复制

一旦你有了代理,你就可以用它来发布到 Bluesky,这非常简单。

/**
 * Send a post to Bluesky
 * @param text - The text of the post
 */
export const sendBlueskyPost = async (text: string, url?: string) => {
  const agent = await getBlueskyAgent()

  await agent.post({ text })
}
登录后复制
登录后复制

就这样,您刚刚向 Bluesky 发送了一条帖子。不幸的是,即使您在帖子的文本中包含链接,它也不会自动转换为锚链接。我们很快就会解决这个问题。

自动检测 Bluesky 上的分面链接

当您在 Bluesky 上的帖子文本中包含链接时,它不会自动转换为锚链接。相反,它显示为纯文本。

要解决此问题,您需要检测链接并将其转换为分面链接。

虽然有手动方法可以实现这一点,但幸运的是,ATProto 提供了一个 RichText 类,可以自动检测链接并将其转换为分面链接。

import { RichText } from "@atproto/api"

/**
 * Send a post to Bluesky
 * @param text - The text of the post
 */
export const sendBlueskyPost = async (text: string) => {
  const agent = await getBlueskyAgent()
  const rt = new RichText({ text })
  await rt.detectFacets(agent)

  await agent.post({
    text: rt.text,
    facets: rt.facets,
  })
}
登录后复制
登录后复制

那太好了,但我们仍然需要将嵌入卡添加到帖子中。接下来我们就开始吧。

在 Bluesky 上创建嵌入卡

在帖子中包含链接固然很棒,但如果您可以添加嵌入卡就更好了。

为了实现这一点,我们需要使用 Bluesky 的网站卡片嵌入功能。本质上,您向帖子添加一个嵌入密钥,其中至少包括 URL、标题和描述。

有多种方法可以获得所需的数据。如果您在发布时知道它,则可以简单地对其进行硬编码。否则,您可以抓取 URL 以收集标题、描述和图像。

但是,我发现最简单的方法是使用 Dub.co Metatags API 获取 URL 元数据,然后从中创建嵌入卡。让我们看看它是如何工作的。

npm install @atproto/api
登录后复制
登录后复制

我们创建了一个简单的函数,用于获取 URL 元数据,然后以清晰的格式返回数据。

接下来,让我们创建一个函数,使用元数据将图像上传到 Bluesky,然后创建嵌入卡。

import { AtpAgent } from "@atproto/api"

const getBlueskyAgent = async () => {
  const agent = new AtpAgent({
    service: "https://bsky.social",
  })

  await agent.login({
    identifier: process.env.BLUESKY_USERNAME!,
    password: process.env.BLUESKY_PASSWORD!,
  })

  return agent
}
登录后复制
登录后复制

一旦我们有了嵌入卡,我们就可以将其添加到帖子中。

/**
 * Send a post to Bluesky
 * @param text - The text of the post
 */
export const sendBlueskyPost = async (text: string, url?: string) => {
  const agent = await getBlueskyAgent()

  await agent.post({ text })
}
登录后复制
登录后复制

现在我们有一个功能,可以使用嵌入卡向 Bluesky 发送帖子。

完整示例

希望,如果您已经按照说明进行操作,现在应该已经有了完整的代码。如果没有,这里是完整的代码,您可以将其复制并粘贴到您的项目中。它:

  • 创建 Bluesky 代理
  • 获取 URL 元数据
  • 创建嵌入卡
  • 使用嵌入卡向 Bluesky 发送帖子并自动检测多面链接
import { RichText } from "@atproto/api"

/**
 * Send a post to Bluesky
 * @param text - The text of the post
 */
export const sendBlueskyPost = async (text: string) => {
  const agent = await getBlueskyAgent()
  const rt = new RichText({ text })
  await rt.detectFacets(agent)

  await agent.post({
    text: rt.text,
    facets: rt.facets,
  })
}
登录后复制
登录后复制

我希望您发现本教程很有帮助,并且您会考虑在自己的项目中使用它。

发帖快乐!

以上是如何使用 JavaScript 在 Bluesky 上发布带有嵌入卡的链接的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板