Developing An Embeddable Javascript Widget

A clear trend in web development today is that sites are composed of many 3rd party widgets. Go to any big site, open up the web inspector and see how much is really loaded from the address you typed!

This is great – everyone delivers one service they do well, instead of each site rolling their own half-baked version of everything from a comment system to a media player. Remember the days before Youtube? To show a video you’d have to host a media file yourself and usually just link to it and hope the user’s browser’s setup correctly; watching it was often done in a tiny, non-fullscreen’able QuickTime window. Now you just drop in a an embed code and get a full-fledged video player right on your page, together with your content.

But with so many components co-existing on a page comes a number of challenges arise:

  1. The embed code must be short & concise and work with a number of CMS’s
  2. What if they interfere with each other? Will the failure of one bring down the others?
  3. Keeping page load time down

This post is the first in a series on how to make a solid embeddable widget using the latest in web development: AWS for delivery, grunt and RequireJS for building and managing, sandboxing Google Analytics with EasyXDM and safe-wrapping 3rd party libraries. Today we will focus on #1.

Our mission today

At Shootitlive we provide media through an HTML5 player and to make our service a breeze to use we set out to make the smallest possible embed code.

We went from this:

to this:

Just like many other Javascript web apps – our player wants a DOM tree to live in and is initialized from a global settings object (e.g. Google’s _gaq) to allow for asynchronous loading. So if you’re embedding 3rd party Javascript of any sort you’ll probably find this post very useful.

Shootitlive?

Shootitlive is a live media service used mainly by newspapers and bloggers including The Times in the UK and Aftonbladet in Sweden. Our content is delivered from our backend into the Shootitlive Player (SILP), through real-time JSON playlists. The idea is that you embed the player wherever you want to show your media feed. On-the-field photographers then publish photos, videos and audio straight from their camera to the web in a couple of seconds.

The many ways of embedding

The most rudimentary way of embedding still used by many services is the following:

The downside of this approach is that it blocks the DOM rendering, i.e. it is synchronous – and if the script fails the whole site might have its Javascript broken.

Therefore most providers use this technique instead:

Which is better due to being asynchronous and all.

For more on asynchronous vs. synchronous loading of Javascript, Emil Stenström has written a great in-depth post on JS loading patterns.

The second option however is still long and hairy and our experience is that the longer embed code you give to your users – the bigger the chance something terrible happens to it on its travel, whether it’s edited by a user or mangled by a well-intended CMS.
Also it has a lot of specifics pasted on each site – i.e. if we change something in the embedding / loading technique we must have each client update their embed code.

How we do it

In summary, our goals are:

  • One can pass arbitrary parameters to each embed
  • The embed code is short
  • It loads asynchronously
  • One can have multiple players on one page

Instead of pointing the embedding site straight to our player source file we decided to add a loader file that sets up the player and deals with all embedding-related issues. Also it enables us to tune our embedding technique and have it affecting all existing embeds.

With a loader file we don’t need any inline Javascript in the embed code which then could boil down to:

<script src="//our-cdn.com/shootitlive.load.js?project=13&client=greenfield[more URL encoded parameters]" async></script>

It is short and asynchronous for almost all modern browsers. Note that we can pass in arbitrarily complex JSON object in the query string through URL encoding. jQuery’s $.param() is handy for this.

The loader will have to carry out the following:

  1. find its own script tag, or equivalently find all player embeds in the DOM
  2. parse the parameters for each player through the query string
  3. create a container div for the player next to each script tag
  4. load the silp.min.js script with the supplied parameters

1: Identifying embed codes

Having multiple players makes things a bit more tricky since the very same script will be run multiple times – once for each player. Therefore we use a global `foundEls` variable to keep track of which embeds have already been found.

Note that the regexp re determines if a script tag is a Silp embed or not.

This code will identify all embed tags on the page once. If there are two embeds on a page – with HTML content in between that delays the DOM parsing, it will only find the first embed on the first run. However, usually the first inclusion will find all embed tags and store them in `foundEls` while the second run will not do anything. Due to this care must be taken so that the loader is idempotent (I confess, math lingo makes me feel warm inside).

2: Parsing the query string

Our second step is to parse the settings from each script tag and create a container div for the player next to it. One can use the previously mentioned $.param() to convert a JSON object into a query string. Luckily Ben Alman has written an inverse function deparam() that gives you back the original JSON object, you can find it here. I made it into a stand-alone version found here.

