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 Bluesky . 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.
Afortunadamente, la API de Bluesky 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.
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:
Analicemos cada función y su propósito:
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:
accessJwt
para llamadas API posteriorescreateSession
del ATP (Protocolo de transferencia autenticado) de Bluesky 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:
getActorLikes
para obtener las publicaciones que le gustan 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:
prettier
para formatear el HTML de manera uniforme<script>
por razones de seguridad y limpieza de la incrustación 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); } }
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:
accessJwt
si se utiliza en procesos de larga ejecuciónLa 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.
¡Que lo disfrutes y que disfrutes haciendo experimentos! 🚀