Embedly’s jQuery Preview is a jQuery plugin that allows a site’s users to share links with rich, customized previews attached.
Unlike the standard Embedly jQuery plugin, which generates previews in a preset format, jQuery Preview allows users to select a thumbnail image and edit the title and description. Additionally, jQuery Preview takes advantage of the Preview endpoint, which provides precise control over how embeds are displayed on the page.
To get started you need to put jQuery, jquery.preview.full.js and preview.css. into the head of your page:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="http://scripts.embed.ly/p/0.1/jquery.preview.full.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://scripts.embed.ly/p/0.1/css/preview.css" />
</head>
jquery.preview.full.js bundles Underscore.js and Mustache.js in with jquery.preview.js. If you already have or use these two libs you can see up the head of the document like so:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="lib/mustache.js" type="text/javascript"></script>
<script src="lib/underscore.js" type="text/javascript"></script>
<script src="http://scripts.embed.ly/p/0.1/jquery.preview.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://scripts.embed.ly/p/0.1/css/preview.css" />
</head>
Next set up a simple form that allows a user to input link:
<form action="/update" method="POST">
<input id="url" type="text" name="url"/>
</form>
You then need to tell preview what field to listen to:
<script>
$('#url').preview({key:'your_embedly_key'})
</script>
And you are done setting up the front end solution for jQuery Preview!
Note that the Preview endpoint is only available to Embedly developers with a Starter plan or above. You can sign up for a Starter plan at embed.ly/pricing.
The full demo and documentation for jQuery Preview can be found at github.com/embedly/jquery-preview.