web-dev-qa-db-ja.com

Facebook / LinkedInのように、クライアント側でリンクプレビューを作成します

ユーザーがURLを含む何でも書くことができる入力ボックスを備えたWebアプリを作成しています。 FacebookやLinkedInのようにリンクプレビューを作成したい：

enter image description here

サーバーを往復せずに、指定されたURLをスクレイプし、そのメイン画像と見出しを表示します。ブラウザでこれを行う方法はありますか？

javascriptweb-scraping
19
Srinath

何時間もグーグルした後、私は自分で答えを見つけました.. SO Facebookのように「リンクプレビュー」のテキストとアイコンを作成するためのオープンソースコードはありますか？ ？ 。したがって、このリンクを使用できます http://api.embed.ly/1/oembed?url=YOUR-URL http GETを介して、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 );
        }
    } );
} );

およびangularコード

$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オブジェクトを取得したら、任意のスタイルで表示できます。

10
Srinath

それでも答えを探している人がいる場合は、 http://ogp.me を参照することをお勧めします。 Telegramメッセンジャー、Facebook、Discordなどで動作します。

このプロジェクトでの使用法のスケルトンを作成しました 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>
3
Default

はい、クライアント上でリンクプレビューを完全に生成できます。これは、効率を高め、サーバーのDOS処理を回避するために、リンクプレビューを生成する方法です。

リンクプレビューを実行するクライアント側ライブラリを見つけるには、 GitHubで「リンクプレビュー」を検索し、検索をJavaScriptに絞り込みます 。

1
Dan Dascalescu