interpolating quotes and comments into bouncer's metadata to improve social media sharing behavior of hyp.is links

judell commented 7 years ago

This issue separates itself from https://github.com/hypothesis/product-backlog/issues/166, which envisions turning annotations into textshots that can be shared on social media. That's desirable and will be great to have.

Here the focus is, rather, on the share cards that Twitter, Facebook, and other services produce when fed bouncer URLs.

Such cards expect (in page metadata) an image, a title and a description. It's easy to interpolate an annotation's quote and comment into bouncer, e.g. by this kind of parameterization:

    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="@hypothes_is" />
    <meta name="twitter:title" content="__QUOTE__" />
    <meta name="twitter:description" content="__COMMENT__" />
    <meta name="twitter:image" content="http://hyp.is/static/images/twitter.png" />

    <meta property="og:type" content="article"/>
    <meta property="og:site_name" content="Hypothes.is"/>
    <meta property="og:title" content="__QUOTE__"/>
    <meta property="og:description" content="__COMMENT__"/>

Doing that yields, e.g.:

Twitter

In this case the quote is truncated but we also get to see the comment (which if longer would also be truncated)

Facebook

In this case the quote is all we get, it’s still truncated, nothing of the comment gets through.

Rocket Chat

Slack

jeremydean commented 7 years ago

personally i think if we could push this minor update through it would be a great improvement in the interim before @sean-roberts gets to go HAM on this issue. CC @ajpeddakotla @dwhly

judell commented 7 years ago

Anecdotal evidence for its efficacy. A half-hour ago I tweeted:

This tweet is actually a combination of an editorial choice I made, to include the text "Why Facts Don't Change our Minds, Elizabeth Kolbert, 2017-02-27" as a complement to the share card with Twitter's truncation of my annotation's quote, "Even after evidence for their beliefs has been..." and my (not truncated) comment "It's called cognitive dissonance."

I checked just now and found this:

I'm pretty sure this is the first time I've made an H share that's yielded responses.

sean-roberts commented 7 years ago

Fwiw, this work would be a required first step of the larger image work as well.

judell commented 6 years ago

This issue might have been closed when we merged and deployed https://github.com/hypothesis/bouncer/pull/43.

Since it wasn't, I will amend it here with a proposal to omit the following tags we include in the boilerplate:

    <meta name="twitter:image" content="http://hyp.is/static/images/twitter.png" />
    <meta property="og:image" content="http://hyp.is/static/images/facebook.png"/>

These Hypothesis logos are intrusive, convey no useful information, and ignore guidelines like this one from https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary: "You should not use a generic image such as your website logo."

Until/unless it proves feasible to implement a textshot strategy as envisioned in https://github.com/hypothesis/product-backlog/issues/166, or find another way to graphically represent annotations -- for example, by capturing and reusing the image urls that the platforms automatically extract from posted articles -- these images create more problems than they solve.

Here's how it would in three platforms if we just got rid of the logos:

The results aren't ideal, but arguably are a subtler and more correct way to represent annotations in these sharing contexts.

If we wanted to do this, we'd simply remove https://github.com/hypothesis/bouncer/blob/master/bouncer/templates/base.html.jinja2#L12 and https://github.com/hypothesis/bouncer/blob/master/bouncer/templates/base.html.jinja2#L18

/cc @dawariley

hypothesis / product-backlog