URLive is a jquery plugin that helps you create a live preview snippet of a url based on the Open Graph properties of the page, similar to a url preview in a facebook post.
The plugin works with any element that has a url content or value, even on <a> tag with <href>. It is lightweight and doesn't require any back-end code as data scraping is done asynchronously with AJAX using the Yahoo Query Language (YQL).
<a> tag<textarea>Include jquery.urlive.css inside the head tag of your html document
<link href="jquery.urlive.css" rel="stylesheet" />
Include the latest jQuery library together with jquery.urlive.js.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script src="jquery.urlive.js"></script>
After files inclusion, call urlive() function on the element with the URL you want to show the snippet preview. And pass the selector of the element that will contain the preview.
$(selector).urlive({container: '.urlive-container'});
As you've seen on the demo above, you can target any element with a URL to apply the preview. If the element is <textarea> or <input> the plugin will extract the URL from its value. If the element is <a> tag the URL for the preview will come from its href attribute. Other elements like <span> or <div>, the URL should be a text inside the element.
Check out urlive's github repo wiki (https://github.com/markserbol/urlive/wiki/) for in-depth documentation.
jQuery URLive is under MIT License. Use, reproduction, distribution, and modification of this code is subject to the terms and conditions of the MIT license, available at http://www.opensource.org/licenses/MIT.