Links

Vaulting Out of Walled Gardens with Fancy Links

Have you ever noticed that in Twitter, Facebook, Google and Pinterest some links are displayed quite fancily, with preview images, descriptive text summaries and other information?
screen-shot-2016-09-09-at-11-52-16-am
These links are fancy because of metadata in the source code of the web page itself, implemented specifically for the rich display of links inside each of these companies’ content platforms.

Unfortunately for developers, each of these internet industry titans has implemented their own metadata formats for this: Twitter has Cards, Facebook and Pinterest use Open Graph metadata and Google uses Schema.org markup.

Thus creating a <header> soup of doom for each and every individual developer who dares to tread this path:
screen-shot-2016-09-09-at-12-30-58-pm
Well that looks like a mess. And it’s different for each website. However, it’s worth doing for two reasons:

The first reason is that fancy links increase click-through rates, increasing engagement and driving traffic to your website. This is good for your blog, your business, or whatever reason you’re sharing the link in the first place.

The second reason is that high click-through rates in walled gardens mean people are escaping those walled gardens, spending time on the Wild Wild Web.

So, to make it easier to do this, I created Silo Buster.
screen-shot-2016-09-09-at-12-30-00-pm
Silo Buster is an easy-to-use website where you enter a small amount of information, and all that <header> goop is generated for you. You can then copy and paste it into your web pages or integrate it into your template or content management system.

Take Silo Buster for a spin, and then check your analytics and see if there’s any change. Experiment with it: Tweak the photos, or the summary text and check again.

If you’d like to learn more about how these sites implement their metadata, and how to debug your rich links, check out the links at the bottom of Silo Buster.

If you’ve got other tips and tricks for fancy links, or experiences either good or bad with them, share your thoughts in the comments!

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Quick one: using download attribute on links to save Canvas as PNG

One of the things I always liked about Firefox is that you can right-click any canvas and select “save image as”. Chrome and others don’t do that (well, Chrome doesn’t). Instead you need to get the image data, create a url and open a new tab or something in that order.

One very simple way to allow people to save a canvas as an image (and name it differently – which would have to be done by hand in the case of right-clicking on Firefox) is to use the download attribute of a link.

You can see this in action in this JSFiddle. Simply paint something and click the “download image” link.

The relevant code is short and sweet (canvas is the reference of the canvas element):

var link = document.createElement('a');
link.innerHTML = 'download image';
link.addEventListener('click', function(ev) {
    link.href = canvas.toDataURL();
    link.download = "mypainting.png";
}, false);
document.body.appendChild(link);

View full post on Christian Heilmann

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Linklib – lets film lovers and filmmakers send time synced links from videos to phones – a WebFWD project

Have you ever googled films and TV-shows while you watch them? Do you think Youtube’s popup annotations in the middle of a video are distracting?

Having shot a documentary about the Pirate Bay for 4 years I wanted to embed links directly into the film to give the audience more nuances in the complex and bizarre story about the Swedish file-sharing site. I constantly google videos I watch.

What problem is Linklib solving?

Linklib lets filmmakers, film fans, journalists and bloggers send time synched links from a full screen video directly to their audiences’ phones. Instead of googling an actor, fact checking an election video or feverishly trying to find the soundtrack to that TV-series, just pick up the phone and the information is right there.

When I stumbled over popcorn.js in 2011 I realized the amazing potential of embedding time synched links into films, but I was still looking for a way to hide the hyperlinks from the fullscreen video.

So we built Linklib, a system that sends time synced links from streamed video to phones. That way you can read up on that actress, fact check that election video or follow that rapper on twitter while you’re watching the video. Without obtrusive annotations in the frame.

Linklib is a free and open library of time synced video commentary. Film directors, journalists and fan communities can add facts and comments to give films more depth and nuances. The system works just as well for feature films, documentaries, music videos, educational and commercical films. Linklib is an open source project that wants to tell better stories by using the open web.

How it works

The basic components of Linklib’s system are a remote, usually a smartphone or a tablet, and a video viewer, typically a computer. The remote shows synchronized links from the video viewer and can send and receive events such as play, pause, forward and rewind. To sync the phone with the video we show a QR code that you can scan with your phone. At the moment our video viewer can show youtube, vimeo and html5 video streams.

A lobby server handles the communication between the remote and the video. The remote uses socket.io to communicate with the lobby server and is written in JavaScript.

For users to be able to add videos and create link feeds of their own we’ve built a web based authoring tool focused on simplicity. The tool is built using Twitter bootstrap and jQuery. All links and account information are stored on a mysql database on Amazon AWS.

Components

  • Remote – shows synchronized links from the Video Viwer and can send receive events such as play, pause, forward and rewind.
  • Video Viewer – Shows a youtube or vimeo stream.
  • Lobby server – handles communication between Remote and Video Viewer
  • Authoring Tool – Web based system that allows users to add videos and create link flows for them

APIs and Libraries

  • Remote uses socket.io to communicate with Lobby server and is written in JavaScript.
  • Lobby server is based on node.js
  • Video viewer uses popcorn.js to play videos
  • All links and account information are store on a mysql database on Amazon AWS
  • Authoring Tool uses Twitter bootstrap and jQuery

Help us test out Linklib

Are you a filmmaker looking for a way to tie closer bonds to your audience? Or a Game of Thrones-fan looking for a way to fill your favorite episode with geeky references? Maybe you want to throw in a bunch of research that you couldn’t explain in your last conference video? Or you’re a fashion designer that wants to reveal the details of your catwalk? If you’re a film producer you could fill your youtube trailer with your characters’ social media and reviews, like the great documentary Indiegame: The Movie here beneath.

You can also add mashups and remixes to that banging new Outkast music video! And help activists worldwide spread information that doesn’t make the mainstream news! Linklib puts the web into videos without ruining the traditional viewing experience.

We just launched a beta and we’d love your feedback about bugs and features!

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)