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