Detection and display of links in the text area of ​​the form

Question

When I enter a link (video, image, URL, etc.) to Facebook "What do you think?" forms, it automatically detects the link and converts it into a thumbnail with a brief description under the text area. Can someone give me an idea or a link to find out how to do this?

Answer 1

There is javascript associated with the textarea change event. Javascript detects if the contents of the text area is a URL, if so, javascript calls a web service that visits the URL looking for the page title, page description, etc. (Or meta tags of an open protocol protocol) if it is, find each of the tags that they return in javascript that it properly organizes.

Facebook also caches this content, and if the same URL is sent by another user, it uses cache values, not a page revision.

Meta tags of an open protocol protocol:

http://developers.facebook.com/docs/opengraphprotocol/ 

Answer 2

using something like

 var input = document.getElementById("textarea"); input.addEventListener("change", checkLink(e)); input.addEventListener("blur", checkLink(e)); function checkText(text){ var exp = "((ht|f)tp(s?))(:((\/\/)(?!\/)))(((w){3}\.)?)([a-zA-Z0-9\-_]+(\.(com|edu|gov|int|mil|net|org|biz|info|name|pro|museum|co\.uk)))(\/(?!\/))(([a-zA-Z0-9\-_\/]*)?)([a-zA-Z0-9])+\.((jpg|jpeg|gif|png)(?!(\w|\W)))"; return text.match(exp); } function checkLink(e){ //here you would want to use a regular expression and check for http: var regularExpression = !!checkText(e.target.innerHTML); // returns true or false if(regularExpression){ e.target.innerHTML += "<a href='#'><img src="" alt="" /></a>"; } } 

good resource for regular expressions - http://regexlib.com/Search.aspx?k=image&c=-1&m=-1&ps=20

Answer 3

Warning - must be left to work so that regular expressions are not checked.

Take the link value and run it through a regular expression that looks for ^http:...[^\s] or ^https:...[^\s] and returns them.

Then pass these URLs to your server and get your server to receive the document and return the snippet for you, and then enter your document. You must have your own server, because Javascript has security restrictions. Google same origin policy for more information.