How to use Instagr.am photos on your site

UPDATE: 2013-12-04 I’ve made a method in the Mini Bots PHP Class that lets you retrieve images from instagram without the official api and without using Followgram as written here.

The question is: how can I bring my instagram photos on my personal web site?

With this tutorial you can make this.

I’m addicted to Instagram, I make photos quite every day with it. But I’m also a developer, and I already have a personal portfolio for my photos… which became obsolete since it’s a year that I don’t update it. Instagr.am is only on iPhone. There isn’t your page with photos online, but there are few APIs that can be used to retrieve your photos and infos and, there isn’t any public feed to retrieve photos.

So long: how can I bring my instagram photos on my personal web site? Thanks to followgram.me you can create your “vanity url” that is to say that you can register simply by logging in with your instagram account (oAuth is performed) and create a simple and nice url with your photos, like followgram.me/giuliopons. This page, with his customizable UI, can be OK for many users, but not for me. :-) I want only photos, and nothing else matters.
Since on my vanity URL there is also a feed that publishes, in a public feed, my pictures I’ve decided that this will be my door to my photos, without using the instagram API and their oAuth integration.

I’ve written the following code that read the feed, parse it, get pictures links and infos, store data (not pictures) in a local file (and periodically check if there are new photos without overloading followgram.me server) and output it in a minimalistic html good for any pc, iphone or ipad.

This is the result: www.ku-ku.it

So, if you want to do the same, make your vanity url on Followgram.me and use this code in your site:

This is the content of my index.php file.

<?
ini_set('default_charset', 'UTF-8');

// ----------------------------------------------------------------------
// CONFIG
$instagram_user = "giuliopons"; // your instagram username
$cachetime = 2; // 2 hours
$file = $instagram_user."_instagram.txt"; // file used to cache content
$TITLE = "Foto di Giulio Pons e Roberta Casaliggi con instagr.am"; // your page title
// ----------------------------------------------------------------------

function getFollowgram($u) {
	// function read instagram feed through followgram.me service, thanks Fabio Lalli
	// twitter @fabiolalli
	$url = "http://followgram.me/".$u."/rss";
	$s = file_get_contents($url);
	preg_match_all('#<item>(.*)</item>#Us', $s, $items);
	$ar = array();
	for($i=0;$i<count($items[1]);$i++) {
		$item = $items[1][$i];
		preg_match_all('#<link>(.*)</link>#Us', $item, $temp);
		$link = $temp[1][0];
		preg_match_all('#<pubDate>(.*)</pubDate>#Us', $item, $temp);
		$date = date("d-m-Y H:i:s",strtotime($temp[1][0]));
		preg_match_all('#<title>(.*)</title>#Us', $item, $temp);
		$title = $temp[1][0];
		preg_match_all('#<img src="([^>]*)">#Us', $item, $temp);
		$thumb = $temp[1][0];
		$ar['date'][$i] = $date;
		$ar['image'][$i] = str_replace("_5.jpg","_6.jpg",$thumb);
		$ar['bigimage'][$i] = str_replace("_5.jpg","_7.jpg",$thumb);
		$ar['link'][$i] = $link;
		$ar['title'][$i] = $title;
	}
	return $ar;
}

function checkValidFile($f,$hours) {
	// Function thar check if a file is older than X hours
	$durata=60*60 * $hours;
	$daquanto=$durata+1;
	if (file_exists($f)) $daquanto=time()-filemtime($f); else return false;
	if ($daquanto<=$durata) {
		// existing file is still valid
		$t = ($durata-$daquanto);
		$s = $t % 60;
		$m = floor($t/60) % 60;
		$h = floor($t/3600) % 24;
		$g = floor($t/3600/24);
		return true;
	} else {
		// existing file is old
		return false;
	}
}

// -----------------------------------------------
// load cached file
if (!file_exists($file)) $archive=""; else {
	$rHandle = fopen($file, 'r');
	$archive = fread($rHandle, filesize($file));
	fclose($rHandle);
}

// -----------------------------------------------
// check for new feed every X hours
if(!checkValidFile($file, $cachetime)) {
	$r = getFollowgram($instagram_user);
	// add new images to archive file
	for ($i=floor(count($r,COUNT_RECURSIVE)/count($r)); $i>=0; $i--) {
		if($r['image'][$i]) {
			$temp = "<li><img src='".$r['image'][$i]."'/><span>".$r['date'][$i]."<br/>".$r['title'][$i]."</span></li>";
			if(!stristr($archive,basename($r['image'][$i]))) $archive = $temp.$archive;
		}
	}
	// save new file
	$f = fopen($file,'w');
	fwrite($f,$archive);
}

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="content-language" content="it" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
	<meta content="yes" name="apple-mobile-web-app-capable" />
	<meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport" />
	<title><?=$TITLE?></title>
	<style>
		body { background-color:#000; margin:0;padding:3px;}
		ul,li {list-style:none;margin:0 auto;padding:0;}
		li { float:left; width:306px;height:306px;position:relative;}
		li span { position:absolute; left:0;bottom:0;background-color:#000;color:#fff; height:auto;font-family:trebuchet ms,trebuchet;font-size:12px;width:300px;padding:3px;}
	</style>
	<script>
		$(document).ready(function() {
			$('li span').hide();
			$('li').mouseenter(function(){ $(this).find('span').show(); });
			$('li').mouseleave(function(){ $(this).find('span').hide(); });
		} );
	</script>
</head>
<body>
<ul><?=$archive?></ul>
</body>
</html>

I hope this will be enaugh for you to use it on your site. :)