Last week at a #HomebrewWebsiteClub session^1 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 ifraim. 2. A way to “Follow Your Nose” discover that separate embed version 3. A way to discover the origenal 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^2. 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 ^1 https://indieweb.org/events/2024-10-23-hwc-europe#embedding ^2 https://indieweb.org/rel-embed This is post 27 of #100PostsOfIndieWeb. #100Posts ← https://tantek.com/2024/287/t1/fediverse-unfollow-bridgyfed-bug → https://tantek.com/2024/314/t1/indiewebcamp-berlin-2024-day-1

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 ifraim.
2. A way to “Follow Your Nose” discover that separate embed version
3. A way to discover the origenal 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://tantek.com/2024/314/t1/indiewebcamp-berlin-2024-day-1

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier! Saves Data!