How to use 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…

August 18, 2011

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. 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 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 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 server) and output it in a minimalistic html good for any pc, iphone or ipad.

This is the result:

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

This is the content of my index.php file.

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

// ----------------------------------------------------------------------
$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"; // your page title
// ----------------------------------------------------------------------

function getFollowgram($u) {
	// function read instagram feed through service, thanks Fabio Lalli
	// twitter @fabiolalli
	$url = "".$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;
	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));

// -----------------------------------------------
// 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');

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""><html>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="content-language" content="it" />
	<script src=""></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" />
		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;}
		$(document).ready(function() {
			$('li span').hide();
			$('li').mouseenter(function(){ $(this).find('span').show(); });
			$('li').mouseleave(function(){ $(this).find('span').hide(); });
		} );

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


I'm a software engineer, an everyday web developer and a maker. I usually build sites with PHP, within or without WordPress. I build Internet of Things with Arduino and ESP8266. I'm the founder of and and I'm actually the Chief Technical Officer of Better Days web agency.

Comments on “How to use photos on your site”

37 thoughts

  1. 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.


  2. Giulio Pons says:

    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 says:

    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?


  4. Giulio Pons says:

    You have to open your vanity url on and then you can use my script.

  5. Jelleke says:

    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.

  6. Wesley Hall says:

    This was the perfect solution – and it is very well written. Thank you for taking the time to help out!

  7. adchamoon says:

    Got a vanity url, replaced it and didnt work.

  8. misha says:

    i’m having mixed luck. do permissions need to be set for the folder or anything??

  9. Giulio Pons says:

    yes you have to add permissions.

  10. Patrick says:

    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?

  11. Bryan says:

    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?

  12. Tom says:

    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

  13. Tom says:

    forget that last one – Ive figured it out!

    Thanks a million for this example!

  14. Daniel says:

    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.

  15. c.note says:

    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 = “”.$u.”/rss”;
    Anyone know is this can be done? Thanks

  16. Giulio says:

    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!!!

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


  17. Pin says:

    Can I retrieve feed that include ‘Liked’ pictures only.

  18. Jerry says:

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

  19. Marion says:

    This is really well done. I love the simplicity. Thanks for sharing!

  20. stew says:

    Hi thanks for tutorial
    in my site the images not show correclty, can help me?

  21. 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 ^^

  22. Johan says:

    Hi Giulio,

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

    // Johan

  23. Dani says:

    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.

  24. jesper says:

    is it posible to add css id os class to images so you can scale them to 300px x 300px???

  25. Giulio Pons says:

    Not with this code!

  26. Giulio Pons says:

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

  27. Giulio Pons says:

    change the name of the jpg file… instagram files are with “_7” at the end. “_7” is big file, “_6” is medium, “_5” is small!

  28. Jesse says:

    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

  29. Giulio Pons says:

    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.

  30. Bill says:

    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.

  31. Bill says:

    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

  32. Giulio Pons says:

    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…

  33. Bill says:

    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

  34. Juan says:

    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?


  35. Hob says:


    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.


Comments are closed


Get instagram data without official api in PHP

Instagram has an official API to interact with its database of images and users. If you have enough time to…

December 3, 2013

Make a cron job with IFTTT

Cron is a software utility, a time-based job scheduler in Unix-like computer operating systems. People who set up and maintain…

November 12, 2013

How to read facebook likes count from PHP

When you add facebook like button to your site, probably, you also want to save the number of likes of…

October 8, 2012

How to add rel=”nofollow” to links with preg_replace()

Adding rel="nofollow" to external link is a good SEO practice.

September 22, 2015

Optimize WordPress, a long list of tips

In the above image you can see your WordPress before reading this post, and after the optimizations you will make…

September 15, 2015

Limit the number of categories for posts in WordPress

CHOOSE ONLY ONE CATEGORY WORDPRESS If you need to limit the number of categories used by the authors of your…

September 14, 2015