隨著 Bluesky 的不斷流行，更多的工具正在圍繞它開發。最受歡迎的應用程式之一是後期調度和自動化。
但是，Bluesky 的 API 目前不提供直接發布 OpenGraph 卡片連結的方法。對於想要共享具有有吸引力預覽的連結的用戶來說，這可能是一個挑戰。
在本教程中，我們將向您展示如何使用 JavaScript 在 Bluesky 上發布帶有嵌入卡的連結。此方法可以解決 API 限制，讓您更有效地分享連結。
讓我們開始吧！
使用 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 上的帖子文字中包含連結時，它不會自動轉換為錨連結。相反，它顯示為純文字。
要解決此問題，您需要偵測連結並將其轉換為分面連結。
雖然有手動方法可以實現這一點，但幸運的是，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 的網站卡片嵌入功能。本質上，您會為貼文添加一個嵌入金鑰，其中至少包括 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 發送貼文。
希望，如果您已經按照說明進行操作，現在應該已經有了完整的程式碼。如果沒有，這裡是完整的程式碼，您可以將其複製並貼上到您的專案中。它：
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中文網其他相關文章！
