Last week at a #HomebrewWebsiteClub session¹ I pointed out that I was working on implementing a “simple” way to support embeds of my notes, that is, make my short notes embeddable, like how people embed tweets or toots.

I noted that to keep it as simple as possible while being flexible to implementation changes, I planned to implement three things:

1. A separate “embed” version of my post permalinks, with just the entry information (no header, nav, search, sidebar, footer etc.), embeddable via copy/paste or an iframe.
2. A way to “Follow Your Nose” discover that separate embed version
3. A way to discover the original post from the embedded version

For (1) a minimal h-entry, with perhaps a little bit of inline CSS would suffice.

For (2) I proposed using “rel=embed” which I’ve subsequently written up briefly².

For (3) The obvious existing answer is rel=canonical link from the embed version to the canonical post permalink.


Soon thereafter, several folks in the #IndieWeb community went ahead and implemented such embeds for their own sites, and even the https://libre.fm/ open scrobbling service!

https://indieweb.org/embed#IndieWeb_Examples

I have yet to implement it myself, and that’s fine. This is one of the things I appreciate about the community, we can share our plans and ideas for improving things on our own sites, and if someone else does it first, that's great! We celebrate it and explore the solution space together.

Got other ideas for simple embeds? Want to implement them on your own site?

Join us in the #indiewebdev chat: https://chat.indieweb.org/dev


UPDATE: What about oEmbed? tl;dr: oEmbed requires JS and backend code, more work and unsuitable for embeds from static site hosting (like GitHub pages).

A simple HTML method is accessible to many more independent publishers and easier to implement. More: https://tantek.com/2024/306/t2


Glossary

embed
  https://indieweb.org/embed
Follow Your Nose
  https://indieweb.org/follow_your_nose
h-entry
  https://microformats.org/wiki/h-entry
oEmbed
  https://indieweb.org/oEmbed
rel-canonical
  https://indieweb.org/rel-canonical
static site hosting
  https://indieweb.org/static_web_hosting


References
 
¹ https://indieweb.org/events/2024-10-23-hwc-europe#embedding
² https://indieweb.org/rel-embed


This is post 27 of #100PostsOfIndieWeb. #100Posts

← https://tantek.com/2024/287/t1/fediverse-unfollow-bridgyfed-bug
→ 🔮

https://indieweb.org/Getting_Started #indiewebcamp #indieweb #indiewebdev #html #css #javascipt

https://thehistoryoftheweb.com/blog/postscript/web-apps-web-sites-are-they-all-the-same/ #webdev #indiewebdev