When I enter a link (video, image, URL, etc.) in Facebook's "What's on your mind?" form, it auto-detects the link and converts it to a thumbnail with a brief description below the text-area. Can anyone provide me with insight or a link to get me going on how to achieve this?

When I enter a link (video, image, URL, etc.) in Facebook's "What's on your mind?" form, it auto-detects the link and converts it to a thumbnail with a brief description below the text-area. Can anyone provide me with insight or a link to get me going on how to achieve this?

• javascript
• ruby-on-rails-3
• forms

Share Improve this question Follow asked Sep 6, 2012 at 14:46 hugohugo 1,26511 gold badge1414 silver badges2828 bronze badges 1

• Make an extensive program that detects the domain of the link, and then retrieves meaningful information from said link, and then displays it in a consistent presentable fashion. In other words, you are on your own on this one, as that is no simple piece of code. – thatidiotguy Commented Sep 6, 2012 at 14:49

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

There's a javascript attached to the textarea change event. The javascript detects if the content of the textarea is a url, if it is, the javascript call a webservice that visit the url looking for the page title, the page description, etc, (or the open graph protocol meta tags), if it find each one of the tags they are returned to the javascript who proper organize then.

Facebook also cache this content, and if the same url is posted by another user, he uses the cache values instead of revisiting the page.

The open graph protocol meta tags:

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

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\-_]+(\.(|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./Search.aspx?k=image&c=-1&m=-1&ps=20

Warning -- have to leave for work so 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 those.

Then, pass those URLs to your server and have your server retrieve the document and return a snippit for you to then put in your document. You must have your own server to help because Javascript, by itself, has security restrictions. Google same origin policy for more info.