SocialStory.js Instagram style stories for your website with a simple JavaScript plugin

Demo

Full unlocked Javascript, CSS & HTML source code for one developer to use on unlimited websites (commercial and non-commercial) & free updates.



The Setup

In the HTML document head include the SocialStory CSS and Javascript files:

<link rel="stylesheet" href="socialstory/socialstory.css"> <script type="text/javascript" src="socialstory/socialstory.js"></script>

Add the storytime div tag to your HTML body:

<div id="storytime"></div>

Add the plugin code to your page before the closing body tag:

<script> var myPlaylist = []; var socialStory = new Story({ playlist: myPlaylist }); </script>

How to Use

Create a playlist in the variable as shown below. It can have as many videos as you need.

var myPlaylist = [ { "title": "Social Story", "date": "2 hours ago", "url": "media/IMG_4627.mov", "icon": "media/small-icon.jpg" }, { "title": "Social Story", "date": "1 day ago", "url": "media/IMG_4628.mov", "icon": "media/small-icon.jpg" }, { "title": "Social Story", "date": "1 day ago", "url": "media/IMG_4629.mov", "icon": "media/small-icon.jpg" } ];

Trigger the story modal window using the JavaScript code below:

socialStory.launch()

Example

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>SocialStory.js</title> <link rel="stylesheet" href="socialstory/socialstory.css"> <script type="text/javascript" src="socialstory/socialstory.js"></script> </head> <body> <button type="button" onclick="socialStory.launch();">Launch Social Story</button> <div id="storytime"></div> <script> var myPlaylist = [ { "title": "Social Story", "date": "2 hours ago", "url": "media/IMG_4627.mov", "icon": "media/small-icon.jpg" }, { "title": "Social Story", "date": "1 day ago", "url": "media/IMG_4628.mov", "icon": "media/small-icon.jpg" }, { "title": "Social Story", "date": "1 day ago", "url": "media/IMG_4629.mov", "icon": "media/small-icon.jpg" } ]; var socialStory = new Story({ playlist: myPlaylist }); </script> </body> </html>

The End.