Making nice schnipsel von URL parse (wie in WhatsApp, Viber, Skype)

Question

Wir haben Chat auf unserer Website und wollen es verbessern. Benutzer senden einander oft Links zu Nachrichtenseiten, Artikel, YouTube-Videos etc

Wir wollen diese Links schöne Bilder mit ein paar Informationen konvertieren, auch bekannt als „Schnipsel“ Hier Beispiele sind

Beispiel, Facebook Chat: http://c2n.me/3z442bv.jpg Skype: http://c2n.me/3z44a60.jpg

aber es bedeutet, eigenen Parser zu programmieren, der komplizierte Aufgabe ist. Gibt es fertige Bibliotheken, Websites, die solche Dienste anbieten?

Vielen Dank!

Answer 1

Sie können mit Open Graph-Parser
zum Beispiel (Open Graph-Parser in JQuery) und Sie können viele anderen Parser
https://github.com/fiann/jquery.ogp

heute meist jede Website verwendet Open Graph-Tags finden.

bearbeiten (Plugin-Code von oben Github-Repository)

(function($) { 

    var checkNamespacePresent = function (node) { 
    console.log("Checking for namespace on node", node); 
    var i, attr, attributes = node.attributes || {}; 
    // we're looking for xmlns:og="http://opengraphprotocol.org/schema/" 
    for (i = 0; i < attributes.length; i++) { 
     attr = attributes[i]; 
     if (attr.nodeName.substring(0,5) === "xmlns" && 
      attr.nodeValue === "http://opengraphprotocol.org/schema/") { 
     return attr.nodeName.substring(6); 
     } 
    } 
    return null; 
    } 

    $.fn.ogp = function() { 
    var ns = null, data = {}; 
    $(this).each(function() { 
     $(this).parents().andSelf().each(function() { 
     ns = checkNamespacePresent(this); 
     console.log("Found %s on", ns, this); 
     if (ns !== null) { 
      return false; 
     } 
     }); 

     // give up if no namespace 
     if (ns === null) { 
     console.log("No namespace found"); 
     return null; 
     } 

     // look for OGP data 
     ns = ns + ":"; 
     $('meta', this).each(function() { 
     console.log("Looking for data in element", this); 
     var prop = $(this).attr("property"), key, value; 
     if (prop && prop.substring(0, ns.length) === ns) { 
      key = prop.substring(ns.length); 
      value = $(this).attr("content"); 
      console.log("Found OGP data %s=%s", key, value); 
      data[key] = data[key] || []; 
      data[key].push(value); 
     } 
     }); 
    }); 

    // this is the total of everything 
    console.log("All the data is ", data); 

    return data; 
    } 
})(jQuery);