<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);
});
});
This Pen doesn't use any external CSS resources.