Equipped with this, we can transform an URL with a query string into a JSON object like this:

3 and 4: Creating a container for the player and feeding the parameters into its initialisation method

Naturally we want the player to be inserted next to the embed code that created it – which is easy since we have a handler to the <script> element for each embed.

All that remains is actually loading the player, and since it will initialize a player for every element in settings we only need to load its source once at the end of our loader script:

All in all

You can find the final loader script here. The loader script we use in production is slightly more involved due to backward-compatibility and the such, but the gist illustrates the distilled principle behind it.

The loader script comes with many benefits. For example we could create a custom loader script for a client – containing additional default parameters, extra code for custom templates, etc. Editing this custom loader would instantly affect all existing embeds for that client. We could even point them to a different version of the player. In summary – it provides a great middle-point for rolling out changes quickly without involving the client with technical issues.

If you have questions, want to tell me I don’t know the first thing about this and ought to pick another carrer path or just say hi: please comment or tweet me: @svammel.

What’s next

The upcoming articles will cover the refactoring and architectural improvements of our player. Topics will include:

  1. Using RequireJS for an embeddable app – either as many-files, or as a minified single-file version. We have done some pretty sweet solutions with grunt for no-brainer development, testing and deployment.
  2. Safely using jQuery and other 3rd party libraries in your embeddable through namespacing
  3. Running Google Analytics in the player without interfering with the parent page’s own analytics

Until then.

Cheers, The Shootitlive Team

Signing Edda Media


We´re happy to announce that one of the leading and most innovative media groups in Norway, Edda Media will start to share live content using Shootitlive. Edda Media owns a number of Norwegian newspapers including Fredriksstad Blad, Budstikka, Sandefjords Blad, Laagendalsposten and Lierposten.

“At Edda Media we’re fond of new services. When we find things that not only are new, but also extremely useful we’re delighted. Shootitlive is of great value to the audience, and is super easy for the newsroom, the reporters and the photographers in the field.”

Tord Selmer-Nedrelid, Editorial developer at Edda Media

For Edda Media these factors have been essential to start using Shootitlive:

– Low threshold for use: Simple to use both in the field and for the newsroom to manage. There is a iphone app so that employees always have the abillity to quickly live publish media.

– Flexible: The Shootitliuve player is made in HTML5 with responsive design and scales well to all our platforms. You can send both images and video which will appear in the same gallery.

– High value for our visitors: The public expect pictures and video. We know that our audiences like picture galleries very much. Then they should get more of it.

– Fast: The news is happening now. Shootitlive allows us to cover events with pictures and video as it happens

– Crowdsourcing: Shootitlive is very good to collect images from users. Our visitors can send pictures into the system via email. It’s easy and quick to approve images before they are published.

– Compatible: Shootitlive can be combined with our existing advertising systems, and thus capitalized on.

– Track record: Although the company is new, they already have an impressive list of Newspaper customers in several countries.

– Nice People: Shootitlive are a small company with people who are very involved in the product. Eivind Vogel-Rodin is one of the founders of Shootitlive. He is both a nice guy and has worked as a press photographer. Thus, he understands our needs as a news organization.

Read more on the Edda Media development blog.

Fredriksstad Blad and Laagendalsposten kicked off their Shootitlive usage by mixing the staffed photographers material with real time content fetched from their audience during the festivities on May 17th. Budstikka started with breaking news photos and videos when houses caught fire in Billingstad, Norway.

Shootitlive and Bildbyrån disrupts the picture agency market

The business model for buying images is outdated. Charging for images individually or with limited rights of use may work for print, but is a pain for online publications.

Together with Bildbyrån we’re launching a partnership to offer live photo and video feeds for free. We’re starting with Euro2012, where anyone can embed the feeds and use in their own coverage. And we will continue offering feeds from upcoming sports, entertainment and news events.

“The concept was tested during the Ice Hockey World Championship together with five selected publications and the response was very positive,” says Joel Marklund, co-owner of Bildbyrån.

The player is ad-supported and displays ads in the lower part of the player. “In addition to get the media feeds for free, newspapers, blogs and other sites will soon also earn revenues from ads that appears”, says Martin Levy, co-founder of Shootitlive.

During Euro 2012, anyone can publish live media feeds completely free from all of Sweden’s matches.

Visit euro2012.shootitlive.com to grab the feeds.

Say hello to Shootitlive 2.0

