PHP Displaying RSS Feed from Instagram

[weeb604]

Hi everyone,

 

Hoping some experts can help me out! I'm novice when it comes to coding PHP - I am fairly decent at modifying existing code written by someone else but when it comes to actually writing from scratch , definitely not my domain

 

So here is what I am doing, I am pulling an RSS feed from instagram and displaying it on a simple php page.

 

What I'm hoping to do is rather than just end up with a page full of full size images that you have to scroll down is change the picture dimension and have them either part of a table or just straight across in a line... (all the same size of course). I'd really like it to just end up 4 rows of 5 images... Hoping that might be possible?

 

 

So here's the code I'm working with:

<meta http-equiv="refresh" content="15" >

<?php

$rss = new DOMDocument();

$rss->load('http://instagram.com/tags/nhl/feed/recent.rss');

$feed = array();

foreach ($rss->getElementsByTagName('item') as $node) {

$item = array ( 

'title' => $node->getElementsByTagName('title')->item(0)->nodeValue,

'desc' => $node->getElementsByTagName('description')->item(0)->nodeValue,

'link' => $node->getElementsByTagName('link')->item(0)->nodeValue,

'date' => $node->getElementsByTagName('pubDate')->item(0)->nodeValue,

);

array_push($feed, $item);

}

$limit = 20;

for($x=0;$x<$limit;$x++) {

$title = str_replace(' & ', ' & ', $feed[$x]['title']);

$link = $feed[$x]['link'];

$description = $feed[$x]['desc'];

$date = date('l F d, Y', strtotime($feed[$x]['date']));

echo '<p><strong></strong>';

echo '<small><em></em></small>';

echo ''.$description.'';

 

}

?>

[weeb604]

ps I am willing to paypal someone 10 bucks for any help they can give me on this .. I know $10 is NOTHING , but i figured it might help me get a response

[andrew_biggart]

This is the method I used to display my latest instagram snaps on my portfolio. Although videos are a no no at the minute. It will just display the cover photo instead.

 

Firstly register with http://followgram.me/.

 

Next add this script were you want the images to appear, change the username and edit the html to fit into your site.

<?php
	function getFollowgram($u) {
		$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;
								
			echo '<a href="' . $ar['bigimage'][$i] . '" title="' . $ar['title'][$i] .'" target="_blank"><img src="' . $ar['image'][$i] .'" alt="' . $ar['title'][$i] .'"/></a>';
								
		}								
							
	}
								
	getFollowgram(andrew_biggart);
							
?>

Bob's your uncle.

 

BOOM!

Edited June 28, 2013 by andrew_biggart

[andrew_biggart]

So I clearly didn't read what you wrote.

 

However I've modified the script to pull most recent instagram shots from public users.

<?php
							
						function getFollowgram() {
							$url = "http://instagram.com/tags/nhl/feed/recent.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;
								
								echo '<a href="' . $ar['link'][$i] . '" title="' . $ar['title'][$i] .'" target="_blank"><img src="' . $ar['link'][$i] .'" alt="' . $ar['title'][$i] .'"/></a>';
								
							}								
							
						}
								
						getFollowgram();
							
					?>

[weeb604]

Thanks! That seems to be similar to my original code - do you know if there is a way to "re-organize" the pictures? By that I mean is it possible to change the output so that the images are resized, and structured 4 lines of 5 pictures..?

[andrew_biggart]

I've modified the code so that it only displays 20 images. It will create four different unordered lists which you can style however you want.

<?php
function getFollowgram() {
		$url   = "http://instagram.com/tags/nfl/feed/recent.rss";
		$s     = file_get_contents($url);
		$ar    = array();
		$count = 0;
		$stop  = 0;  
		$limit = 20; // Limit the results
		$open  = "<ul class=\"instagram\">"; // Set html wrapper class
							
		preg_match_all('#<item>(.*)</item>#Us', $s, $items);
							
		echo $open; // Open html wrapper
							
			for($i=0;$i<count($items[1]);$i++) {
								
				if($stop != $limit){
								
					$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;
									
					if($count != 5){
								
						echo '<li><a href="' . $ar['link'][$i] . '" title="' . $ar['title'][$i] .'" target="_blank"><img src="' . $ar['link'][$i] .'" alt="' . $ar['title'][$i] .'"/></a></li>';
						$count ++;
										
					} else {
									
						echo '</ul>' . $open .'<li><a href="' . $ar['link'][$i] . '" title="' . $ar['title'][$i] .'" target="_blank"><img src="' . $ar['link'][$i] .'" alt="' . $ar['title'][$i] .'"/></a></li>';
						$count = 0;
										
					}
									
					$stop ++;
								
				}
								
			}
							
		echo "</ul>";	// Close html wrapper							
							
	}
								
	getFollowgram();
?>

I've started some basic styling for you as well to resize the images.

<style>
.instagram { width:550px; margin:0; padding:0; list-style:none; }
.instagram li { float:left; margin:0 10px 10px 0; }
.instagram li a img { width:100px; }
</style>

[andrew_biggart]

I've made a few teaks and added this to Github incase anyone wants it.

 

https://github.com/andrewbiggart/instafeed