Comment publier un lien avec une carte intégrée sur Bluesky avec JavaScript

Alors que Bluesky continue de gagner en popularité, de plus en plus d'outils sont développés autour de lui. L'une des applications les plus populaires est la planification et l'automatisation des publications.

Cependant, l'API de Bluesky n'offre actuellement pas de moyen direct de publier des liens avec des cartes OpenGraph. Cela peut être un défi pour les utilisateurs qui souhaitent partager des liens avec des aperçus attrayants.

Dans ce tutoriel, nous allons vous montrer comment utiliser JavaScript pour publier un lien sur Bluesky avec une carte intégrée. Cette méthode contourne la limitation de l'API, vous permettant de partager des liens plus efficacement.

Commençons !

Publication sur Bluesky à l'aide de l'API JavaScript

Travailler avec l'API Bluesky est assez simple. Les docs sont plutôt bons. Tout d'abord, nous devons installer le package @atproto/api de NPM :

npm install @atproto/api

Ensuite, nous créons une instance de l'agent Bluesky et nous nous connectons avec vos informations d'identification Bluesky.

Je recommande de créer un nouveau mot de passe d'application pour votre compte Bluesky, plutôt que d'utiliser votre mot de passe principal. Cela facilitera la révocation de l'accès si nécessaire et garantira la sécurité de votre compte principal. Assurez-vous également de définir les variables d'environnement BLUESKY_USERNAME et BLUESKY_PASSWORD dans votre projet.

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
}

Une fois que vous avez l'agent, vous pouvez l'utiliser pour publier sur Bluesky, ce qui est assez simple.

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

Et voilà, vous venez d'envoyer un post à Bluesky. Malheureusement, même si vous incluez un lien dans le texte de votre message, il n'est pas automatiquement converti en lien d'ancrage. Nous allons résoudre ce problème sous peu.

Détecter automatiquement les liens à facettes sur Bluesky

Lorsque vous incluez un lien dans le texte de votre message sur Bluesky, il n'est pas automatiquement transformé en lien d'ancrage. Au lieu de cela, il apparaît sous forme de texte brut.

Pour résoudre ce problème, vous devez détecter les liens et les convertir en liens à facettes.

Bien qu'il existe des méthodes manuelles pour y parvenir, heureusement, ATProto fournit une classe RichText qui peut détecter automatiquement les liens et les convertir en liens à facettes.

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

C'est super, mais nous devons quand même ajouter la carte intégrée à la publication. Faisons-le ensuite.

Création d'une carte intégrée sur Bluesky

Inclure un lien dans votre message, c'est bien, mais c'est encore mieux si vous pouvez ajouter une carte intégrée.

Pour y parvenir, nous devons utiliser la fonctionnalité d'intégration de carte de site Web de Bluesky. Essentiellement, vous ajoutez une clé d'intégration à votre publication qui comprend, au minimum, une URL, un titre et une description.

Il existe plusieurs façons d'obtenir les données requises. Si vous le connaissez au moment de la publication, vous pouvez simplement le coder en dur. Sinon, vous pouvez récupérer l'URL pour récupérer le titre, la description et l'image.

Cependant, je trouve que le moyen le plus simple est d'utiliser l'API Dub.co Metatags pour récupérer les métadonnées de l'URL, puis de créer la carte intégrée à partir de celles-ci. Voyons comment cela fonctionne.

npm install @atproto/api

Nous avons créé une fonction simple qui récupère les métadonnées de l'URL, puis renvoie les données dans un format clair.

Ensuite, créons une fonction qui utilise les métadonnées pour télécharger l'image sur Bluesky, puis créons la carte intégrée.

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
}

Une fois que nous avons la carte intégrée, nous pouvons l'ajouter à la publication.

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

Nous avons maintenant une fonction qui envoie un message à Bluesky avec une carte intégrée.

Exemple complet

J'espère que si vous avez suivi, vous devriez maintenant avoir un code complet. Sinon, voici le code complet que vous pouvez copier et coller dans votre projet. Il :

• Crée un agent Bluesky
• Récupère les métadonnées de l'URL
• Crée une carte intégrée
• Envoie une publication à Bluesky avec la carte intégrée et détecte automatiquement les liens à facettes

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

J'espère que vous avez trouvé ce tutoriel utile et que vous envisagerez de l'utiliser dans vos propres projets.

Bonne publication !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!