Improve Widget

[glciampaglia]

From @glciampaglia on April 5, 2018 18:58

explore changing widget based on what Diogo said if time allows (big image, caption below, hoaxy logo in top right corner)

Copied from original issue: IUNetSci/hoaxy-botometer#226

[glciampaglia]

From @filmenczer on April 18, 2018 21:48

A user reported a "maximum size exceeded" when trying to embed on a medium post. Let us test this on medium and other commonly used platforms and decide if we need to decrease the resolution to get under limits.

[glciampaglia]

From @benabus on April 19, 2018 16:51

Test character/size limits on medium, wordpress, etc. See if we can get the size of the images down below the usual limits.

[glciampaglia]

From @mihaivavram on April 26, 2018 14:25

Medium

• Can embed approved/external widgets on Medium using Embedly but Hoaxy is not in there
• Can also embed in-line code, which works fine
• Can also embed a link widget but that is treated just as text and passes length limitations
• Medium length limit has no maximum cap
• Conclusion: What was that journalist doing, ask him/her to replicate so we can try?

Wordpress

• Can use Code Embed plugin, this plugin has a 6 billion character limit, so we should be fine there
• Widgets can be added using approved list just as Medium (Hoaxy is likely not in the approved Wordpress widgets)
• Did not try there because we didn't have the Code Embed plugin, should we?

General Conclusions

• We currently use the js method on the canvas called toDataUrl with a compression of 0.2. (compression goes from 0 to 1 where 1 is full resolution and most amount of text and 0 is the least resolution and text)
• A typical large graph at this resolution generates a text size of roughly 50,000 characters for an image url, while a typical small graph generates about 23,000 chars by our method (0.2 compression)
• Generally speaking, a 0.1 decrease in resolution amounts to roughly 10,000 decrease in chars
• As seen in the screenshots below, we can get away with doing a 0.1 compression and having the characters range from (20,000 chars on small graphs to 40,000 chars on large graphs) but we should not go any lower.

Bigger Resolution, current method: 0.2 compression

Medium Resolution, optimal method: 0.1 compression

Small Resolution, loss of fidelity

[glciampaglia]

From @filmenczer on April 26, 2018 17:27

We decided to do the following:

• Switch to 0.1 compression
• Wordpress install embed widget and try to embed Hoaxy widget on Cnets website.
• See if it is possible to embed a Hoaxy code widget on Medium
  - To clarify, the only way to embed a widget in Medium one must leverage embed.ly. We, the providers, would need to provide our Hoaxy widget to embed.ly, and embed.ly will process it and serve it as a link. Then on Medium, one can copy that link and it will look like url. Not sure what the journalist did, maybe he tried to copy the widget code into the embed.ly extract tool, which is not as per intended functionality. I tried this and got an error saying the uri is too long. We may revisit this later.

[glciampaglia]

From @mihaivavram on May 6, 2018 16:44

Removing this issue from the Launch milestone and moving it to Utopia, in case there are other ad-hoc widgets requests that need to be taken care of, that we can add and edit below:

• Attempt to integrate our widget with Embedly

[glciampaglia]

From @mihaivavram on May 20, 2018 18:5

This effort requires the following according to these Embed.ly docs:

• Our urls and pages must be crawlable server-side
• Creation of an oEmbed API on our server
• An image data/metadata caching system for every queried article, thereby storing this info on our servers so the API can return all the pertinent information Embed.ly needs to serve our content (may need to contain update/deletion/backup system as well)
• Sign up with Embed.ly and any back-and-forth needed to adjust our config with their requirements

The result after having done all this is the following:

Whenever an end user, using any of these sites
Pastes a Hoaxy url such as: https://hoaxy.iuni.iu.edu/#query=Royal%20wedding%202018%3A%20Couple%20leave%20Windsor%20after%20wedding&sort=mixed&type=Twitter

A nice image/title combination shows up with the screen-shot of the Hoaxy searched and cached visualization along with any extra data we wish to provide e.g. article url or title or source.

[glciampaglia]

From @filmenczer on May 20, 2018 18:13

Thank you for the research @mihaivavram !! Given how much work this would require on our side, I suggest we move this issue back to Utopia...

[glciampaglia]

From @mihaivavram on May 20, 2018 18:32

Okay, no problem, moving to Utopia for now.