Adding Ghost Social Web notes to your website
Starting from Ghost 6, we have "Notes" in addition to posts. Here is a way to show them in your website for public visitors
When Ghost released new Social Web feature, one of the most common questions was "how to show our Notes on our Ghost site". Ghost didn't provide a built-in solution for this yet, but after noticing Cathy's post about her solution, I started investigating on that, and tried a solution that doesn't require extra resources or setup.
As a result, I made a simple web component, and published on GitHub. It allows you to embed your latest notes on your Ghost Social Web to your pages or posts.
How to use
Using it quite simple. Create a page on Ghost, named like "Notes", and add an HTML card with the content below:
<script src="https://cdn.jsdelivr.net/npm/ghost-activitypub-feed@0/ghap-embed.js"></script>
<ghost-activitypub-embed></ghost-activitypub-embed>With this simple code, you'll have something like on my site: https://muratcorlu.com/notes/
How does it work?
This component is running completely on client-side, by leveraging your website's already public ActivityPub endpoints to fetch your latest notes. So it works on all Ghost setups that runs Social Web, including self-hosted and managed hosting service like Ghost Pro, Magic Pages or Synaps Media.
It's a web component, not an iframe, so it doesn't actually run another page behind the scenes. And thanks to underlying technology it's style isolated from the Ghost theme, but also customizable easily (coming later).
In addition to using with HTML Cards, it's also possible to embed your social notes to your home page by editing your theme files. For example, if your theme has a sidebar, you can add same code to that sidebar part, which will list your notes in your home page as well.
There are some limitations worth to mention:
- This timeline doesn't list "re-posts"
- Ghost normally automatically posts your latest articles. This timeline doesn't include those posts as well.
- Currently it only shows latest 10 notes.
What is next
There are some features that I want to add soon:
- Optionally hiding header: This can help to show it inside templates with different type of content
- Adding documentation about styling.
- Show a dialog with the guidance for following your account on fediverse
- Loading more than 10 posts
And there are some topic that I want to further investigate too:
- Optionally showing re-posts
- Showing like and re-post counts
If you find putting your notes to your site useful, please give this simple component a try and share your thoughts with me. Since it's open source, I'm also open for code contribution as well.
Thank you!
