···11+---
22+title: "Showing Likes using Bluesky"
33+description: "how to show likes on your blog posts using bluesky"
44+pubDate: "Nov 22 2024"
55+published: true
66+heroImage: "/src/assets/blog-placeholder-3.jpg"
77+tags: ["setup"]
88+---
99+1010+You can show likes on your blog posts using bluesky.
1111+1212+## How it works
1313+1414+Set the `BLUESKY_IDENTIFIER` in your `src/config.json` file to your bluesky handle (without the `@`).
1515+1616+Then just post a link to your blog post on bluesky and likes will be shown on your blog posts, looking something like this:
1717+1818+
1919+2020+Note that no like button is shown if there is no post on bluesky linking to your blog post.
2121+2222+Likes are both server-side rendered on build and updated on the client when you navigate to the page
2323+(so they work without javascript, but might be a bit outdated).
2424+2525+See a live example below:
+2
src/pages/posts/[...slug].astro
···88import FormattedDate from "$components/FormattedDate.astro";
99import { BASE } from "../../config.json";
1010import { getBlogPosts } from "src/utils";
1111+import BlueskyLikes from "$components/bluesky/BlueskyLikes.astro";
11121213export async function getStaticPaths() {
1314 const posts = await getBlogPosts();
···63646465 <h1 class="mt-4">{post.data.title}</h1>
6566 <Content />
6767+ <BlueskyLikes />
6668 </BlogPost>
6769 </main>
6870 <Footer />