Students
Students get a Tuts+ subscription for just $45! Hurry limited offer.
Advertisement

How To Build a Widget to Display your Buzzing

by

A couple months ago, Google released a new Twitter-like service, called Buzz. We can use this service to display our latest buzzes on any site. So, in this tutorial, I'll guide you through the process of building your own Buzz widget.


Step 1. Reading Public Updates from Buzz

At the moment, there's no API to work with the Buzz service; Google is expected to provide one within the next several months, however, for now, the public updates are available as Atom feeds.

First, we need to get the data from the Buzz service. In order to do so, we'll setup a PHP script that reads the data from the Buzz service. This script will be a kind of proxy that we'll use to retrieve the data. By doing this, we can make an AJAX request, and get an XML document that contains desired updates.

Google buzz flow

Here's the initial PHP code:

Save this file as "readfeed.php," and remember that this is just an example. In a real world project, you should clean the url parameter, and make sure the user is not opening something important on your file system.


Step 2. Creating the Structure of our JavaScript Object

Once we can read this data, we need to build an object that holds our code in JavaScript. Create a new file and name it "buzz-widget.js". To extend an object, we need to use the "prototype" property; if you have questions about this you should watch the tutorial where Jeffrey shows us how this works with native objects.

The structure of our object will be something like this:

In step one, we created the constructor function for our object. Now, we're going to check for the required configurations, and read the updates from our proxy.

  • renderTo : the element where the widget will be rendered; this property can be a jQuery selector too.
  • proxy : the URL where we'll make an AJAX request call to retrieve our data. We already created the PHP file that reads the information from the Buzz service; by default it is "readfeed.php".
  • user : the Buzz user we want to get the updates from.
  • items : the number of updates we are going to display in the widget.
  • onLoad : an event we're going to trigger when the data is loaded into the widget; by default, this is an empty function.
  • onRender : this event is triggered when the widget is about to be rendered in the page; empty function by default.

Step 3. The Constructor

Let's work on the constructor function of our widget.

In step one, we defined the URL of the Buzz service from which we are going to retrieve the data. We'll replace the "{user}" string with the user configuration (see step 4).

In step two, we overrode the default properties with the given options; we used jQuery.extend to do that.

In step three, we checked for the required configurations, one of them is the "user" and the "renderTo". If one of these is missing, we throw an exception. This will be useful for the developer who uses our plugin.

In step four, we searched for the "{user}" string in the variable "url", and replaced it with the user whose buzzes we wish to display in our widget.

The last step is very important. Here, we start the process of reading and displaying the information.


Step 4. Reading the Information

We've setup the PHP script that pulls the data to our server. Now, we only need to make an Ajax request to retrieve the data with jQuery; let's look at the following code:

In step one, we appended a new element to the container, informing the viewer that we're currently processing information.

In step two, we made the Ajax request. The most important thing is the "context" property; this configuration will allow you to change the context of the function that is called when the server responds. Finally, we set the context to "this" which is the BuzzReader object.

Remember that the PHP script expects the "url" parameter. so don't forget to send it; when the server responds, the method "parse" is executed.


Step 5. Parsing the XML Document

The Buzz service delivered the data in an Atom feed format, so we need to parse and extract the information we need.

This is an example of the XML document that is returned from the Buzz service:

Once we know the response, we can parse the document quite easily with jQuery.

We received two arguments: the first is the data, in this case a XML document; the second argument is the text status of the request.

In step one we got all the "entry" nodes; this is the place where our Buzz updates and all the information we need is located. Next, we emptied the container of our widget and created an empty array to store our data as a JavaScript object for each node.

In step two, we iterated through the "entry" nodes and extracted the "title", "author", "content" and so on. This is a really simple process; all we have to do is write the selector and set the root for the search, in this case the root is the node "entry."

I'd like to point out the line where we are extracting the "reply" attribute - the selector looks something like this:

We specified that we want the node "link", that has an attribute "rel" equal to "replies". This is important because there are many "link" nodes within each "entry."

In step three, we created the "this.data" reference to the array that contains our data. After that, we executed the event "onLoad" and passed the information we extracted.

In step four, we executed the render method.

Before we continue with the "render" method, let's review the "createData" and "format" methods. We call these methods for each entry.

In the "createDate" method, we're only going to create a new Date object with the given string. The string has the format "2009-12-14T20:04:39.977Z" so we can create the Date object as follows:

Or we can use a simple regexp to format the string and give it to the Date constructor:

In the format method we are going to use the date object we just created, and return the time that is between the publication date and the system local time - for example "11 minutes ago" or "3 hours ago."

The previous code, though a bit tedious, is pretty straight forward. First, we obtained the difference between the current time, and the publications date in minutes, days and months. After that, we simply compared the results, and returned a string in the correct format.

Now let's review the "render" method.


Step 6. Creating the GUI

Until now, we've only pulled the data from the Buzz server, and parsed the XML document. That means that we are ready to display the information on the screen.

In the first step, we triggered the event "onRender," this, again, will be useful for the programmer who uses our plugin.

In the second step, we created an array to store our dynamic HTML. After that, we created a list "ul" and then we iterated through our data, creating the "li" node for each item; you probably noticed that the "for" condition has an "or" operator; this allow us to stop the iterations when the array of data ends, or when the index "i" has reached the "items" property defined by the developer who is going to use the plugin.

In the last step, we inserted the HTML into the container using the "append" method.


Step 7. Using the Widget

In order to use our widget we need to create an instance of our class "BuzzReader", but, before doing so, let's define where we want to render it. Create an HTML file, and, within the body element, and add the following:

We are going to render our widget inside the div with the class "reader", let's create the instance of our widget as follows:

Don't forget to import the jQuery library and the "buzz-widget.js" into your HTML file. If everything was configured and coded correctly, you should see something similar to the following image:

Google buzz widget

Step 8. Styling the Widget

Well, we can now see the updates, but it doesn't look very pretty; we need to style it a bit.

In the first two steps, we centered the widget on the screen, and set the size, borders and colors for the container; we also added the logo as a header for the widget.

In the last two steps, we set the styles to the dynamic list, we changed the color of the fonts, and we added some margins, borders and paddings to our links.

As a result we have a much more appealing product.

Google buzz widget

Step 9. Creating the Plugin

The last step in this tutorial is to create the jQuery plugin. Let's modify the "buzz-widget.js" file, adding the following code to the end of the file.

In the first step, we simply named our plugin.

In step two, we created the configuration object if the argument "options" is empty. Next, we defined the property "renderTo" to the actual element.

In step three, we created a new instance of our widget.

Now, we can use our plugin in our HTML, like this:

Google buzz widget

Conclusions

I hope you've learned a bit about how to extract data from XML documents, and display your latest Buzzes on any website. Any questions? Thanks for reading!

Advertisement