如何创建Facebook/Linkedin中的链接预览

Question

我正在使用平均堆栈创建一个Web应用程序.它将有一个输入框,用户可以在其中编写任何将存储在mongo db中的内容,然后使用angular显示.它类似于新闻源.因此,用户甚至可以输入我从文本中成功提取的URL并将其转换为链接.我想做像facebook和linkedin那样的事情.

刮取给定的URL并显示其主图像和标题,但这应该以角度完成而不进入节点.

有没有办法在浏览器中执行此操作？使用node.io可以使用node

Answer 1

经过几个小时的谷歌搜索,我自己找到了答案..已经有一个问题那么是否有开源代码制作'链接预览'文本和图标,就像在Facebook？.所以我们可以通过http GET 使用这个链接http://api.embed.ly/1/oembed?url=YOUR-URL,我们以json格式获取元标记.我使用JSdom编写了我自己的代码,这里是码...

服务器端代码:

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 );
        }
    } );
} );

和角度代码

$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
});

获得JSON对象后,您可以以任何您想要的样式显示它.