Created
March 11, 2011 12:34
-
-
Save richardmackney/865838 to your computer and use it in GitHub Desktop.
Display Instagram images using jquery.zRSSFeed via Google Feed API. Made for iframes (Posterous) - images open in new window.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
| <meta http-equiv="content-language" content="en" /> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> | |
| <script type="text/javascript"> | |
| /** | |
| * Plugin: jquery.zRSSFeed | |
| * | |
| * Version: 1.0.1 | |
| * (c) Copyright 2010, Zazar Ltd | |
| * | |
| * Description: jQuery plugin for display of RSS feeds via Google Feed API | |
| * (Based on original plugin jGFeed by jQuery HowTo) | |
| * | |
| * Modified by Richard Mackney for Instagram images | |
| **/ | |
| (function($){ | |
| var current = null; | |
| $.fn.rssfeed = function(url, options) { | |
| // Set pluign defaults | |
| var defaults = { | |
| limit: 10, | |
| header: true, | |
| titletag: 'h4', | |
| date: true, | |
| content: true, | |
| snippet: true, | |
| showerror: true, | |
| errormsg: '', | |
| key: null | |
| }; | |
| var options = $.extend(defaults, options); | |
| // Functions | |
| return this.each(function(i, e) { | |
| var $e = $(e); | |
| // Add feed class to user div | |
| if (!$e.hasClass('rssFeed')) $e.addClass('rssFeed'); | |
| // Check for valid url | |
| if(url == null) return false; | |
| // Create Google Feed API address | |
| var api = "http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&callback=?&q=" + url; | |
| if (options.limit != null) api += "&num=" + options.limit; | |
| if (options.key != null) api += "&key=" + options.key; | |
| // Send request | |
| $.getJSON(api, function(data){ | |
| // Check for error | |
| if (data.responseStatus == 200) { | |
| // Process the feeds | |
| _callback(e, data.responseData.feed, options); | |
| } else { | |
| // Handle error if required | |
| if (options.showerror) | |
| if (options.errormsg != '') { | |
| var msg = options.errormsg; | |
| } else { | |
| var msg = data.responseDetails; | |
| }; | |
| $(e).html('<div class="rssError"><p>'+ msg +'</p></div>'); | |
| }; | |
| }); | |
| }); | |
| }; | |
| // Callback function to create HTML result | |
| var _callback = function(e, feeds, options) { | |
| if (!feeds) { | |
| return false; | |
| } | |
| var html = ''; | |
| var row = 'odd'; | |
| // Add header if required | |
| if (options.header) | |
| html += '<div class="rssHeader">' + | |
| '<a href="'+feeds.link+'" title="'+ feeds.description +'">'+ feeds.title +'</a>' + | |
| '</div>'; | |
| // Add body | |
| html += '<div class="rssBody">' + | |
| '<ul>'; | |
| // Add feeds | |
| for (var i=0; i<feeds.entries.length; i++) { | |
| // Get individual feed | |
| var entry = feeds.entries[i]; | |
| // Format published date | |
| var entryDate = new Date(entry.publishedDate); | |
| var pubDate = entryDate.toLocaleDateString() + ' ' + entryDate.toLocaleTimeString(); | |
| // Add feed row | |
| html += '<li class="rssRow '+row+'">' + | |
| '<'+ options.titletag +'><a href="'+ entry.link +'" title="View this feed at '+ feeds.title +'">'+ entry.title +'</a></'+ options.titletag +'>' | |
| if (options.date) html += '<div>'+ pubDate +'</div>' | |
| if (options.content) { | |
| // Use feed snippet if available and optioned | |
| if (options.snippet && entry.contentSnippet != '') { | |
| var content = entry.contentSnippet; | |
| } else { | |
| var content = entry.content; | |
| } | |
| html += '<p><a href="'+entry.link+'" title="'+ entry.title +' " target="_blank">'+ content +'</a></p>' | |
| } | |
| html += '</li>'; | |
| // Alternate row classes | |
| if (row == 'odd') { | |
| row = 'even'; | |
| } else { | |
| row = 'odd'; | |
| } | |
| } | |
| html += '</ul>' + | |
| '</div>' | |
| $(e).html(html); | |
| $(e).find("a").attr("target","_blank"); // change target here | |
| }; | |
| })(jQuery); | |
| </script> | |
| <title>Intagram Feed</title> | |
| <style type="text/css"> | |
| body { | |
| margin-left: 0px; | |
| margin-top: 0px; | |
| margin-right: 0px; | |
| margin-bottom: 0px; | |
| } | |
| .rssFeed { | |
| font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; | |
| } | |
| .rssFeed a { | |
| color: #444; | |
| text-decoration: none; | |
| } | |
| .rssBody ul { | |
| list-style: none; | |
| } | |
| .rssBody ul, .rssRow, .rssRow h4, .rssRow p { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .rssBody li { | |
| width: 100px; | |
| /* float: left; /* float for horizontal images */ | |
| } | |
| .rssRow { | |
| padding: 3px; | |
| } | |
| .rssRow h4 { | |
| font-size: 0px; | |
| } | |
| .rssRow div { | |
| color: #666; | |
| margin: 0.2em 0 0.4em 0; | |
| } | |
| .odd img { | |
| width: 100px; | |
| height: 100px; | |
| } | |
| .even img { | |
| width: 100px; | |
| height: 100px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| $(document).ready(function () { | |
| $('#instagram').rssfeed('http://instagr.am/tags/sxsw/feed/recent.rss', { | |
| /* $('#instagram').rssfeed('http://listagr.am/n/richardmackney.xml', { */ | |
| /* $('#instagram').rssfeed('http://instagr.am/tags/sxsw/feed/recent.rss', { */ | |
| limit: 5, | |
| snippet: false, | |
| header: false, | |
| date: false | |
| }); | |
| }); | |
| </script> | |
| <div id="instagram"></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This is awesome, thanks so much for sharing!