Major code cleanup. Added a bunch more info to the README.

Author: jlengstorf

README.md

@@ -6,16 +6,51 @@ This is the demo application that will be built during [Jason Lengtorf][1]'s wor
 using [Instagram's API][3] and [Pusher][4].
 
 
+Demo
+----
+
+A live demo of this code is available at http://filive-rtws.aws.af.cm/
+
+
 Walkthrough
 -----------
 
 To build this app, you'll need to run through the following steps:
 
-1.  Set up a live dev environment (AppFog is great if you don't have access to 
-    your own)
+1.  Set up a live dev environment ([AppFog][5] is a quick and free option if 
+    you don't have access to your own server)
 1.  Register a new app with Instagram
 1.  Register a new app with Pusher
+1.  Subscribe to a tag on Instagram
+
+
+### Choose Your Tag Wisely
+
+Originally, this demo used `#selfie`, but so many selfies are posted on 
+Instagram that the API limit of 5000 requests per hour was maxed out within 
+minutes. Additionally, looking at the `#selfie` feed made me feel like a creepy 
+old man.
+
+
+### Adding a Subscription
+
+Add a subscription to the tag `#catstagram` by executing the following command 
+in a terminal:
+
+    curl -F 'client_id=YOUR_CLIENT_ID' \
+         -F 'client_secret=YOUR_CLIENT_SECRET' \
+         -F 'object=tag' \
+         -F 'aspect=media' \
+         -F 'object_id=catstagram' \
+         -F 'callback_url=http://YOURREDIRECTURI.com/' \
+         https://api.instagram.com/v1/subscriptions/
+
+
+### Deleting a Subscription
+
+Remove all subscriptions by executing the following command in a terminal:
 
+    curl -X DELETE 'https://api.instagram.com/v1/subscriptions?client_secret=YOUR_CLIENT_SECRET&client_id=YOUR_CLIENT_ID&object=all'
 
 
 Copyright and license
@@ -40,4 +75,5 @@ the License.
 [2]: http://futureinsightslive.com/las-vegas-2013/
 [3]: http://instagram.com/developer/
 [4]: http://pusher.com/
+[5]: https://www.appfog.com/
 

inc/config-example.inc.php

@@ -4,12 +4,13 @@
 error_reporting(E_ALL^E_STRICT);
 ini_set('display_errors', 1);
 
-session_start();
-
 // Instagram API credentials
 $ig_client_id = '';
 $ig_secret    = '';
-$ig_login_uri = 'http://example.com//login.php';
+$ig_login_uri = 'http://example.com/login.php';
+
+// Tag to retrieve
+$tag = 'catstagram';
 
 // Pusher API credentials
 $pusher_key    = '';

index.php

@@ -8,18 +8,18 @@
     exit;
 }
 
+// Catches realtime updates from Instagram
 if ($_SERVER['REQUEST_METHOD']==='POST') {
+
     // Instantiates Pusher PHP API
     require 'lib/Pusher.php';
 
+    // Retrieves the POST data from Instagram
     $update = file_get_contents('php://input');
-
     $photos = json_decode($update);
-    if (is_array($photos)) {
-        $length = count($photos);
-    }
 
-    if ($length>0) {
+    // If one or more photos has been posted, notify all clients
+    if (is_array($photos) && ($length=count($photos))>0) {
         $pusher = new Pusher($pusher_key, $pusher_secret, $pusher_app_id);
         $pusher->trigger(
             'photos', 
@@ -29,40 +29,17 @@
             )
         );
     }
+
 }
 
-// Get most recent IG photos
+// Retrieves the access token from the query string
 $token = isset($_GET['access_token']) ? $_GET['access_token'] : NULL;
-$tag = isset($_GET['tag']) ? $_GET['tag'] : 'instacat';
-
-$api_url = 'https://api.instagram.com/v1/tags/' 
-         . $tag . '/media/recent?count=16&access_token=' . $token;
-
-$page_url = 'http://' . $_SERVER['SERVER_NAME'] 
-          . dirname($_SERVER['REQUEST_URI']) 
-          . '/?access_token=' . $token
-          . '&tag=' . $tag;
-
-$ch = curl_init($api_url);
-curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
-$response = json_decode(curl_exec($ch));
-$photos = property_exists($response, 'data') ? $response->data : array();
 
-/*
-
-https://api.instagram.com/v1/tags/nofilter/media/recent
-
-curl -F 'client_id=6019cd09a31d488eab0a8e072f408415' \
-     -F 'client_secret=d1fcd47c601e4d80912f5168fc8efaa7' \
-     -F 'object=tag' \
-     -F 'aspect=media' \
-     -F 'object_id=catstagram' \
-     -F 'callback_url=http://demo.copterlabs.com/filive/workshop/' \
-     https://api.instagram.com/v1/subscriptions/
-
-curl -X DELETE 'https://api.instagram.com/v1/subscriptions?client_secret=d1fcd47c601e4d80912f5168fc8efaa7&client_id=6019cd09a31d488eab0a8e072f408415&object=all'
-
-*/
+// Generates the login URL to authorize the app
+$login_url = 'https://api.instagram.com/oauth/authorize/'
+           . '?client_id=' . $ig_client_id
+           . '&redirect_uri=' . $ig_login_uri
+           . '&response_type=code'
 
 ?>
 <!doctype html>
@@ -80,7 +57,18 @@
 
 <body>
 
-<?php if ($token!==NULL): ?>
+<?php if ($token===NULL): ?>
+
+    <header>
+        <h1>Log in to start playing with realtime!</h1>
+    </header>
+
+    <article>
+        <a href="<?=$login_url?>"
+           class="login button">Login &rarr;</a>
+    </article>
+
+<?php else: ?>
 
     <header>
         <h1>Photos tagged with #<?=$tag?></h1>
@@ -98,147 +86,41 @@ class="button"
         </div>
 
         <ul id="photos">
-
-        <?php //foreach ($photos as $photo): ?>
             <li class="loading">Loading&hellip;</li>
-            <!-- <li>
-                <a href="<?=$photo->link?>">
-                    <img src="<?=$photo->images->thumbnail->url?>"
-                         alt="<?=(empty($photo->caption)) ? $photo->caption->text : NULL ?>"
-                         data-id="<?=$photo->id?>" />
-                    <strong>Photo by <?=$photo->user->username?></strong>
-                </a>
-            </li> -->
-        <?php //endforeach; ?>
-
         </ul><!--/#photos-->
 
     </article>
 
-<?php else: ?>
-
-    <header>
-        <h1>Log in to start playing with realtime!</h1>
-    </header>
-
-    <article>
-        <a href="https://api.instagram.com/oauth/authorize/?client_id=<?=$ig_client_id?>&amp;redirect_uri=http://demo.copterlabs.com/filive/workshop/login.php&amp;response_type=code"
-           class="login button">Login &rarr;</a>
-    </article>
-
 <?php endif; ?>
 
 <footer>
     <p>
         This demo was created by 
-        <a href="http://www.lengstorf.com/">Jason Lengstorf</a> for use at the 
-        realtime workshop at Future Insights Live 2013. It is released under the 
-        MIT License.
+        <a href="http://www.lengstorf.com/">Jason Lengstorf</a> for use in the 
+        realtime workshop at Future Insights Live 2013. All photos belong to 
+        their respective owners.
     </p>
 </footer>
 
 <script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
 <script src="http://js.pusher.com/2.0/pusher.min.js"></script>
 <script>
 
-jQuery(function($){
-
-    // Enable pusher logging - don't include this in production
+    // Enables pusher logging - don't include this in production
     Pusher.log = function(message) {
         if (window.console && window.console.log) window.console.log(message);
     };
 
     // Flash fallback logging - don't include this in production
     WEB_SOCKET_DEBUG = true;
 
-    var newcount = 0,
-        pusher   = new Pusher('<?=$pusher_key?>'),
+    // Initializes Pusher (done inline to use PHP for config variables)
+    var pusher   = new Pusher('<?=$pusher_key?>'),
         channel  = pusher.subscribe('photos'),
-        photos   = $('photos'),
-        min_ID   = photos.data('next-min-ID'),
-        load_photos = function() {
-            // Hides the notification
-            $("#count-bar").addClass("hidden");
-
-            $.getJSON(
-                'https://api.instagram.com/v1/tags/<?=$tag?>/media/recent?callback=?',
-                {
-                    'access_token': '<?=$token?>',
-                    'count': 16,
-                    'min_id': min_ID
-                }
-            )
-            .done(function(response){
-                var new_photos = response.data,
-                    pagination = response.pagination,
-                    delay = 0,
-                    anim_speed = 200;
-
-                // Removes the loading LI if present
-                $("#photos").find('.loading').hide(400).delay(400).remove();
-
-                // Resets the new photo count
-                newcount = 0;
-
-                // Sets the new min ID for loading images
-                min_ID = pagination.next_min_id;
-
-                for (x in new_photos) {
-                    var photoCont = $("#photos"),
-                        photo = new_photos[x],
-                        caption = (photo.caption!==null) ? photo.caption.text : '';
-
-//TODO: Make the captions show up and fix delay
-
-                    $('<img />', {
-                        src: photo.images.thumbnail.url,
-                        alt: caption,
-                        load: function(){
-                            var link = $('<a />', {
-                                    href: photo.link,
-                                    html: this
-                                })
-                                .css({opacity: 0})
-                                .delay(delay)
-                                .prependTo($("#photos"))
-                                .append($('<strong />'), {
-                                    text: 'Photo by ' + photo.user.username
-                                })
-                                .wrap('<li />')
-                                .animate({ opacity: 1 }, anim_speed);
-                        }
-                    });
-
-                    delay += anim_speed;
-                }
-            })
-            .error(function(data){
-                console.log(data);
-            });
-        };
-
-    channel.bind('new-photo', function(data){
-
-        newcount += data.newcount;
-
-        var plural = (newcount===1) ? 'photo' : 'photos';
-            phrase = newcount+' new '+plural+' uploaded.';
-
-        $('#count-bar').removeClass('hidden').find('#count').text(phrase);
-
-    });
-
-    $("#image-loader").bind('click', function(event){
-        event.preventDefault();
-
-        load_photos();
-    });
-
-    load_photos();
-
-});
+        tag      = '<?=$tag?>'; // For PHP-powered tag selection
 
 </script>
+<script src="js/main.js"></script>
 
 </body>