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.
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)
accessJwt
para llamadas API posteriores - Utiliza el punto final
createSession
del ATP (Protocolo de transferencia autenticado) de Bluesky - 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 el punto final
getActorLikes
para obtener las publicaciones que le gustan - 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 el punto final oEmbed de Bluesky con las URI de publicaciones para acceder al HTML integrable de una publicación
- Opcional: utiliza
prettier
para formatear el HTML de manera uniforme - Opcional: elimina las etiquetas
<script>
por razones de seguridad y limpieza de la incrustación- 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
accessJwt
si se utiliza en procesos de larga ejecución - 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! 🚀