Say hello to Shootitlive 2.0 and the brand new freemium accounts
Shootitlive 1.0 was great, but Shootitlive 2.0 is awesome. The new HTML5 player allows your photos, audio and video clips to play seamlessly on iPhones, iPads and Android smartphones, as well as other mobile platforms.

Existing users can start using Shootitlive 2.0 at shootitlive.com/login

Since start we’ve received daily requests from freelancers and smaller newspapers that want to live publish photos and videos on a tight budget. We have listened to you guys and are now releasing Shootitlive freemium. So head over to shootitlive.com to request an invite (it’s free)

New awesome features

    – HTML5 player that loads faster and supports swipe, auto-size and share among many new features.
    – All users now have personal accounts (editors, photographers or admin)
    – Photographers never need to change camera settings as editor’s instead assign them to feeds
    – Extended support for video and brand new support for audio
    – Edit order of media with drag ‘n drop rearrange
    – Detailed stats over image and video views over time and for specific feeds
    – Email upload. Upload photos, videos and audios to your personal Shootitlive email address (Subject field becomes caption)
    – Monetization with prerolls and start banners. Selected users can now enable revenue participation and start earning from day one.


One media player to rule them all, one media player to find them, one media player to bring them all and in the darkness bind them…

The Shootitlive Team

Swedish Picture Of The Year Award 2012

Today the Swedish Picture Of The Year Award will take place in Malmö. I´m happy to say that Shootitlive is a proud sponsor and will offer a free live photo feed for press and public to publish and distribute to websites and social media.

Please, feel free to grab the embed code here and you’ll find all the nominees here.

Hey Deutschland, was ist los?


We’re super pleased to have signed Der Tagesspiegel as our first German customer. Fast and high-quality news on politics, economy and culture make tagesspiegel.de the opinion-forming media in Berlin, Germany.

Der Tagesspiegel kicked off their Shootitlive usage with a live media feed from the opening of Berlin Fashion week and has since covered football games and concerts.

With Der Tagesspiegel, Shootitlive now has 33 newspaper customers in Sweden, Finland, Denmark, Norway, UK and Germany that together generate more than 100 million image views and 1.5 million video views each month.

Stay posted for more client and new features announcements as the coming months will be super busy.

Haben Sie eine gute ein!
The Shootitlive Team

Shootitlive goes web-tv platform


Shootitlive is usually about live media feeds with unedited photos, audio and video clips straight from the photographer’s camera to the web site. But nowadays we have users that use Shootitlive with longer, edited videos as their main web-tv platform. And just as with the live media feeds, videos play seamlessly on iPhones, Desktops and other platforms.

Shootitlive is proudly powering web-tv for customers such as Dagens Media, NyTeknik and Affärsvärlden.

“We’ve used Shootitlive as our web-tv platform since October and we’re very satisfied with the simplicity, stability and ease of use”
Peter Edhäll, CTO at Talentum

Head over to Dagens Media to catch the latest episode of DMTV where Jan Helin, Editor-in-chief at Aftonbladet is talking about the future for newspapers. Or go all geeky with Under Skalet from NyTeknik where they screw apart a Canon 500D camera piece by piece.

If you’re an existing Shootitlive user, get your popcorn out and start uploading your videos.

The Shootitlive Team

Picture Of The Year Awards

We’re proud to announce that Shootitlive is a sponsor for The Picture of the Year Awards in Sweden, Norway and Finland. We will offer a free live photo feed for press and public to publish and distribute to websites and social media.

Today the Norweigan Picture Of The Year Award will take place in Oslo. You can follow the live photo feed below and if you want to publish the feed please grab the embedcode here.

Picture of the week s02e02

How glamorous is the life of a model?
Last week, the Iltalehti photographer Pasi Liesimaa took us behind the scenes of a photo shoot with the Miss Suomi finalists.

2012-01-11 Photo: Pasi Liesimaa / Iltalehti

Anna Tallgren, Miss Suomi finalist

Picture of the week s02e01

Browsing through the pictures of the first week of the new year and realizing that this weeks “picture of the week” is a video. You were aware of you can live publish video with Shootitlive, right?

Late Sunday Sweden defeated defending-champion Russia with 1–0 in overtime to win their first title in 31 years. Through the lens of the Aftonbladet photographer Jimmy Wixtröm you could follow the Swedish hockey team celebrate it’s win in the 2012 World Junior Ice Hockey Championships.

See the entire slideshow here