Dowiedz się, jak programowo pobierać i osadzać polubione posty Bluesky, korzystając z uwierzytelniania, wywołań API i punktów końcowych oEmbed.
Niedawno przeszedłem na Bluesky . Mogę już potwierdzić, że istnieje tam prężnie działająca społeczność technologiczna z mnóstwem interesujących, przydatnych i inspirujących treści. Jestem szczęśliwym nowym użytkownikiem! W rezultacie chciałem osadzić moje najbardziej lubiane posty Bluesky w moich miesięcznych postach w biuletynie „Dev Roundup”. Moim celem jest dostarczenie wyselekcjonowanej listy postów Bluesky, która jest specjalnie dostosowana do programistów oprogramowania.
Na szczęście API Bluesky jest całkowicie darmowe, co pozwala na programowy dostęp do całej zawartości. Ten samouczek przeprowadzi Cię przez proces pobierania i osadzania polubionych postów Bluesky za pomocą ich API, co jest idealne dla osobistych blogów, portfolio lub projektów agregacji treści.
Zrozumienie mojego przepływu pracy API Bluesky
Zbudowałem skrypt, który pozwala mi automatycznie osadzać moje posty Bluesky w poście blogowym w formacie Markdown. Myślę, że wszystkie lub niektóre kroki użyte w tym skrypcie są cenne w wielu przypadkach użycia.
Podsumowując mój obieg pracy związany z osadzaniem polubionych postów, postępujemy zgodnie z poniższymi kluczowymi krokami:
- Utwórz uwierzytelnioną sesję
- Pobierz URI polubionych postów dla „aktora”
- Użyj tych URI, aby pobrać osadzony kod HTML oEmbed
- Wyczyść i sformatuj kod osadzania
Całkowita implementacja
Przyjrzyjmy się bliżej każdej funkcji i jej celowi:
1. Tworzenie sesji 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; } };
Najważniejsze informacje:
- Ta funkcja uwierzytelnia Twoje konto Bluesky.
- Uwaga: w tym przykładzie ciągi znaków dla poświadczeń są na stałe kodowane, jednak należy tego unikać w zastosowaniach produkcyjnych.
- Zwraca
accessJwt
JWT (JSON Web Token) dla kolejnych wywołań API - Używa punktu końcowego
createSession
z protokołu ATP (Authenticated Transfer Protocol) firmy Bluesky - Obsługa błędów zapewnia łagodne zakończenie awarii w przypadku niepowodzenia uwierzytelniania
2. Pobieranie URI polubionych postów
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; };
Najważniejsze informacje:
- Wymaga uwierzytelnionego tokena sesji
- Używa punktu
getActorLikes
do pobierania polubionych postów - Ważne — domeną punktu końcowego powinna być https://bsky.social, ponieważ jest to żądanie uwierzytelnione.
- Wyodrębnia unikalne identyfikatory URI dla każdego polubionego posta
- Limity do 40 postów (konfigurowalne)
3. Konwersja URI do osadzalnego HTML
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; } };
Najważniejsze informacje:
- Używa punktu końcowego oEmbed firmy Bluesky z adresami URI postów w celu uzyskania dostępu do osadzalnego kodu HTML posta
- Opcjonalnie: Użyj
prettier
, aby spójnie sformatować kod HTML - Opcjonalnie: usuwa znaczniki
<script>
w celu zapewnienia bezpieczeństwa i czystego osadzania- Powodem tego jest fakt, że osadzam pojedynczy skrypt Bluesky dla każdego wpisu zawierającego treść Bluesky.
- Elastyczna obsługa błędów
Łącząc wszystko w całość: kompletny przykład
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); } }
Potencjalne ulepszenia
To rozwiązanie sprawdza się w moim przypadku, ponieważ wszystko, czego potrzebuję, to statycznie generowany, miesięczny wpis na blogu.
Niektóre usprawnienia mogą obejmować:
- Dodaj obsługę paginacji w celu pobrania ponad 40 polubionych postów
- Wdróż buforowanie, aby ograniczyć liczbę niepotrzebnych wywołań API
- Utwórz bardziej niezawodny mechanizm obsługi błędów
- Tworzenie mechanizmu odświeżania tokena
accessJwt
, jeśli jest używany w długotrwałych procesach - Sortowanie polubionych postów według popularności (polubień)
Porady dotyczące rozwiązywania problemów
- Sprawdź, czy Twoje dane uwierzytelniające Bluesky są poprawne
- Sprawdź, czy token nośnika jest prawidłowo ustawiany w uwierzytelnianych żądaniach.
- Sprawdź, czy wszystkie używane domeny punktów końcowych są prawidłowe.
Wniosek
Osadzanie postów Bluesky zapewnia dynamiczny sposób prezentowania interakcji w mediach społecznościowych. Dzięki zrozumieniu przepływu pracy API i wdrożeniu solidnej obsługi błędów możesz tworzyć angażujące, spersonalizowane i starannie dobrane integracje treści.
Następne kroki
- Eksperymentuj z kodem
- Dostosuj styl osadzania
- Poznaj dodatkowe punkty końcowe interfejsu API Bluesky
Miłej zabawy i udanego majsterkowania! 🚀