Cara menyiarkan pautan dengan kad benam pada Bluesky dengan JavaScript

Memandangkan Bluesky terus mendapat populariti, lebih banyak alatan sedang dibangunkan di sekelilingnya. Salah satu aplikasi yang paling popular ialah penjadualan pos dan automasi.

Walau bagaimanapun, API Bluesky pada masa ini tidak menawarkan cara langsung untuk menyiarkan pautan dengan kad OpenGraph. Ini boleh menjadi cabaran bagi pengguna yang ingin berkongsi pautan dengan pratonton yang menarik.

Dalam tutorial ini, kami akan menunjukkan kepada anda cara menggunakan JavaScript untuk menyiarkan pautan di Bluesky dengan kad benam. Kaedah ini berfungsi mengikut had API, membolehkan anda berkongsi pautan dengan lebih berkesan.

Jom mulakan!

Menyiarkan pada Bluesky menggunakan API JavaScript

Bekerja dengan Bluesky API agak mudah. Dokumennya cukup bagus. Mula-mula, kita perlu memasang pakej @atproto/api daripada NPM:

npm install @atproto/api

Seterusnya, kami mencipta contoh Ejen Bluesky dan log masuk menggunakan bukti kelayakan Bluesky anda.

Saya mengesyorkan membuat Kata Laluan Apl baharu untuk akaun Bluesky anda, dan bukannya menggunakan kata laluan utama anda. Ini akan memudahkan anda membatalkan akses jika perlu dan memastikan akaun utama anda selamat. Juga pastikan anda menetapkan pembolehubah persekitaran BLUESKY_USERNAME dan BLUESKY_PASSWORD dalam projek anda.

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
}

Sebaik sahaja anda mempunyai ejen, anda boleh menggunakannya untuk menghantar ke Bluesky yang agak mudah.

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

Dan begitulah, anda baru sahaja menghantar pos ke Bluesky. Malangnya, walaupun anda memasukkan pautan dalam teks siaran anda, ia tidak ditukar secara automatik menjadi pautan utama. Kami akan membetulkannya sebentar lagi.

Kesan Pautan Bersegi pada Bluesky Secara Automatik

Apabila anda menyertakan pautan dalam teks siaran anda di Bluesky, ia tidak bertukar menjadi pautan utama secara automatik. Sebaliknya, ia muncul sebagai teks biasa.

Untuk membetulkannya, anda perlu mengesan pautan dan menukarnya menjadi pautan bermuka.

Walaupun terdapat kaedah manual untuk mencapai ini, mujurlah, ATProto menyediakan kelas RichText yang boleh mengesan pautan secara automatik dan menukarnya menjadi pautan bermuka.

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

Itu bagus, tetapi kami masih perlu menambahkan kad benam pada siaran. Jom buat seterusnya.

Mencipta Kad Benam pada Bluesky

Memasukkan pautan dalam siaran anda adalah bagus, tetapi lebih baik jika anda boleh menambah kad benam.

Untuk mencapai matlamat ini, kita perlu menggunakan ciri benam kad Laman Web Bluesky. Pada asasnya, anda menambah kunci benam pada siaran anda yang mengandungi, sekurang-kurangnya, URL, tajuk dan perihalan.

Terdapat beberapa cara untuk mendapatkan data yang diperlukan. Jika anda mengetahuinya semasa menyiarkannya, anda boleh mengekodkannya dengan mudah. Jika tidak, anda boleh mengikis URL untuk mengumpulkan tajuk, penerangan dan imej.

Walau bagaimanapun, saya dapati cara paling mudah ialah menggunakan Dub.co Metatags API untuk mengambil metadata URL dan kemudian mencipta kad benam daripada itu. Mari lihat bagaimana ia berfungsi.

npm install @atproto/api

Kami mencipta fungsi mudah yang mengambil metadata URL dan kemudian mengembalikan data dalam format yang jelas.

Seterusnya, mari buat fungsi yang menggunakan metadata untuk memuat naik imej ke Bluesky dan kemudian buat kad benam.

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
}

Setelah kami mempunyai kad benam, kami boleh menambahkannya pada siaran.

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

Kini kami mempunyai fungsi yang menghantar siaran ke Bluesky dengan kad benam.

Contoh Lengkap

Semoga, jika anda telah mengikutinya, anda sepatutnya mempunyai kod yang lengkap sekarang. Jika tidak, berikut ialah kod lengkap yang boleh anda salin dan tampal ke dalam projek anda. Ia:

• Mencipta ejen Bluesky
• Mengambil metadata URL
• Mencipta kad benam
• Menghantar siaran ke Bluesky dengan kad benam dan mengesan pautan bermuka secara automatik

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

Saya harap anda mendapati tutorial ini membantu dan anda akan mempertimbangkan untuk menggunakannya dalam projek anda sendiri.

Selamat mengepos!

Atas ialah kandungan terperinci Cara menyiarkan pautan dengan kad benam pada Bluesky dengan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!