<html>
  <body>
    <button id="loadOpenGraphData">Load OpenGraph Data</button>
    <hr/>
    <div>
      <div style="width: 100px; float: left;">
        <img id="icon" style="width: 90px;" />      
      </div>
      <div>
        <h2 id="title"></h2>
        <span id="description"></span>
      </div>
    </div>
  </body>
</html>
var url = 'http://cnet.com';
var urlEncoded = encodeURIComponent(url);
var apiKey = 'xxxxxx'; // <-- Replace with your app_id from https://www.opengraph.io/

// 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(){
  if(apiKey === 'xxxxxx'){
    return alert('Please set your apiKey on line 3!');
  }

  
  $.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);

  });    
});


       

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js