Using the OpenGraph API is very simple
But who doesn’t love a little copy and paste action? Below are links to example code for various languages.
If there is a language you think we are missing please let us know!
General Information
We generally recommend that users utilize whichever library they would normally use to make HTTP requests. Since all authentication and request information is passed to OpenGraph via HTTP GET parameters, any HTTP client will work. All responses from OpenGraph.io are returned in JSON and use the same formatting.
Examples
Ruby
C#
Php
NodeJS
JQuery
Ruby Open Graph Example
The following Ruby example shows how a user might use Opengraph.io to get a website’s title, description, and icon given a URL. This example makes use of ExpressJS to proxy the request from a web user onto the OpenGraph.io API. This approach is often more appropriate in applications than sending traffic directly to OpenGraph.io’s server in that you have the ability to hide your API token and you can also perform any pre/post processing on the server rather than bogging down the client’s browser. The need for a function like this 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. If you would like more examples of how to use this the OpenGraph API, please check out the README for our Ruby module.
Ruby Code
require 'opengraph-io'
opengraph = OpenGraphIO.new({app_id: '!!!!YOUR_APP_ID!!!'})
ogData = opengraph.get_site_info('https://github.com')
siteDescription = ogData["hybridGraph"]["description"]
print siteDescription
To get the code above working, create a new directory and change into that directory from the command line (Linux or OSX)
mkdir example & cd example
Next, install the Ruby opengraph-io package
gem install -user-install opengraph-io
Finally, run the script which outputs the hybrid description of the site as gathered by OpenGraph.io
ruby test.rb
C# Open Graph Example
The following C# .NET example shows how a user might use Opengraph.io to get a website’s title, description, and icon given a URL. This example makes use of .NET system libraries and NewtonSoft’s popular JSON.NET library to retrieve and parse results from the OpenGraph.io API. The need to gather information like this 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.
C# Code
using System;
using System.Net;
using System.IO;
using System.Json;
namespace CSharpDemo
{
class MainClass
{
public static void Main (string[] args)
{
var url ="http://cnet.com";
var urlEncoded = Uri.EscapeDataString(url);
var requestUrl = "https://opengraph.io/api/1.1/site/" + urlEncoded;
⁄⁄ Make sure to get your API key! No need for a CC
requestUrl += "?app_id=XXXXXXXXXXXXXXXXXXXXXXXX";
var request = WebRequest.Create(requestUrl);
request.ContentType = "application/json;";
string text;
var response = (HttpWebResponse)request.GetResponse();
using (var sr = new StreamReader(response.GetResponseStream()))
{
text = sr.ReadToEnd();
dynamic x = JsonConvert.DeserializeObject(text);
Console.WriteLine("Title\t\t" + x.hybridGraph.title);
Console.WriteLine("Description\t" + x.hybridGraph.description);
Console.WriteLine("Image\t\t" + x.hybridGraph.image);
}
}
}
}
PHP Open Graph Example
The following PHP example script demonstrates how a user might use Opengraph.io to get a website’s title, description, and icon given a URL. This example really just shows how to get and parse the data (normal JSON)… once you have the data you can throw it on a page similar to the way that Facebook shows link information.. The OpenGraph.io API will pull down the requested URL and determine the appropriate information from the site depending on what is available.
PHP Code
$siteUrl = 'http://cnet.com';
$requestUrl = 'https://opengraph.io/api/1.1/site/' . urlencode($siteUrl);
⁄⁄ Make sure you include your free app_id here! No CC required
$requestUrl = $requestUrl . '?app_id=XXXXXXXXXXXXXXXXXXXXXXXX';
$siteInformationJSON = file_get_contents ($requestUrl);
$siteInformation = json_decode($siteInformationJSON, true);
print ';Title\t\t'; . $siteInformation['hybridGraph']['title'] . '\n';
print 'Description\t' . $siteInformation['hybridGraph']['description'] . '\n';
print 'Logo URL\t' . $siteInformation['hybridGraph']['image'] . '\n';
To get the code above working, copy the code above into a file like test.php. Then run the following command
php test.php
NodeJS Open Graph Example
The following NodeJS example shows how a user might use Opengraph.io to get a website’s title, description, and icon given a URL. This example makes use of ExpressJS to proxy the request from a web user onto the OpenGraph.io API. This approach is often more appropriate in applications than sending traffic directly to OpenGraph.io’s server in that you have the ability to hide your API token and you can also perform any pre/post processing on the server rather than bogging down the client’s browser. The need for a function like this 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 opengraph = require('opengraph-io')({appId: 'xxxxxx'}) ⁄⁄ <-- Enter your app_id!
var express = require('express');
var app = express();
app.get('/site/info', function (req, res) {
var siteUrl = req.query['url'];
opengraph.getSiteInfo(siteUrl, function(err, siteInfo){
console.log('hey err, err);
console.log('hey result', siteInfo);
res.json(siteInfo);
});
});
app.listen(3000, function() {
console.log('Example app listening on port 3000!');
console.log('Test this proxy with the following url:', 'http://localhost:3000/site/info?url=https%3A%2F%2Fnytimes.com');
});
To get the code above working, create a new directory and change into that directory from the command line (Linux or OSX)
mkdir example & cd example
Next, initialize the node package. Enter the information you are prompted for after entering the following
npm init
Next, install the ExpressJS and https packages
npm install express opengraph-io
Finally, create a server.js file with the contents above and start the app up
node server.js
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);
});
});