Welcome!

Think Labs is an ongoing effort by Seven2 to provide research and educational opportunities in the web development and mobile field. To see what we’ve been cookin’ up, check out our blog postings.

Created by
Seven2 Login

Categories
Tags
Team Think Labs | Google JSAPI and RequireJS: RSS Feeds
3192
single,single-post,postid-3192,single-format-standard,ajax_fade,page_not_loaded,,,wpb-js-composer js-comp-ver-4.2.3,vc_responsive

Google JSAPI and RequireJS: RSS Feeds

In this post, I cover general information about the Google JSAPI and how to use it with require. More specifically how to use the Google feeds API.

Just recently I was asked to create an Instagram photo feed for Terrain 5. The goal being that the images would be displayed on a projector, hence why there was no links or navigation anywhere. I had never worked with Instagram feeds before so I went to their Developer API to find that you have to get a developer key to do anything with the API. This wasn’t exactly what I was looking for, so I looked around for RSS feeds and found that Instagram has an easy url for feeds:

http://instagr.am/tags/hashtag/feed/recent.rss

But I didn’t want to figure out how to read this RSS feed from scratch and a quick Google search (conveniently) turned up the Google Feeds API. This API is well written with tons of examples. Here’s a quick overview of how the Feeds API works:

This example can be found on the Feeds Developer Guide page, but here it is for reference:

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

    google.load("feeds", "1");

    function initialize() {
      var feed = new google.feeds.Feed("http://fastpshb.appspot.com/feed/1/fastpshb");
      feed.load(function(result) {
        if (!result.error) {
          var container = document.getElementById("feed");
          for (var i = 0; i < result.feed.entries.length; i++) {
            var entry = result.feed.entries[i];
            var div = document.createElement("div");
            div.appendChild(document.createTextNode(entry.title));
            container.appendChild(div);
          }
        }
      });
    }
    google.setOnLoadCallback(initialize);

    </script>
  </head>
  <body>
    <div id="feed"></div>
  </body>
</html>

It’s a very simple setup. And worked out nicely to try to figure out the Instagram feed. The really cool thing about the feed was that Google’s code keeps the RSS in the same format for all feeds. Example being I just changed the feel loading:

var feed = new google.feeds.Feed("http://fastpshb.appspot.com/feed/1/fastpshb");

To

var sHashTag = "weallbuildthis";
var feed = new google.feeds.Feed("http://instagr.am/tags/" + sHashtag + "/feed/recent.rss");

Then the loop through all the feed entries spit out the title of all the Instagram posts. Very awesome! I ended up doing this to get the images:

function loadInstagram()
{
	var feed = new google.feeds.Feed("http://instagr.am/tags/" + sHashtag + "/feed/recent.rss");
	feed.includeHistoricalEntries();
	feed.setNumEntries(150);

	feed.load(function(result) {
		if (!result.error) 
		{
			var sLink;
			for ( var i = 0; i < result.feed.entries.length; i++ ) 
			{
				var entry = result.feed.entries[i];
				sLink = entry.link;
				aAllImages[sLink] = sLink;

				jQuery("<img/>")[0].src = sLink;
			}

			showNextImage();
		}
	});

}

That’s as far as I went for the Terrain 5 hash feed, but I wanted to get this to work within the RequireJS framework. To do this required a little digging because the Google JSAPI doesn’t immediately mesh with Require and took a 3rd party Require Plugin to work. I discovered a Miller Medeiros plugin that works specifically for Google’s JSAPI in Require.

https://github.com/millermedeiros/requirejs-plugins

As the plugin documentation states, you need to load in the async and propertyParser plugins before the google api.

requirejs.config({
  paths:{
    async: "lib/requirejs-plugins/async",
    propertyParser: "lib/requirejs-plugins/propertyParser",
    goog: "lib/requirejs-plugins/goog"
  }
});

Then, to load in a Google API, use the Require like so:

require(["goog!feeds,1"], function(){});

The format for loading different Google APIs is like this: “goog!moduleName,version,packages:[packages],language:en,anotherOption:value”

Using Require, Google API, and a Require Plugin I was able to load an Instagram feed. Whew! Here’s a ZIP of all the files used.

There’s something else that I stumbled upon while using the Google APIs is Google Code Playground. It’s a lot like Joe’s previous post about CodePen, only just for using Google’s javascript APIs. Pretty cool stuff to play around with. Shows you how to implement YouTube, Google Maps, and various other cool plugins.

Have a wonderful day!