Prototype an Open Library Citation Embed feature (experimental)

[mekarpeles]

Proposal

The BookReader and CORS policies are likely not perfectly set up for this and there's no guarantee this feature ships to production, but for anyone interested, the idea is to create a prototype (similar to youtube embeds) which allows someone from Open Library to find a readable book, search inside that book, and then click a button to create an embeddable preview (copying the code to their clipboard)

TL;DR e.g. highlight region on book + click "create sharable citation" -> gives embed code

e.g.

1. open up an archive.org book
2. highlight the region of text to share
3. upon highlight, a button emerges to create as "youtube" style share/embed
4. you get a snippet of code copied to your clipboard one may paste anywhere on the web and hovering over results in a cropped snippet that is the citation OR another [better] option is that the button generates something like of like a gist or pastebin which is just an item filled with citation regions that you link directly to (e.g. on x) w/o copying code.

Design / Demo

https://codepen.io/mekarpeles/pen/OPLgGyR

In this codepen, hovering over the eye pulls up a limited preview, ideally to the correct page with the region highlighted:

Justification

Let more sits like wikipedia round the web reference and cite books in an interactive way with previews.

Brainstorm:

Research

Are there any precedents or findings from other projects or studies that support this feature? (link or screenshot if possible)

See Youtube's Share flow

1. Select "Share":

2. Click "Embed" option:

3. Copy the code

Breakdown

No response

[SharkyBytes]

Hey @mekarpeles

This looks interesting! Could you please assign this to me? For this thing, I think we could follow this approach:

1. Highlight & Selection Tool
2. Embed Code Generator
3. Try to integrate the book reader
4. Clipboard Integration
5. CORS Policy tweaking like (if needed)

Let me know your thoughts on this.

[mekarpeles]

Hi @SharkyBytes

My approach would be to start with the https://github.com/internetarchive/bookreader and find an open access book like https://archive.org/details/metropolis00sincgoog/page/n208/mode/2up?ref=ol&view=theater.

I'd extend the bookreader so when a section is highlighted, a share icon appears alongside the highlighted area

...which one may tap and it pulls up a modal that shows a youtube style preview of the selected region and gives the patron a link they can copy and share.

This link/url (when shared) would generate a social preview of only the highlighted region (less than a page) without the bookreader chrome. e.g.

The url might look something like this, which encodes the start and end offset:
https://archive.org/details/metropolis00sincgoog/page/n208/mode/2up/citation/212:312

Clicking on the url would bring the patron to the page, with the cited region visually highlighted

[mekarpeles]

@SharkyBytes feel free to prototype if it pleases you, though note @cdrini at some point may have strong opinions about the execution and direction, etc as he's currently overseeing bookreader roadmap.

[prasad14070]

Hello @mekarpeles , can I contribute to this issue, i would like to work on it.

[SharkyBytes]

Hi @mekarpeles & @cdrini! 👋

I took a look at this, and it’s such a great idea—really love it! I’m thinking of implementing this as a sharable card, where users can share their highlighted thoughts by downloading them as an image. The card could be customizable with options for formatting, making it even more user-friendly.

This approach can be especially appealing for book lovers who want to share excerpts or insights on social media, saving them the effort of converting content into a visually pleasing format.

I also found an extension with a similar feature, and I think it aligns well with the goal of this project. Here’s a quick video demo to illustrate the concept: [Link]

If you’d like to add more features, we can also do that:-
For now what I think, When a user clicks on the share icon which you talked above, it could open a modal (similar to the one I’ve shown in the video). From there, they could preview and customize the sharable snippet before downloading or copying the embed code.

Let me know your thoughts on this or if you'd like me to adjust the direction further!

[mekarpeles]

@SharkyBytes great find, that example video :) I don't think our widget would need to be quite so complicated or have so many options. Again, we should include @cdrini and @pezvi in any decisions moving forward, if we want a chance of them making it into bookreader, though there's no rule against prototyping something out! Thanks for your excitement. :)