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. :)

37 comments

  1. Enrico Corinti

    Hi Giulio,
    is it possible to fetch a tag feed instead your personal one?
    Would you mind if I use your code in a WordPress Plugin with your reference?
    Great job!
    Thanks in advance.

    Enrico

  2. Giulio Pons

    Hi Enrico, I think it’s not possible to fetch the tag instead of user, because there isn’t any public feed for tags (at this moment).
    Sure, you can use my code in your wordpress plugin (tell me the plugin name so I will make a post about it).

  3. R2

    Hi Giulio,
    i’m not good with php, but i can manage a little bit of html. What i have to change in your file? I change only usernname at line 6, but it doesnt work.
    Can you help telling what i have to change before upolad the page on my web site?

    thanks!

  4. Jelleke

    Hi Giulio, thanks for this! Works like a charm. I was wondering though, what one has to do to for example only have the last 9 images shown instead of all of them. My PHP skill unfortunately is not high enough to work it out myself at this point.

  5. Patrick

    is it possible to set a default link for the images, I.E. if the user clicks the image it will direct them to my account at followgram?

  6. Bryan

    Hi Giulio, something like this was asked already, but is it possible to only get the last 4 images from your feed instead of all of them?

  7. Tom

    how odd – it seems to double the size of my images (ive changed the css with luck) they appear at 612px!

    Great script and work around

  8. Daniel

    Is there a way for the script to auto scale them down to the size you have them as my images are larger but i would like them to be the size as org code.

  9. c.note

    This URL only shows the first 20 images on the rss feed is there a parameter I can add to the URL show all images.
    $url = “http://followgram.me/”.$u.”/rss”;
    Anyone know is this can be done? Thanks

  10. Giulio

    Hi Giulio, I follow your steps to add my instagram library on my website. Thank you very much, but now I have a problem because on my site, there are only 20 pictures of 74 than I have, I don’t know they don’t show all of my pictures!!!

    http://www.oriolinchina.com/html/scenes.php

    I would love if you could help me! Thank you very much!

    Oriol!

  11. Jerry

    Can’t use this bitch :|

    I editted everything but it seems won’t want to work..

    Sorry for my bad english, not my mother language haha..

  12. Janni aka Gulde

    Thanks alot for this. I’ve based an alternated version on this for a thumb-stream that fetches and merches the stream of both my Instagram and twitpic feeds.

    You see, I like to go for twitpic when I want to upload a pic, and have no acces to WiFi (I do a MMS-email workaround then ^^).

    It seems to be working fine ^^

  13. Johan

    Hi Giulio,

    I’m running your code on my website with username in place and vanity URL active on followgram.me but al I get is a black page. No photos. What could I be missing?

    // Johan

  14. Dani

    Thanks for providing this script and it works well. With a few modifications, I was able to implement fancybox as well.

    I do have 2 questions:

    1) How can I reduce the time for the cache? I want to change it to 15 minutes instead of 2 hours.

    2) How can I limit it to the last 10 or 20 images from my feed?

    Thanks for the great script.

  15. Giulio Pons

    You can’t. It’s a feed. Everytime it retrieves data the photos are appended to your file. But the feed from followgram retrieves always the last 20 images… (or 10).

  16. Jesse

    hey thanks for this
    Im not great with PHP, just enough to be dangerous :0
    Im getting an error

    Warning: fread() [function.fread]: Length parameter must be greater than 0 in D:\hosting\8423222\html\dev\index.php on line 61

    any ideas?
    Thanks a mint

  17. Giulio Pons

    your script is loading a file that is 0 byte. this should not be an error, since the first time the file is empty, or – if nothing is found on the feed – the file still remains 0 byte lenght. Just puy a @ before fread. @fread(…. this should avoid the warning message.

  18. Bill

    Thank you for taking the time to share this info. It is appreciated. I have everything working except the file size. They all come in _7 large and I want _5 small. You made mention in an earlier response to changing this, but I can not figure out how. I tried changing the str_replace values but nothing changed. I would really appreciate some direction on how to get the smaller size to show up. Thanks.

  19. Bill

    Hey Giulio. I solved the image size issue, but have one other question. Is there a way to have the images clickable by pulling in the link to the instagram page? Thanks, Bill

  20. Giulio Pons

    No. This is not possible since there isn’t the code of the page on instagram. Probably this script now che be changed using the official instagram user page…

  21. Bill

    Thanks for the quick response. In the end, I’m trying to find a work around for a client need. Client site is built in Drupal and saw demo of site where person took a picture on phone with Instagram and appeared on website with clickable link to Instagram site. Unfortunately that site was built in WordPress and there is a plugin that is doing all the heavy lifting. Someone started a Drupal Module, but it is in beta. Might have to wait unless you have any other ideas. Thanks again for your time. Regards. Bill

  22. Pingback: How to use Instagr.am photos on your site | TCNews24.it
  23. Juan

    Hello there! I was thinking about the way to retrieve one only image. Would be it possible to show only the first ‘ul li:first’ element and do a ‘display:none’ for the remaining?

    Cheers

  24. Hob

    Hi,

    How can i get it to create the xml file in an absolute location rather then relative.

    I want to include the instagram feed on many pages.

    Thanks