I am creating a web app with an input box where the user can write anything, including URLs. I want to create a link preview like Facebook and LinkedIn does:
Scrape the given URL and display its main image and heading, without a server round-trip. Is there a way to do this in the browser?
After hours of googling I found the answer myself..
there is already a question in SO Is there open-source code for making 'link preview' text and icons, like in facebook? . So we can use this link http://api.embed.ly/1/oembed?url=YOUR-URL via http GET where we get the meta tags in json format..
I wrote my own code using JSdom and here goes the code...
Server side code:
app.post( '/scrapUrl/', function( req, res ) {
var jsdom = require( 'jsdom' );
var jsonRes = {};
jsdom.env( {
url: req.body.url,
scripts: [ http://code.jquery.com/jquery.js ],
done: function( error, window ) {
var $ = window.$;
$( 'meta' ).each( function() {
var name = $( this ).attr( 'property' );
var value = $( this ).attr( 'content' );
if ( name ) {
jsonRes[ name.slice( 3 ) ] = value;
console.log( name + : + value );
}
} );
res.send( jsonRes );
}
} );
} );
and the angular code
$http.post( '/scrapUrl/', {
url: url //send the url U need to scrape
} ).then( function( res ) {
console.log(res.data)//U get the meta tags as json object
});
Once you get the JSON object you can display it in whatever style you want.
