Templates is a project mainly written in ..., it's free.
Templates for Storify stories
The Storify editor on storify.com allows you to dynamically integrate social media content from around the web.
This Template Repository provides a way to contribute a template and use it on Storify.
Slideshow template: you can just append /slideshow
to any story url. E.g. http://storify.com/ajestream/miyagi/slideshow
KenBurns template: dl.dropbox.com/u/1702667/github/templates/kenburns/index.html .
You can add the url of any story after the hash:
e.g. dl.dropbox.com/u/1702667/github/templates/kenburns/index.html#http://storify.com/xdamman/why-do-you-do-what-you-do .
See this slideshare presentation:
Just create a new HTML page and request the JSON of the story using jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<div id="story">
<div id="header">
<h1>Story title</h1>
<h2>Story description</h2>
<img id="byline" width=16 height=16 src="" border=0 />
<h3>Byline</h3>
</div>
</div>
<script>
var storyurl = 'http://storify.com/torontostar/online-reaction-to-libya-chaos';
// We use this so that you can override the storyurl by appending it after the hash
// e.g. index.html#http://storify.com/xdamman/why-do-you-do-what-you-do
if (window.location.hash && window.location.hash.match(/http:\/\/storify\.com\//)) storyurl = window.location.hash.substr(1);
// We fetch the JSON.
$.getJSON(storyurl + '.json?callback=?', function(json) {
renderStory(json);
});
// We render the story
function renderStory(story) {
$('#story #header h1').html(story.title);
$('#story #header h2').html(story.description);
$('#story #header h3').html('By ' + story.author.name);
$('#story #header img#byline').attr("src", story.author.avatar);
// And so on...
// You can check in the console all the available properties from the JSON
console.log("Story: ", story);
}
</script>
We are working on a more streamlined process but for now the easiest way is to use an iframe:
(don't forget to adapt the width and height to the template that you use)