फेसबुक/लिंक्डइन

में लिंक पूर्वावलोकन कैसे बनाएं, मैं औसत स्टैक का उपयोग करके एक वेब ऐप बना रहा हूं। इसमें एक इनपुट बॉक्स होगा जहां उपयोगकर्ता कुछ भी लिख सकता है जो मोंगो डीबी में संग्रहीत किया जाएगा और बाद में कोणीय का उपयोग करके प्रदर्शित किया जाएगा। यह एक न्यूजफीड के समान है। तो उपयोगकर्ता यूआरएल भी दर्ज कर सकता है जिसे मैंने पाठ से सफलतापूर्वक निकाला और उन्हें लिंक में परिवर्तित कर दिया। मैं क्या Facebook और LinkedIn की तरह कुछ करना चाहता हूँ ..फेसबुक/लिंक्डइन

enter image description here

परिमार्जन दिया यूआरएल और उसके मुख्य छवि और शीर्षक प्रदर्शित करते हैं, लेकिन इस नोड के लिए जा रहा बिना कोणीय में किया जाना चाहिए।

क्या ब्राउज़र में ऐसा करने का कोई तरीका है? नोड के साथ यह node.io

स्रोत

2014-06-05 Srinath

सिफ़ारिश सवालों के विषय से हटकर हैं [तो] । कृपया वर्णन करें कि आप क्या करने की कोशिश कर रहे हैं और जहां आपको इसे लागू करने में समस्याएं आ रही हैं। – Lix

अच्छी तरह से मैं एक वेबपैप बना रहा हूं जिसमें न्यूज़फीड है और इसका एक हिस्सा लिंक का पूर्वावलोकन दिखा रहा है। इसलिए जब भी इनपुट बॉक्स में कोई परिवर्तन किया जाता है, तो मैं जांच कर रहा हूं कि इसमें कोई लिंक है या नहीं और यदि मैं लिंक भेज रहा हूं और नोड.आईओ का उपयोग कर http अनुरोध कर रहा हूं, तो मैं मुख्य छवि और टेक्स्ट प्राप्त करने के लिए लिंक को स्क्रैप कर रहा हूं प्रतिक्रिया में भेजना। इस विधि के लिए बहुत सी http कॉल की आवश्यकता है .. क्या कोई तरीका है कि मैं सीधे यूआरएल को कोणीय से स्क्रैप कर सकता हूं ...? – Srinath

@ArtjomB। हालांकि प्रश्न थोड़ा समान हैं, लेकिन मैंने इसे अपने स्वयं के कोड के साथ एक अलग भाषा (जावास्क्रिप्ट) में उत्तर दिया है। मैंने अपने जवाब में लिंक का भी उल्लेख किया था। मैंने सवाल पूछा क्योंकि मुझे लगा कि उसके पास किसी विशेष भाषा के लिए कोई अच्छा जवाब नहीं था, और मैंने एक बेहतर जवाब पाया/लिखा। यह भी सवाल बंद है और इसलिए नए उत्तरों को स्वीकार नहीं किया जाएगा – Srinath

गुगलिंग के घंटों के बाद मुझे जवाब मिला .. SO Is there open-source code for making 'link preview' text and icons, like in 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 ऑब्जेक्ट आप जो कुछ भी शैली आप चाहते हैं में प्रदर्शित कर सकते हैं।

स्रोत

2014-06-17 14:52:25 Srinath

दुर्भाग्यवश, प्रत्येक विधि को इस विधि का उपयोग करके काफी लंबा समय लगता है। प्रति अनुरोध कम से कम 5-10 सेकंड। – Fizzix

@Fizzix मैंने इसे कोड करने के 2 साल बाद किया है, लेकिन AFAIR मैंने सर्वर को दूसरी तरफ यूआरएल भेजा है (जिसे पूर्वावलोकन की जरूरत है) इसे स्क्रैप करने के लिए और उन सभी आवश्यक मेटा टैग को क्लाइंट साइड पर वापस भेज दिया। इसलिए, अनुरोध का समय इस बात पर निर्भर करता है कि आप अपने सर्वर को होस्ट कर रहे हैं और यह कितनी तेज़ है। – 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

हालांकि यह लिंक प्रश्न का उत्तर दे सकता है, लेकिन यहां उत्तर के आवश्यक हिस्सों को शामिल करना बेहतर है और संदर्भ के लिए लिंक प्रदान करना बेहतर है। लिंक किए गए पृष्ठ में परिवर्तन होने पर लिंक-केवल उत्तर अमान्य हो सकते हैं। - [समीक्षा से] (/ समीक्षा/कम गुणवत्ता वाली पोस्ट/17761043) – alex

फेसबुक/लिंक्डइन

उत्तर

संबंधित मुद्दे