YQL like Facebook site preview
HTML
<div id="page" style="background-color:#C00;color:#CCC">
<div id="main" role="main" style="margin:10px">
<section id="input">
<form id="preview">
<div class="row">
<label id="labelurl" for="url" style="display:none;">Link Attached</label>
<input value="http://www.repubblica.it/politica/2012/10/06/dirette/primarie_al_via_l_assemblea_pd_si_cerca_l_accordo_sulle_regole-43964405/" type="text" id="url" name="url" class="text" placeholder="http://" size="60" onclick="clearURL()" />
</div>
<input type="submit" id="submit" value="Embed Link" style=’-moz-user-select: none;background:#cc0000;border: 1px solid #990000;box-shadow: 0 1px #cc3300 inset;color: white;padding: 3px 5px;text-decoration: none;text-shadow: 0 -1px 0 #990000;font: 12px Verdana, sans-serif;display:none’/>
</form>
</section>
<section id="results"></section>
</div>
CSS
ul.image-select {
}
.image-select li{
display: inline;
list-style-type: none;
padding-right: 20px;
max-width:100px;
overflow:hidden;
}
.image-select li{
display: inline;
}
JavaScript
/**
* Create a Link Preview
* Using YQL for cross domain data scraping
*
* http://www.facebook.com/Who.Sees.What
* @author whoseeswhat.com (contribution of Jocelyn (@jsfwd / ninjagirl.com))
* still problems with imgs, find some correction
*/
(function($)
{
$(document).ready(function()
{
$('#preview').bind('submit', function(e)
{
e.preventDefault();
// get the url, just going to assume a valid link's been entered
var url = 'http://wimi5.com/wimi5-primer-motor-videojuego-html5/';
if (url.substring(0, 4) == 'http')
{
getLinkMeta(url);
}
else
{
displayMessage('URL must start with <em>http://</em>', 'error');
}
return false;
});
/**
* Using a supplied url, fetch the title, description and image to display
* as a preview
*
* @param url assume this is a valid url
*/
function getLinkMeta(url)
{
// SELECT * FROM html WHERE url="http://mashable.com/2012/01/25/get-old-facebook-back" and xpath="//title|//head/meta"
// can't use xpath to select meta 'property' attributes (ex./ og:image)
// YQL's html data table run through HTML Tidy which strips as it thinks invalid
// create the yql query (encoded!) with the url provided
var q = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent('select * from html where url="' + url + '" and (xpath="//title|//head/meta")') + '&format=json&callback=?';
console.log(q);
$.ajax(
{
type: 'GET',
url: q,
dataType: 'jsonp',
error: function(d,t){
$("#imageplace-before").append("Errore nel parsing del DOM...