JQuery Open Graph Example

The following JQuery example shows how a user might use Opengraph.io to get a website’s title, description, and icon given the URL. The need for this sort of information is very common when creating an application that posts content onto social media sites such as Facebook (see screenshot to the right) or Linkedin where the user wants to control how the link is displayed.

Open Graph Results

Javascript Code

var url = 'http://cnet.com';

var urlEncoded = encodeURIComponent(url);

var apiKey 'xxxxxxxxxx';

 

⁄⁄ The entire request is just a simple get request with optional query parameters

var url = 'https://opengraph.io/api/1.1/site' + urlEncoded + '?app_id=' + apiKey;

 

$('#loadOpenGraphData').click(function(){

  $.getJSON(requestUrl, function(json) {

    console.log('hey result', siteInfo);

 

    ⁄⁄ Throw the object in the console to see what it looks like!

     console.log('json', json

 

    ⁄⁄ Update the HTML elements!

    $('#title').text(json.hybridGraph.title);

    $('#description').text(json.hybridGraph.description);

    $('#icon').attr('src', json.hybridGraph.image);

  });

});