JavaScript를 사용하여 Bluesky에 삽입 카드가 포함된 링크를 게시하는 방법

Bluesky가 계속 인기를 얻으면서 이를 중심으로 더 많은 도구가 개발되고 있습니다. 가장 인기 있는 애플리케이션 중 하나는 사후 스케줄링 및 자동화입니다.

그러나 Bluesky의 API는 현재 OpenGraph 카드를 사용하여 링크를 게시하는 직접적인 방법을 제공하지 않습니다. 이는 매력적인 미리보기가 포함된 링크를 공유하려는 사용자에게는 어려울 수 있습니다.

이 튜토리얼에서는 JavaScript를 사용하여 삽입 카드를 사용하여 Bluesky에 링크를 게시하는 방법을 보여 드리겠습니다. 이 방법은 API 제한을 해결하여 링크를 보다 효과적으로 공유할 수 있게 해줍니다.

시작해 보세요!

JavaScript API를 사용하여 Bluesky에 게시

Bluesky API 작업은 매우 간단합니다. 문서는 꽤 좋습니다. 먼저 NPM에서 @atproto/api 패키지를 설치해야 합니다.

npm install @atproto/api

다음으로 Bluesky 에이전트 인스턴스를 생성하고 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에서 Embed 카드 만들기

게시물에 링크를 포함하는 것도 좋지만 삽입 카드를 추가할 수 있다면 더 좋습니다.

이를 달성하려면 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!