<button id="loadOpenGraphData">Load OpenGraph Data</button>
      <div style="width: 100px; float: left;">
        <img id="icon" style="width: 90px;" />      
        <h2 id="title"></h2>
        <span id="description"></span>
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;

  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!
    $('#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