Aprenda a obtener e incrustar de manera programada sus publicaciones de Bluesky favoritas mediante autenticación, llamadas API y puntos finales oEmbed. Hace poco me pasé a . Ya puedo confirmar que existe una comunidad tecnológica vibrante allí con toneladas de contenido interesante, útil e inspirador. ¡Soy un nuevo usuario feliz! Como resultado, he querido incorporar mis publicaciones favoritas de Bluesky en las publicaciones de mi boletín mensual "Resumen de desarrolladores". Mi objetivo es proporcionar una lista seleccionada de publicaciones de Bluesky que esté diseñada específicamente para desarrolladores de software. Bluesky Afortunadamente, es completamente gratuita, lo que permite el acceso programático a todo el contenido. Este tutorial te guiará a través del proceso de recuperación e incorporación de publicaciones de Bluesky que te gusten mediante su API, lo que resulta perfecto para blogs personales, portafolios o proyectos de agregación de contenido. la API de Bluesky Comprender el flujo de trabajo de la API de Bluesky He creado un script que me permite insertar automáticamente mis publicaciones de Bluesky en una publicación de blog en formato Markdown. Creo que cualquiera o todos los pasos utilizados en este script son valiosos para muchos casos de uso. Para resumir mi flujo de trabajo para insertar publicaciones que me gustan, seguimos estos pasos clave: Crear una sesión autenticada Recuperar las URL de las publicaciones que me gustaron de un "actor" Utilice estas URI para obtener HTML incrustado de oEmbed Limpiar y formatear el código de inserción La implementación completa Analicemos cada función y su propósito: 1. Creación de una sesión Bluesky export const createSession = async (): Promise<string | null> => { try { const response = await fetch( "https://bsky.social/xrpc/com.atproto.server.createSession", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ identifier: "your-handle", password: "your-password", }), } ); const responseJson = await response.json(); return responseJson.accessJwt; } catch (e) { console.error("Failed to create session: ", e); return null; } }; Ideas clave: Esta función autentica su cuenta Bluesky. Nota: este ejemplo codifica cadenas para credenciales, pero esto debe evitarse en casos de uso de producción. Devuelve un JWT (JSON Web Token) para llamadas API posteriores accessJwt Utiliza el punto final del ATP (Protocolo de transferencia autenticado) de Bluesky createSession El manejo de errores garantiza un fallo sin problemas si falla la autenticación 2. Recuperación de las URL de publicaciones que me gustan export const getBlueskyLikeUris = async (actor: string, limit: number = 40) => { const token = await createSession(); if (!token) { console.error("Failed to get token"); return; } const response = await fetch( "https://bsky.social/xrpc/app.bsky.feed.getActorLikes?actor=${actor}&limit=${limit}", { method: "GET", headers: { Authorization: `Bearer ${token}`, }, } ); const responseJson = await response.json(); const uris = responseJson.feed.map((entry: any) => entry.post.uri); return uris; }; Ideas clave: Requiere un token de sesión autenticado Utiliza punto final para obtener las publicaciones que le gustan el getActorLikes Importante: el dominio del punto final debe ser https://bsky.social, ya que esta es una solicitud autenticada. Extrae URL únicas para cada publicación que te gusta Límite de 40 publicaciones (configurable) 3. Conversión de URI a HTML integrable export const getBlueskyPostEmbedMarkup = async (uri: string) => { try { const response = await fetch(`https://embed.bsky.app/oembed?url=${uri}`); const responseJson = await response.json(); const formattedHTML = prettier.format(responseJson.html, { parser: "html", plugins: [require("prettier/parser-html")], htmlWhitespaceSensitivity: "ignore", printWidth: 1000, }); return formattedHTML.replace(/<script[\s\S]*?<\/script>/g, ""); } catch (e) { console.error("Failed to get Bluesky post embed markup"); return null; } }; Ideas clave: Utiliza con las URI de publicaciones para acceder al HTML integrable de una publicación el punto final oEmbed de Bluesky Opcional: utiliza para formatear el HTML de manera uniforme prettier Opcional: elimina las etiquetas por razones de seguridad y limpieza de la incrustación <script> La razón de esto es que inserto un único script de Bluesky para cada publicación que contiene contenido de Bluesky. Manejo flexible de errores Poniéndolo todo junto: un ejemplo completo async function embedLikedPosts() { try { // Get liked post URIs const likedPostUris = await getBlueskyLikeUris(); if (!likedPostUris) { console.error("No liked posts found"); return; } // Convert URIs to embed HTML const embedPromises = likedPostUris.map(getBlueskyPostEmbedMarkup); const embedHtmlArray = await Promise.all(embedPromises); // Filter out any failed embeds const validEmbeds = embedHtmlArray.filter(embed => embed !== null); // Return the markup for all liked posts return ` ## Some Fave Posts 🦋 ${validEmbeds.join(`\n\n`)} ` } catch (error) { console.error("Error embedding Bluesky posts:", error); } } Mejoras potenciales Esta solución funciona para mí porque todo lo que necesito es una publicación de blog generada estáticamente mensualmente. Algunas mejoras podrían incluir: Agregue soporte de paginación para obtener más de 40 publicaciones con me gusta Implementar el almacenamiento en caché para reducir llamadas API innecesarias Crear un mecanismo de gestión de errores más robusto Creación de un mecanismo para actualizar el token si se utiliza en procesos de larga ejecución accessJwt Ordenar las publicaciones que me gustan por popularidad (me gusta) Consejos para la solución de problemas Verifique que sus credenciales de Bluesky sean correctas Verifique que el token Bearer se esté configurando correctamente en sus solicitudes autenticadas. Verifique que los dominios de punto final que está utilizando sean todos válidos. Conclusión La incorporación de publicaciones de Bluesky proporciona una forma dinámica de mostrar sus interacciones en las redes sociales. Si comprende el flujo de trabajo de la API e implementa un manejo sólido de errores, puede crear integraciones de contenido atractivas, personalizadas y seleccionadas. Próximos pasos Experimenta con el código Personalizar el estilo de incrustación Explorar puntos finales adicionales de la API de Bluesky ¡Que lo disfrutes y que disfrutes haciendo experimentos! 🚀
