Improve social share preview for collections / subjects

[RayBB]

Related to:

• #833
• #6054

e.g. https://openlibrary.org/people/mekBot/lists/OL103955L/Childhood_Favorites/preview.png

Describe the problem that you'd like solved

We don't have a great social preview for collections. It doesn't show a little text about the collection or image.

Here is FB's tool to improve social share.

Example link: https://openlibrary.org/collections/kingdom-of-hawai'i-people What it looks like on Facebook:

What it looks like on Slack:

I'm sure it is just as bad on other apps.

Proposal & Constraints

Perhaps we can grab the first few hundred characters and set it as the description. Grabbing the first image would be nice too.

Additional context

Stakeholders

[rebecca-shoptaw]

I'd be very happy to take this on! Looks like the existing code for the list preview could be relatively simply re-used for this purpose as well. 😊

[RayBB]

@rebecca-shoptaw I've assigned you 👍 Good luck!

[rebecca-shoptaw]

Heads up @mekarpeles -- just unassigned myself from this, as I won't reasonably have the time to devote to it around all my other fellowship work and I've already completed the part I was most excited about (#9224). 🙂

[deysandip301]

Hey @mekarpeles I don't know that if I am a right person to do this but I have worked on some preview before and I would like to take up this but I don't have much context of the codebase it could take time I'll try my best..

[mekarpeles]

Hi @deysandip301, apologies that our team hasn't been very available the past two weeks, we've been addressing security upgrades and were partially offline.

If you're up for it, we'd love your help on this issue and we're happy to assist. Up for it?

[deysandip301]

hey @mekarpeles I would love to work on this issue.... I know about the things that using og tags we can make the social previews better but I don't have any context about the flow in which it is done now in out existing codebase... it would be great if you can provide some part of codebase so that I can explore and some idea like how I can test the previews...

[aarasawa]

@deysandip301 when I was looking into this issue I came across these. Hopefully these help.

static/css/components/shareLinks.less

openlibrary/macros/ShareModal.html

could be here too

[mekarpeles]

Thank you @aarasawa!

@deysandip301, one technique I use to help myself in this type of situation:

Search through other issues or pull requests (especially closed / merged ones) for answers -- the social previews must have been implemented at some point and there's likely a merge request that focuses directly on this codepath!

You may also look at the files @aarasawa mentions and use/click the git blame feature on the UI to see what pull request a commit was part of.

By searching for "share preview", "social preview" I found:

• #6054
• #6608
• #8410
• #8425

We'll probably want to refactor render_list_preview_image from https://github.com/internetarchive/openlibrary/pull/6608/files#diff-d031698c982a0845a0ce52eb88254210a01c2ae9f5ab95c45b6049130a2f4861R523 into 2 functions: the existing render_list_preview_image which takes an Open Library List and pulls out e.g. 5 books... and then passes it to a new function called render_social_preview that takes a list of up to 5 books and renders the preview. This way we can also create a new function like render_subject_preview_image which similarly retrieves up to 5 book covers and passes it to the render_social_preview function.

[deysandip301]

hey @aarasawa thanks for the help also @mekarpeles I was a little bit busy for last few days..... thanks you for your suggestions , I will look into it now...

[deysandip301]

I have written some code for that but I am unsure how can I check that in the development environment ?? in the development environment I am unable to find any collection

[jimchamp]

We may be blocked on solving this for /collections pages at the moment. The current collection pages use the /type/page template, which is used for many other pages. We'll be updating this in the near future, and likely creating a view template specifically for /collections pages. Once this is done, it should be much easier to add a social preview for collections pages.

In the meantime, you can add the required og tags to the subjects page template, here.