So posten Sie mit JavaScript einen Link mit Einbettungskarte auf Bluesky

Da Bluesky immer beliebter wird, werden immer mehr Tools rund um Bluesky entwickelt. Eine der beliebtesten Anwendungen ist die Postplanung und -automatisierung.

Allerdings bietet die API von Bluesky derzeit keine direkte Möglichkeit, Links mit OpenGraph-Karten zu posten. Dies kann eine Herausforderung für Benutzer sein, die Links mit attraktiven Vorschauen teilen möchten.

In diesem Tutorial zeigen wir Ihnen, wie Sie JavaScript verwenden, um mit einer Einbettungskarte einen Link auf Bluesky zu posten. Diese Methode umgeht die API-Beschränkung, sodass Sie Links effektiver teilen können.

Lasst uns anfangen!

Posten auf Bluesky mithilfe der JavaScript-API

Die Arbeit mit der Bluesky API ist ziemlich einfach. Die Dokumente sind ziemlich gut. Zuerst müssen wir das @atproto/api-Paket von NPM installieren:

npm install @atproto/api

Als nächstes erstellen wir eine Instanz des Bluesky Agent und melden uns mit Ihren Bluesky-Anmeldeinformationen an.

Ich empfehle, ein neues App-Passwort für Ihr Bluesky-Konto zu erstellen, anstatt Ihr Hauptpasswort zu verwenden. Dadurch wird es einfacher, den Zugriff bei Bedarf zu widerrufen und Ihr Hauptkonto zu schützen. Stellen Sie außerdem sicher, dass Sie in Ihrem Projekt die Umgebungsvariablen BLUESKY_USERNAME und BLUESKY_PASSWORD festlegen.

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
}

Sobald Sie den Agenten haben, können Sie damit auf Bluesky posten, was ziemlich einfach ist.

/**
 * 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 })
}

Und da haben Sie es, Sie haben gerade einen Beitrag an Bluesky gesendet. Selbst wenn Sie einen Link in den Text Ihres Beitrags einfügen, wird dieser leider nicht automatisch in einen Ankerlink umgewandelt. Wir werden das in Kürze beheben.

Facettierte Links auf Bluesky automatisch erkennen

Wenn Sie einen Link in Ihren Beitragstext auf Bluesky einfügen, wird dieser nicht automatisch in einen Ankerlink umgewandelt. Stattdessen erscheint es als einfacher Text.

Um dies zu beheben, müssen Sie die Links erkennen und in facettierte Links umwandeln.

Obwohl es manuelle Methoden gibt, um dies zu erreichen, bietet ATProto glücklicherweise eine RichText-Klasse, die Links automatisch erkennen und in facettierte Links umwandeln kann.

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,
  })
}

Das ist großartig, aber wir müssen dem Beitrag noch die Einbettungskarte hinzufügen. Machen wir das als nächstes.

Erstellen einer Einbettungskarte auf Bluesky

Das Einfügen eines Links in Ihren Beitrag ist großartig, aber noch besser ist es, wenn Sie eine Einbettungskarte hinzufügen können.

Um dies zu erreichen, müssen wir die Website-Karteneinbettungsfunktion von Bluesky verwenden. Im Wesentlichen fügen Sie Ihrem Beitrag einen Einbettungsschlüssel hinzu, der mindestens eine URL, einen Titel und eine Beschreibung enthält.

Es gibt mehrere Möglichkeiten, die erforderlichen Daten zu erhalten. Wenn Sie es zum Zeitpunkt der Veröffentlichung wissen, können Sie es einfach fest codieren. Andernfalls können Sie die URL durchsuchen, um Titel, Beschreibung und Bild zu erfassen.

Am einfachsten finde ich es jedoch, die Metatags-API von Dub.co zu verwenden, um die URL-Metadaten abzurufen und daraus dann die Einbettungskarte zu erstellen. Mal sehen, wie das funktioniert.

npm install @atproto/api

Wir haben eine einfache Funktion erstellt, die die URL-Metadaten abruft und die Daten dann in einem klaren Format zurückgibt.

Als nächstes erstellen wir eine Funktion, die die Metadaten verwendet, um das Bild auf Bluesky hochzuladen und dann die Einbettungskarte zu erstellen.

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
}

Sobald wir die Einbettungskarte haben, können wir sie dem Beitrag hinzufügen.

/**
 * 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 })
}

Jetzt haben wir eine Funktion, die einen Beitrag mit einer Einbettungskarte an Bluesky sendet.

Vollständiges Beispiel

Wenn Sie mitgemacht haben, sollten Sie jetzt hoffentlich über einen vollständigen Code verfügen. Wenn nicht, finden Sie hier den vollständigen Code, den Sie kopieren und in Ihr Projekt einfügen können. Es:

• Erstellt einen Bluesky-Agenten
• Ruft die URL-Metadaten ab
• Erstellt eine Einbettungskarte
• Sendet einen Beitrag mit der Einbettungskarte an Bluesky und erkennt automatisch facettierte Links

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,
  })
}

Ich hoffe, dass Sie dieses Tutorial hilfreich fanden und darüber nachdenken, es in Ihren eigenen Projekten zu verwenden.

Viel Spaß beim Posten!

Das obige ist der detaillierte Inhalt vonSo posten Sie mit JavaScript einen Link mit Einbettungskarte auf Bluesky. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!