如何使用 JavaScript 在 Bluesky 上發布帶有嵌入卡的鏈接

隨著 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中文網其他相關文章！