FacebookOpengraphInputJQuery 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.

 

Javascript Code

var url = 'http://cnet.com';
var urlEncoded = encodeURIComponent(url);
var apiKey = 'xxxxxxxxx'; // <-- Replace with your AppId

// The entire request is just a simple get request with optional query parameters
var requestUrl = 'https://opengraph.io/api/1.1/site/' + urlEncoded + '?app_id=' + apiKey;

$('#loadOpenGraphData').click(function(){
  $.getJSON(requestUrl, function( json ) {
  
    // 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);

  });    
});

Below is a fully functional CodePen that you can play with to see how this example works.

See the Pen LkZRGg by Justin (@primeobsession) on CodePen.0