Facebook/Linkedin에서 링크 미리보기를 만드는 법

평균 스택을 사용하여 웹 앱을 만들고 있습니다. 입력 상자에 mongo db에 저장되고 나중에 각도를 사용하여 표시되는 입력란이 있습니다. 뉴스 피드와 비슷합니다. 따라서 사용자는 텍스트에서 성공적으로 추출한 URL을 입력하여 링크로 변환 할 수도 있습니다. 나는Facebook/Linkedin에서 링크 미리보기를 만드는 법

enter image description here

.. 페이스 북과 링크드 인은 무엇을 같은 뭔가를 긁어 주어진 URL을 원하고 주요 이미지와 제목을 표시 할 수 있지만이 노드로 이동하지 않고 각도에서 수행해야합니다.

브라우저에서이를 수행 할 수있는 방법이 있습니까? 노드가 나를 위해 일하고있다 node.io

출처

2014-06-05 Srinath

추천 질문 오프 주제입니다 나는이 프로젝트에 그 사용의 골격을했다

등 전보 메신저, 페이스 북, 불화, 작동 [그래서] . 자신이하려는 일과 문제가있는 곳을 정확하게 설명하십시오. – Lix

잘 나는 뉴스 피드를 가지고있는 webapp를 만들고 있는데, 그 중 한 부분은 링크 미리보기를 보여주고있다. 그래서 모든 변경 사항이 입력 상자에서 만들어지면 링크가 포함되어 있는지 확인하고 있습니다. 링크가 있으면 http 요청을 보내고 node.io를 사용하여 링크를 스크랩하여 주 이미지와 텍스트를 가져옵니다. 응답으로 보내기. 이 방법은 많은 http 호출을 필요로합니다. 각도에서 URL을 직접 스크랩 할 수있는 방법이 있습니까? – Srinath

@ArtjomB. 질문은 조금 비슷하지만, 나는 다른 언어 (자바 스크립트)로 내 자신의 코드로 대답했다. 나는 또한 내 대답에 링크를 언급했다. 나는 특정 언어에 대한 좋은 대답이 없다고 느낀다. 나는 더 나은 대답을 발견/썼다. 또한 그 질문은 닫히고 따라서 새로운 대답을 받아들이지 않을 것입니다. – Srinath

Google 검색 시간이 지나서 나 자신을 찾았습니다. 이미 Is there open-source code for making 'link preview' text and icons, like in facebook?에 질문이 있습니다. 우리는 JSON 형식으로 메타 태그 어디서 그래서 우리는 .. HTTP GET을 통해 을이 링크 http://api.embed.ly/1/oembed?url=YOUR-URL을 사용할 수 있습니다 내가 내 자신의 코드가 코드를 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 객체를 일단.

출처

2014-06-17 14:52:25 Srinath

아쉽게도 각 요청에는이 메서드를 사용하는 데 꽤 오랜 시간이 걸립니다. 요청 당 최소 5-10 초. – Fizzix

@Fizzix 코드를 작성한 지 2 년이되었지만 AFAIR은 미리보기가 필요한 URL을 서버 측에 보내서이를 긁어내어 클라이언트 측에 필요한 메타 태그를 모두 되돌려 보냈습니다. 따라서 요청 시간은 서버를 호스팅하는 위치와 서버의 속도에 따라 다릅니다. – Srinath

나는 이것이 1 년 +의 오래된 게시물임을 알고 있지만, 지금 당장은 더 유망한 방법으로 이것을하는 더 좋은 방법을 찾았습니까? – Dhammika

아직 답을 찾고있는 사람이 있다면 http://ogp.me을 확인하시기 바랍니다. 이가 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>

출처

2017-10-27 17:49:35 Default

이 링크가 질문에 대답 할 수도 있지만 여기에 답의 핵심 부분을 포함시키고 참조 용 링크를 제공하는 것이 좋습니다. 링크 된 페이지가 변경되면 링크 전용 답변이 유효하지 않게 될 수 있습니다. - [From Review] (리뷰/저품절 게시물/17761043) – alex

Facebook/Linkedin에서 링크 미리보기를 만드는 법

답변

관련 문제