Magic Lantern

Magic Lantern makes it easy to let your site's visitors share customized media on Twitter. It's Twitter's web intents taken to the next level: in addition to a suggested Tweet, you can attach any custom media: a nicely styled pullquote, the user's artistic creation, even a GIF or video. It's easy for visitors, and it's easy for you: no server configuration or mucking around with the Twitter API, just a few lines of JavaScript.

Why not check out some cool demos that show off what you can do with it?

Get Started

There are two steps to setting up Magic Lantern on your site. First, include magiclantern.js. (Proper npm/module support is coming.) Then, when the user wants to tweet, call magiclantern.tweet(). The function takes one argument: an object which must contain two properties: status, the suggested text of the tweet, and media, described below. It may also include the properties in_reply_to_status_id and possibly_sensitive as described in Twitter's documentation. Because tweet() opens a popup window, it should be called as a direct result of user interaction or many browsers will block it.

Media

The tweet object's media property can be either a media object or (when attaching multiple images) an array of media objects. A media object contains data and alt_text, which should be a useful textual description of the media. Accessibility is important! data can be an HTML canvas element, a blob, a data URL, an HTTP(S) URL, or a promise that resolves to any of those things. Unless you're using a canvas, see Twitter's media upload guide for guidance on formats and file sizes.

To see what this all looks like in practice, check out the demos.

Development Roadmap

Magic Lantern is fully functional, but there's still work to be done:

Who Did This?

Magic Lantern is made by Daniel McLaughlin. If you have questions, or if you're using it to make something cool, say hi on Twitter!