How to load metadata from web url similar to what facebook doing when we post url on status update...?

Question

I want to load metadata, like title, logo, description from a website url using AngularJS/Javascript similar to the one facebook status update feature which loads metadata when we paste a website url. Is there any API for this?

Answer 1

I believe that it not an API; but an intelligent algorithm that pulling the content (HTTP GET) in the background reading the metadata and creating the view for you.

You should be able to do the same.

Do a HTTP GET on the URL and read the metadata.

<meta property="og:image" content="[url to image]" />
<meta property="og:title" content="[page name]" />
<meta property="og:description" content="[content description]" />

Answer 2

Actually with HTML5 proxy it is possible:

Utility function to read all attributes (just for this sample):

(function($) {
    $.fn.getAttributes = function() {
        var attributes = {}; 

        if( this.length ) {
            $.each( this[0].attributes, function( index, attr ) {
                attributes[ attr.name ] = attr.value;
            } ); 
        }

        return attributes;
    };
})(jQuery);

A code:

$.get(
    'http://www.corsproxy.com/' +
    'en.wikipedia.org/wiki/Cross-origin_resource_sharing',
    function(response) {
        var a = $(response);
        for(var i = 0; i < a.length; i++) {
            if (typeof $(a[i]).prop("tagName") != 'undefined' && $(a[i]).prop("tagName").toLowerCase() == 'meta')
            console.log($(a[i]).getAttributes());
        }
});

How it works: proxy at corsproxy.com uses CORS (HTML5 feature to solve problem with the same origin policy). Read in details this answer Loading cross domain endpoint with jQuery AJAX.

Then create jQuery object from the page, search for all meta tags and get their attributes (select those, which you need).

If you are afraid of using a thirdparty web site, then the only way is to create a script on your server, send url to it via AJAX, load page to the server and return it to a client, and then find all meta tags.

In a case when you don't want to load the whole page, you can load only the first part (which contains tag - all tags should be inside it according to the HTML specification):

var xhr = new XMLHttpRequest();

xhr.addEventListener("progress", updateProgress, false);
xhr.addEventListener("load", transferComplete, false);
xhr.addEventListener("error", transferFailed, false);
xhr.addEventListener("abort", transferCanceled, false);

xhr.open("GET", 'http://www.corsproxy.com/' +
    'en.wikipedia.org/wiki/List_of_law_clerks_of_the_Supreme_Court_of_the_United_States?1234', true);
xhr.send(null);
var nextLine = 0;
var resp = '';

// progress on transfers from the server to the client (downloads)
function updateProgress(evt) {
    resp = xhr.response.slice(nextLine);
    console.log(resp.length);
    if (resp.indexOf('</head>') != -1) {
        var a = $(resp);
        for(var i = 0; i < a.length; i++) {
            if (typeof $(a[i]).prop("tagName") != 'undefined' && $(a[i]).prop("tagName").toLowerCase() == 'meta')
                console.log($(a[i]).getAttributes());
        }
        xhr.abort();
    }
    nextLine = xhr.response.length;
}

function transferComplete(evt) {
    console.log("The transfer is complete.");
}

function transferFailed(evt) {
    console.log("An error occurred while transferring the file.");
}

function transferCanceled(evt) {
    console.log("The transfer has been canceled by the user.");
}