Create link previews on the client side, like in Facebook/LinkedIn

后端未结

关注

 3  1929

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:

相关标签:

3条回答

名媛妹妹

2020-12-23 15:35

If anybody is still looking for an answer, I recommend you to see http://ogp.me. It works on Telegram messenger, Facebook, Discord, etc.

I did a skeleton of its usage in this project https://github.com/pBouillon/Sublime_text_snippets/blob/master/html_core.sublime-snippet

<head>
  <!-- open graph -->
    <!-- Informations -->
      <meta property="og:description" content="OPEN_GRAPH_DESCRIPTION" />
      <meta property="og:title" content="OPEN_GRAPH_TITLE" />
      <meta property="og:type"  content="website" />
      <meta property="og:url"   content="WEBSITE_URL" />
    <!-- Image -->
      <meta property="og:image" content="URL_TO_IMAGE" />
      <meta property="og:image:alt"    content="Website icon" />
      <meta property="og:image:height" content="80" />
      <meta property="og:image:secure_url" content="URL_TO_IMAGE" />
      <meta property="og:image:type"  content="image/png" />
      <meta property="og:image:width" content="80" />
      <meta property="og:locale" content="en_GB" />
</head>

0 讨论(0)

悲&欢浪女

2020-12-23 15:42

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.

0 讨论(0)

自闭症患者

2020-12-23 15:46

Yes, you can generate link previews completely on the client, which is how link previews should be generated anyway, for efficiency and to avoid DOS-ing your server.

To find a client-side library that does link previews, search GitHub for "link preview", and narrow down the search to JavaScript.

0 讨论(0)
发布评论:

提交评论
- 加载中...