随着 bluesky 的不断流行，更多的工具正在围绕它开发。最流行的应用程序之一是后期调度和自动化。
但是，bluesky 的 api 目前不提供直接发布 opengraph 卡片链接的方法。对于想要共享具有有吸引力预览的链接的用户来说，这可能是一个挑战。
在本教程中，我们将向您展示如何使用 javascript 在 bluesky 上发布带有嵌入卡的链接。此方法可以解决 api 限制，让您更有效地共享链接。
让我们开始吧！
立即学习“Java免费学习笔记（深入）”；
使用 javascript api 在 bluesky 上发帖
使用 bluesky api 非常简单。文档非常好。首先，我们需要从 npm 安装 @atproto/api 包：
1
npm install @atproto/api
接下来，我们创建 bluesky agent 的实例并使用您的 bluesky 凭据登录。
我建议为您的 bluesky 帐户创建一个新的应用程序密码，而不是使用您的主密码。这将使您在需要时更容易撤销访问权限并确保您的主帐户安全。另请确保在项目中设置 bluesky_username 和 bluesky_password 环境变量。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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，这非常简单。
1
2
3
4
5
6
7
8
9
/**
* 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 类，可以自动检测链接并将其转换为分面链接。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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 元数据，然后从中创建嵌入卡。让我们看看它是如何工作的。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
type metadata = {
title: string
description: string
image: string
}
/**
* get the url metadata
* @param url - the url to get the metadata for
* @returns the metadata
*/
const geturlmetadata = async (url: string) => {
const req = await fetch(`https://api.dub.co/metatags?url=${url}`)
const metadata: metadata = await req.json()
return metadata
}
我们创建了一个简单的函数，用于获取 url 元数据，然后以清晰的格式返回数据。
接下来，让我们创建一个函数，使用元数据将图像上传到 bluesky，然后创建嵌入卡。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const getblueskyembedcard = async (url: string | undefined, agent: atpagent) => {
if (!url) return
try {
const metadata = await geturlmetadata(url)
const blob = await fetch(metadata.image).then(r => r.blob())
const { data } = await agent.uploadblob(blob, { encoding: "image/jpeg" })
return {
$type: "app.bsky.embed.external",
external: {
uri: url,
title: metadata.title,
description: metadata.description,
thumb: data.blob,
},
}
} catch (error) {
console.error("error fetching embed card:", error)
return
}
}
一旦我们有了嵌入卡，我们就可以将其添加到帖子中。
1
2
3
4
5
6
7
8
9
10
11
export const sendblueskypost = async (text: string, url?: string) => {
const agent = await getblueskyagent()
const rt = new richtext({ text })
await rt.detectfacets(agent)
await agent.post({
text: rt.text,
facets: rt.facets,
embed: await getblueskyembedcard(url, agent),
})
}
现在我们有一个功能，可以使用嵌入卡向 bluesky 发送帖子。
完整示例
希望，如果您已经按照说明进行操作，现在应该已经有了完整的代码。如果没有，这里是完整的代码，您可以将其复制并粘贴到您的项目中。它：
创建 bluesky 代理 获取 url 元数据 创建嵌入卡 使用嵌入卡向 bluesky 发送帖子并自动检测多面链接1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
import { AtpAgent, RichText } from "@atproto/api"
type Metadata = {
title: string
description: string
image: string
}
/**
* Get the URL metadata
* @param url - The URL to get the metadata for
* @returns The metadata
*/
const getUrlMetadata = async (url: string) => {
const req = await fetch(`https://api.dub.co/metatags?url=${url}`)
const metadata: Metadata = await req.json()
return metadata
}
/**
* Get the Bluesky embed card
* @param url - The URL to get the embed card for
* @param agent - The Bluesky agent
* @returns The embed card
*/
const getBlueskyEmbedCard = async (url: string | undefined, agent: AtpAgent) => {
if (!url) return
try {
const metadata = await getUrlMetadata(url)
const blob = await fetch(metadata.image).then(r => r.blob())
const { data } = await agent.uploadBlob(blob, { encoding: "image/jpeg" })
return {
$type: "app.bsky.embed.external",
external: {
uri: url,
title: metadata.title,
description: metadata.description,
thumb: data.blob,
},
}
} catch (error) {
console.error("Error fetching embed card:", error)
return
}
}
/**
* Get the Bluesky agent
* @returns The Bluesky agent
*/
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
* @param url - The URL to include in the post
*/
export const sendBlueskyPost = async (text: string, url?: string) => {
const agent = await getBlueskyAgent()
const rt = new RichText({ text })
await rt.detectFacets(agent)
await agent.post({
text: rt.text,
facets: rt.facets,
embed: await getBlueskyEmbedCard(url, agent),
})
}
我希望您发现本教程很有帮助，并且您会考虑在自己的项目中使用它。
发帖快乐！
以上就是如何使用 JavaScript 在 Bluesky 上发布带有嵌入卡的链接的详细内容，更多请关注php中文网其它相关文章！