Làm thế nào để tạo các bản xem trước liên kết như trong Facebook/Linkedin

Tôi đang tạo một ứng dụng web bằng cách sử dụng ngăn xếp trung bình.Nó sẽ có một hộp nhập nơi người dùng có thể viết bất cứ thứ gì sẽ được lưu trữ trong mongo db và sau đó được hiển thị bằng góc. Nó tương tự như một nguồn cấp tin tức. Vì vậy, người dùng thậm chí có thể nhập url mà tôi đã trích xuất thành công từ văn bản và đã chuyển đổi chúng thành liên kết. Tôi muốn làm một cái gì đó giống như những gì Facebook và LinkedIn không ..Làm thế nào để tạo các bản xem trước liên kết như trong Facebook/Linkedin

enter image description here

Cạo url nhất định và hiển thị hình ảnh chính và tiêu đề, nhưng điều này nên được thực hiện trong góc mà không đi đến nút.

Có cách nào để thực hiện việc này trong trình duyệt không? Với nút, tính năng này hoạt động với tôi bằng cách sử dụng node.io

Nguồn

2014-06-05 Srinath

câu hỏi Khuyến nghị là off-topic cho [để] . Vui lòng mô tả chính xác những gì bạn đang cố gắng thực hiện và nơi bạn đang gặp sự cố khi triển khai. – Lix

Tôi đang xây dựng một ứng dụng web có nguồn cấp tin tức và một phần của nó đang hiển thị bản xem trước của các liên kết. Vì vậy, bất cứ khi nào có bất kỳ thay đổi nào được thực hiện trong hộp nhập liệu, tôi sẽ kiểm tra xem nó có chứa liên kết hay không và nếu tôi có yêu cầu http gửi liên kết và sử dụng node.io tôi đang xóa liên kết để lấy hình ảnh và văn bản chính gửi trả lời. Phương pháp này đòi hỏi rất nhiều cuộc gọi http .. có cách nào tôi có thể trực tiếp xóa url khỏi góc cạnh ...? – Srinath

@ArtjomB. Mặc dù các câu hỏi hơi giống nhau, tôi đã trả lời nó bằng một ngôn ngữ khác (javascript) với mã của riêng tôi. Tôi cũng đã đề cập đến liên kết trong câu trả lời của tôi. Tôi đã hỏi câu hỏi khi tôi cảm thấy nó không có câu trả lời hay cho một ngôn ngữ cụ thể, và bản thân tôi đã tìm thấy/đã viết một câu trả lời tốt hơn. Câu hỏi đó cũng bị đóng và do đó sẽ không chấp nhận câu trả lời mới – Srinath

Sau nhiều giờ googling, tôi tự tìm thấy câu trả lời .. đã có câu hỏi trong SO Is there open-source code for making 'link preview' text and icons, like in facebook?. Vì vậy, chúng ta có thể sử dụng liên kết này http://api.embed.ly/1/oembed?url=YOUR-URL qua http GET nơi chúng tôi nhận được thẻ meta trong định dạng json .. tôi đã viết mã riêng của tôi sử dụng JSdom và ở đây đi mã ...

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

và mã góc

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

khi bạn nhận được đối tượng JSON bạn có thể hiển thị nó trong bất cứ phong cách nào bạn muốn.

Nguồn

2014-06-17 14:52:25 Srinath

Thật không may, mỗi yêu cầu mất khá nhiều thời gian sử dụng phương pháp này. Ít nhất 5-10 giây cho mỗi yêu cầu. – Fizzix

@Fizzix Đã 2 năm kể từ khi tôi mã hóa điều này, nhưng AFAIR tôi vừa gửi url (cái cần xem trước) đến phía máy chủ để xóa nó và gửi lại tất cả các thẻ meta cần thiết cho phía máy khách. Vì vậy, thời gian yêu cầu phụ thuộc vào nơi bạn đang lưu trữ máy chủ của bạn và nó nhanh như thế nào. – Srinath

Tôi biết đây là một bài đăng cũ của 1 năm +, nhưng có bạn bây giờ, bởi bất kỳ cơ hội tìm thấy một cách tốt hơn để làm điều này một cách đầy hứa hẹn hơn? – Dhammika

Nếu bất kỳ ai vẫn đang tìm kiếm câu trả lời, tôi khuyên bạn nên xem http://ogp.me. Nó hoạt động trên Telegram messenger, Facebook, bất hòa, vv

Tôi đã làm một bộ xương của việc sử dụng của nó trong dự án này 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>

Nguồn

2017-10-27 17:49:35 Default

Trong khi liên kết này có thể trả lời câu hỏi, tốt hơn nên bao gồm các phần thiết yếu của câu trả lời ở đây và cung cấp liên kết để tham khảo. Câu trả lời chỉ liên kết có thể trở thành không hợp lệ nếu trang được liên kết thay đổi. - [Từ đánh giá] (/ đánh giá/bài đăng chất lượng thấp/17761043) – alex

Làm thế nào để tạo các bản xem trước liên kết như trong Facebook/Linkedin

Trả lời

Các vấn đề liên quan