Maxed out embed.ly API

[JoeGermuska]

We only get 5000 "extract" calls from the embed.ly API per month. We've already gone over on TimelineJS3 with about 10 days left in the cycle.

If we want to provide a no-cost fallback strategy based on embedly, we'll need to use their cards, which don't leave us much opportunity to control the style. But I don't really see that we can afford to pay for all those embeds for people. I guess we could ask for their API key in a form if need be.

[JoeGermuska]

Alternatively, we could try to implement an opengraph parser and prepare a data object similar to what is returned from Embedly, used in createCardContent(d)

Possible fallbacks for missing OG tags:

<title></title>
<meta name="description">
<link rel="apple-touch-icon" sizes="57x57" href="https://s0.wp.com/wp-content/themes/vip/fusion-2015/assets/images/favicons/apple-touch-icon-57x57.png">
<link rel="icon" type="image/png" href="https://s0.wp.com/wp-content/themes/vip/fusion-2015/assets/images/favicons/favicon-96x96.png" sizes="96x96">

big icons might be a decent fallback for the image, although our code is also written to be robust when no image is found.

[zachwise]

Sounds good. We could scrape for these open graph tags http://ogp.me/ <title>The Rock (1996)</title> <meta property="og:description" content="Sean Connery found fame and fortune as the suave, sophisticated British agent, James Bond." /> <meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" /> We should handle the fall back icon differently so that it can be styled differently from an image.

[JoeGermuska]

Hm, a little monkeying around quickly runs into cross-site scripting problems if we try to do this purely with JS. As someone said, you start to see why people pay for embedly!

[JoeGermuska]

removed default embedly key in 3025d32b9116466b865378c8bddab4050b2c9989 since it leads to people getting nothing most of the month. But then found that the default embedly card is way too large and doesn't offer obvious styling control. (They claim it's responsive but it doesn't work well in a test Timeline.) So in c468edf I removed VCO.Media.Website from the options until we get this sorted.

[JoeGermuska]

@zachwise opinions about this?

[JoeGermuska]

Current plan: restore this mediatype to the list of checks performed on media.url. When this type is invoked, if the Timeline has an embedly_api_key option set, then the current behavior will be used.

If the key is not set, for now we'll display the link using VCO.Util.linkify(so it will be clickable, protocol stripped, etc).

We will investigate some kind of opengraph proxy, since it's not possible to use javascript to read OG tags from websites which don't have CORS enabled.

[JoeGermuska]

@zachwise before I do that, maybe you should see what you think about using Embedly's free card system. It's obviously far from perfect, as evidenced by the Vox image it offers for the Knightlab website (which doesn't have proper OG tags, so partly our fault)

Anyway, is this better than the linkify strategy?

[jywsn]

+1 for cards. I think they look nice.

[JoeGermuska]

Another vote for some solution to this in Zendesk 2354

[rmarinho]

Any feedback on this? i m using one of the cards and it works ok at least when i resize the browser .