del.icio.us Mashups

(paragraph) element and text node for the n (notes) variable are added if the n variable exists: //include the notes field if it exists if (post.n) { var p = document.createElement(‘p’); p.appendChild(document.createTextNode(post.n)); li.appendChild(p); }

Finally, the

: ul.appendChild(li);

After every post in Delicious.posts has been processed, the entire
element is appended to an already existing with it’s id attribute set as json_data_container. //append the list to the json_data_container div element document.getElementById(‘json_data_container’).appendChild(ul);

The end result is the appearance of live del.icio.us data on your very own page, thanks to JSON, JavaScript, and some pretty heavy duty DHTML. The lack of formatting in this particular instance will actually serve you well, because it’s time to prettyup this page. The linkrolls and tagrolls have some formatting built in by del.icio.us. Fortunately, you can override most of it, but it’s not going to be that easy. One nice thing about the JSON feeds is that you have much more control over how you can make them appear. Either way, it’s time to try and work with both linkrolls and tagrolls as well as the JSON data to come up with a new, coherent appearance for this page.

Try It Out

Using CSS to Make Your Page Pretty

In this exercise, you move each of the three remix methods into three nicely formatted columns and add aesthetic details. You do this by creating a Cascading Style Sheet (CSS) for the page. You’ll put in the CSS markup not only how to format the HTML element you’ve already written, but also reformat the styling that del.icio.us has brought over along with the linkrolls and tagrolls.

1.

Before you create your style sheet, you will first define several different id and class attributes throughout the page. These attributes are what CSS will use to find what it needs to format. Open delicious_summary.html in your editor again. Change your markup between the tags to match the following code, paying special attention to the bolded lines. While you’re at it, change the color range appearing in the query string for the tagroll to the hex codes denoted in bold. This will keep the tagroll in sync with the color scheme you will soon implement with CSS.

My del.icio.us Summary Page

126

12_097762 ch07.qxp

12/7/06

9:25 PM

Page 127

Chapter 7: del.icio.us Mashup Techniques My Tags My Latest Bookmarks My Latest Bookmarks My PHP Bookmarks //start with an unordered list element var ul = document.createElement(‘ul’) //iterate through Delicious.posts creating list items for each post for (var i=0, post; post = Delicious.posts[i]; i++) { var li = document.createElement(‘li’); var a = document.createElement(‘a’); a.setAttribute(‘href’, post.u); a.appendChild(document.createTextNode(post.d)); li.appendChild(a); //include the notes field if it exists if (post.n) { var p = document.createElement(‘p’); p.appendChild(document.createTextNode(post.n)); li.appendChild(p); } ul.appendChild(li); } //append the list to the json_data_container div element document.getElementById(‘json_data_container’).appendChild(ul);

2.

The style sheet you want to add is going to be fairly large — at least as many lines as in your current HTML document, if not more. You can place styling markup inline with your XHTML markup, whether as attributes on elements directly or in the portion, or you can bring it in from an outside source using the element. In this example, you do the latter. Create a link to a file called stylesheet.css between your elements like so:

My del.icio.us Summary Page

127

12_097762 ch07.qxp

12/7/06

9:25 PM

Page 128

Part II: Get Ready to Mash 3.

Using your editor, create a new file in the same directory as delicious_summary.html called stylesheet.css. This is the style sheet that will be brought in thanks to the element you added previously. Add to it the following code in its entirety (you can just copy stylesheet.css from the Chapter 7 directory in the companion code downloaded from the Wrox website):

/* general page stylings */ html, body { background-color: #7A8073; margin: 0 2em 1em 2em; font-family: Arial, Helvetica, san-serif; position: relative; margin: 5px; color: #D0D9C3; } /* three column layout ids */ #header { color: #FFE6F9; text-align: center; position: absolute; top: 0; left: 0; width: 920px; height: 100px; font-size: 35px; } #left_col { position: absolute; top: 100px; left: 0; width: 295px; padding: 5px; border: 1px solid #000000; background-color: #80737C; } #right_col { position: absolute; top: 100px; left: 620px;; width: 295px; padding: 5px; border: 1px solid #000000; background-color: #80737C; } #center_col { position: absolute; top: 100px; left: 310px; width: 295px;

128

12_097762 ch07.qxp

12/7/06

9:25 PM

Page 129

Chapter 7: del.icio.us Mashup Techniques padding: 5px; border: 1px solid #000000; background-color: #80737C; } a { text-decoration: none; color: #F5FFE6; font-weight: bold; } a:hover { color: #7A8073; background-color: #FFE6F9; } .col_banner { color: #FFE6F9; font-size: 20px; border-bottom: 1px dotted #FFE6F9; } ul, li { margin: 0; padding: 5px 0 5px 0; list-style-type: none; } p { margin: 0; font-size: smaller; }

4.

Reload the page, or browse to it again if you’ve closed your web browser. Things should really look different. The content is now arranged in three columns and has a unified look to it. You should see something similar to Figure 7-1.

How It Works Fortunately, del.icio.us makes such a dramatic transformation possible by adding class attributes to most of the elements that the linkroll and tagroll utilities output. The class attributes, such as id attributes, help to identify elements in an HTML document. Traditionally, id should be used only once to identify a page element, but the class attribute can be used on multiple elements throughout the page. You can add special styling to your CSS markup for each class attribute, and the formatting will affect all elements with that class name as their attribute, no matter what kind of element it is. In terms of the CSS world, think of classes as a family of styled elements, while an id is a loner element. When it comes to linkrolls and tagrolls, del.icio.us has assigned unique class attributes to almost every element in the HTML code that is returned. You overrode these classes with your own CSS. The del.icio.us team has created a styling guide to help you override their base styles, which you can find at http://del.icio.us/doc/feeds/js/styling.

129

12_097762 ch07.qxp

12/7/06

9:25 PM

Page 130

Part II: Get Ready to Mash

Figure 7-1

Take a look at this segment of CSS markup: /* delicious posts and unordered lists */ ul, li { margin: 0; padding: 5px 0 5px 0; list-style-type: none; background-color: #E6FFE6; }

Here, you override the style markup for the
and
• elements that appear in your DHTMLgenerated markup in the third column, as well as the
  and
  • elements that appear inside the HTML markup that the del.icio.us linkroll utility generates. Obviously there’s a lot more CSS-action happening. Covering all of the intricacies of CSS is beyond the scope of this book, but the thing to note here is how you used CSS to remix and format the del.icio.us data you took from the linkroll, tagroll, and JSON feed, creating a whole new view and interpretation of del.icio.us that is uniquely your own.
    
    130
    
    12_097762 ch07.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 131
    
    Chapter 7: del.icio.us Mashup Techniques
    
    Using PHP and MySQL for Full-Bodied Flavor Using the del.icio.us JSON feeds in delicious_summary.html is fun, but it’s not an ideal technique for a serious mashup developer. For one thing, at this time there is only one JSON feed available at del.icio.us — the feed that fetches your latest bookmarks. Hopefully this will be changed, but when compared with the types of data you can get from del.icio.us’ RSS feeds or the del.icio.us API, the JSON feeds are extremely limited in their use. Additionally, every time delicious_summary.html is loaded, it hits del.icio.us three times. If your del.icio.us summary page one day starts getting a lot of traffic, this is going to be a strain on the del.icio.us server. More significantly, if del.icio.us is down for maintenance or some other issue is at hand, the entire page will be crippled and display absolutely nothing at all. This is where some of the other programming languages and techniques you’ve read about so far start to come in handy — specifically, PHP and MySQL. With PHP, you can use the del.icio.us API, to gather data about recently posted links, tags, and bookmarks for a specific tag in a raw form that is equally as easy to use as JSON. Furthermore, it will be much easier to write some method of storing and handling cached data. Not only is this nicer to del.icio.us, but if del.icio.us is not responding, you can make your PHP code smart enough to retrieve the cached data you already have on hand until your page can try again later. Thanks to the power of AJAX, you can even have PHP behave like JavaScript, fetching and displaying additional data without a page reload. In the next project, you will use the del.icio.us API in PHP to revise the delicious_summary.html page and what it does. You will also use MySQL as a way to cache, store, and retrieve the data your page fetches. In addition, you will look at how you can develop your own tag cloud using PHP, and also add a little Ajax trick to take your del.icio.us summary page to the next level. Before you do all that, though, it’s time to build a very important part of this mashup and many mashups to come. You already know how to make API calls to a RESTful API (such as the del.icio.us API) with PHP, and you also know how to parse XML with the built-in XML parsing functions in PHP. It’s time to combine these two ideas into a single PHP library that you will always be able to use to interact with the del.icio.us API in this mashup and beyond.
    
    Try It Out
    
    Creating delicious_mashups.inc.php
    
    The bulk of the first part of this project is developing your own function called do_api_call(). You design do_api_call() to accept two arguments: the API method, and the query string you want to send with your del.icio.us API request. In turn, you want do_api_call() to create a PHP array that will contain the del.icio.us API response. That way you can take this response and do with it what you will.
    
    1.
    
    Create a new folder in your htdocs directory called delicious_summary2. Then create a page called api_test.php. This will be a test page for your new library. Put the following code into api_test.php, substituting your username and password as needed:
    
    131
    
    12_097762 ch07.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 132
    
    Part II: Get Ready to Mash
    
    2.
    
    Because you will use your del.icio.us username and password throughout this project, you must define them as constants. Make sure you set the value of these constants to your own del.icio.us username and password.
    
    3.
    
    Notice that in this code you brought in two different PHP files with the include() function. The first of these is Snoopy.class.php, which you downloaded and played around with in the last chapter. Create a new directory called lib inside the delicious_summary2 folder, and then copy Snoopy.class.php into it. (If you don’t already have Snoopy on hand, download it from http://sourceforge.net/projects/snoopy/.)
    
    4.
    
    Create a file called delicious_mashups.inc.php and place it inside the lib directory. This is the library you will create to standardize and make easier working with the PHP API. Give it the following contents:
    
    
    
    134
    
    12_097762 ch07.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 135
    
    Chapter 7: del.icio.us Mashup Techniques 6.
    
    Browse to api_test.php. The print_r() function will print the structure of the $api_return variable to the page, and hopefully some data returned from the del.icio.us API.
    
    Depending on your PHP setup and which version of Snoopy you are using, you may be getting some PHP notices. It’s likely that Snoopy is generating these. If you want to turn off PHP notices, keep in mind that you can always configure PHP’s error reporting inside your code. Add the following line to hide notices from PHP: error_reporting(E_ERROR | E_WARNING | E_PARSE);
    
    How It Works The functions in delicious_mashups.inc.php include the del.icio.us REST API interaction methods and XML parsing ideas you experimented with in Chapter 6. Now they’re just wrapped in a single, handy PHP function that you can include anywhere. By making things like your del.icio.us login information a global constant, as well as by using the Snoopy class, you’ve made this file more portable. If you’re not clear on how things work, look back at Chapter 6, especially the discussions on REST and XML parsing, because you’ve ported the same concepts (with practically the same code) into this new PHP library that you can use anywhere. Now it’s time to use your new PHP library to create your own linkroll with data taken from the API. You’ll create a MySQL caching system to cache the data as well. You could also grab the latest bookmarks posted from an RSS feed, and this is perhaps more advisable. Still, stick to the API for this project just so you can test and use your new del.icio.us API PHP library.
    
    Try It Out
    
    Generating Your Own Linkroll
    
    To begin, you must create the MySQL database and tables needed for this project. You will create a database called delicious_summary2, along with a MySQL user named delicious_sql with permissions to use it. You will also create a table called linkroll to cache your linkroll data to.
    
    1.
    
    Create a file for your schemata called delicious_summary2.sql with the following content:
    
    create database delicious_summary2; grant all on delicious_summary2.* to ‘delicious_sql’@’localhost’ identified by ‘password’; set password for ‘delicious_sql’@’localhost’ = old_password(‘password’); use delicious_summary2; create table linkroll ( time_retrieved datetime not null, serialized_data_array blob not null, index linkroll_time_retrieved (time_retrieved) );
    
    135
    
    12_097762 ch07.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 136
    
    Part II: Get Ready to Mash 2.
    
    Execute the .sql file in phpMyAdmin (or whichever way you choose) to create your new database, user, and table.
    
    There are other methods for caching data from del.icio.us besides MySQL, and MySQL may seem like overkill when compared to some of them, such as the very simple method of creating a cache file like Magpie RSS does. However, MySQL and its capabilities will become much more useful with some of the later projects in this book, so it’s good to get in the habit of storing data in MySQL for now. Plus, MySQL databases are much more portable. You don’t have to worry about issues such as file permissions like you do with Magpie’s cache file. Finally, it’s arguable that fetching data from MySQL is much faster and much more flexible than reading and writing a flat file.
    
    3.
    
    Create an index.php file in the delicious_summary2 folder. Give it the following code, which includes the delicious_mashups.inc.php library you just made:
    
    Set DELICIOUS_USERNAME and DELICIOUS_PASSWORD to your own username and password. ’s del.icio.us Summary Page ’s del.icio.us Summary Page
    
    136
    
    12_097762 ch07.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 137
    
    Chapter 7: del.icio.us Mashup Techniques
    
    This makes all of your MySQL connection variables PHP constants, which is a good habit to get into, as well as make a MySQL connection available throughout the entire execution of the page.
    
    4.
    
    Browse to delicious_summary2/index.php to make sure everything is loaded and the proper connections have been made.
    
    Notice that the DELICIOUS_USERNAME constant is output in the page title and heading. Because your del.icio.us username is assigned to a variable, you could give this directory and its files to a friend who uses del.icio.us and then all he or she would have to do is change the del.icio.us username and password in the constants provided. Not only would the page then show his or her del.icio.us bookmarks, but it would also be customized with his or her name in the header.
    
    5.
    
    Now it’s time to add some code to fetch your (or the specified del.icio.us user’s) 20 latest links and put them inside an PHP variable. The new do_api_call()function that you created earlier and included in this page makes this especially easy. However, you don’t want your page to execute do_api_call() every time it’s loaded. You only want to do it when your existing cache either doesn’t exist or is older than one hour. So, you need to wrap do_api_call() in something that checks the cache first, so that if the cache is newer than an hour, it is used instead of making the API call. Also, if something goes wrong with the API call, you need to add something that checks the HTTP response code and, if it’s not 200 (OK), then the cache is used. To do all this, add the following in the top PHP code block, immediately after your call to mysql_select_db():
    
    //first let’s fill $linkroll_data $linkroll_data = array(); //start by seeing if the first (and only) row in the linkroll table has a //time_retrieved that is in the last hour $linkroll_cache_query = “select count(*) from linkroll where time_retrieved > date_sub(now(), interval 1 hour)”; $linkroll_cache_result = mysql_query($linkroll_cache_query); //if a count was returned, we should use cache and NOT make an api call if (mysql_result($linkroll_cache_result,0) >= 1) { //use the linkroll cache $linkroll_data = get_last_cached_data(‘linkroll’); } else { //no cache so time to update our cache with a new data fetched from the api do_api_call(‘/posts/recent?’,’count=20’); //if status is 200 then create the cache and use $api_return for our data. //otherwise, fetch the cache data instead. if ($api_return[‘status’] == 200) { $add_cache_query = sprintf( “insert into linkroll (time_retrieved,serialized_data_array) values
    
    137
    
    12_097762 ch07.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 138
    
    Part II: Get Ready to Mash (now(),’%s’)”, mysql_real_escape_string(serialize($api_return)) ); mysql_query($add_cache_query) or die(mysql_error()); $linkroll_data = $api_return; } else { //otherwise, force using the cache $linkroll_data = get_last_cached_data(‘linkroll’); } }
    
    6.
    
    Add the following function to the code:
    
    //this shared function fetches the last cached data for a given table function get_last_cached_data($table) { //grab the newest cached item from $table $query = “select serialized_data_array from $table order by time_retrieved desc limit 1”; $result = mysql_query($query); $row = mysql_fetch_row($result); //unserialize the data array and return it return unserialize($row[0]); }
    
    7.
    
    To test your changes, add the following line after the get_last_cached_data() function at the bottom of the PHP code block:
    
    die(print_r($linkroll_data));
    
    Now browse to the page. You should see something like this, which is the direct output for the PHP data array: Array ( [0] => Array ( [name] => POSTS [attributes] => Array ( [TAG] => [USER] => negatendo ) [children] => Array ( [0] => Array ( [name] => POST [attributes] => Array ( [HREF] => http://www.blackberry.com/developers/journal/oct_2004/rssrdf_push_service.shtml [DESCRIPTION] => Creating a RSS/RDF Push Service for BlackBerry [HASH] => c832aaf209de81dde235a1d6bda085a0 [TAG] => rss phones dev tech hacks [TIME] => 2006-07-23T17:02:52Z ) ) [1] => Array ( [name] => POST [attributes] => Array ( [HREF] => http://googlesystem.blogspot.com/2006/07/google-video-link-topart-of-video.html [DESCRIPTION] => Google Operating System: Google Video - Link to a Part of the Video [EXTENDED] => How to link to a specific timeframe in Google Video. [HASH] => 5712c9d4fb32653610dde32ca189290b [TAG] => googe hacks web video [TIME] => 2006-07-22T01:21:23Z ) ) etc...
    
    8.
    
    Remove the die(print_r($linkroll_data)); line after you’ve got it working.
    
    Note that the first time you load the page, things might hang for a second. This is because the API call is being made. Reload the page again right away, however, and it should happen much faster. This time you used the cache. You can verify the cache exists by looking at the contents of the linkroll table in phpMyAdmin.
    
    138
    
    12_097762 ch07.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 139
    
    Chapter 7: del.icio.us Mashup Techniques How It Works The completion of this exercise means another step in the direction of a PHP-powered del.icio.us summary page. Here, you set up $linkroll_data with the parsed XML from your API call, whether this was fresh from del.icio.us or from cache. Here’s a line-by-line breakdown of what goes on to make this happen. First, you set up $linkroll_data as an empty array: $linkroll_data = array();
    
    Next you execute a MySQL query to retrieve the number of rows from the linkroll table that has a time_retrieved that was greater than one hour ago: $linkroll_cache_query = “select count(*) from linkroll where time_retrieved > date_sub(now(), interval 1 hour)”; $linkroll_cache_result = mysql_query($linkroll_cache_query);
    
    If any data is returned from this query, you know that you have cached data newer than an hour. The MySQL date calculation function made this pretty easy. If you do have cached data, it is fetched it using the get_last_cached_data() function you designed. if (mysql_result($linkroll_cache_result,0) >= 1) { //use the linkroll cache $linkroll_data = get_last_cached_data(‘linkroll’); } else { ... the rest of our code ... } get_last_cached_data() executes a MySQL query that fetches the serialized_data_array column from the newest row in the table you specify with the $table argument, as shown in the first shaded row in the following code. The field returned is first unserialized by the PHP unserialize() function (as shown in the second shaded line). The serialized_data_array simply holds your PHP array exactly as it appears. As you will see, you use the serialize() function on the PHP array before inserting it in the database. Serialized PHP data is a byte-stream representation of PHP data that can be stored anywhere. You may remember that serialized_data_array column is a MySQL BLOB (Binary Large Object) data-type. BLOBs work especially well with serialized data. //this shared function fetches the last cached data for a given table function get_last_cached_data($table) { //grab the newest cached item from $table $query = “select serialized_data_array from $table order by time_retrieved desc limit 1”; $result = mysql_query($query); $row = mysql_fetch_row($result); //unserialize the data array and return it return unserialize($row[0]); }
    
    139
    
    12_097762 ch07.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 140
    
    Part II: Get Ready to Mash What happens if there is no cached data that fits in the time constraint? Well, then obviously you want to make the API call to fetch the last 20 bookmarks for the user, like this: do_api_call(‘/posts/recent?’,’count=20’); Hopefully, do_api_call() fetches the data and gives it to $api_return. Before you do anything with $api_return, however, you want to make sure this is true and that nothing went wrong. This is
    
    done by checking to see if the status code return was 200 (the HTTP status code for a successful retrieval of a hypertext document), as follows: if ($api_return[‘status’] == 200) { $add_cache_query = sprintf( “insert into linkroll (time_retrieved,serialized_data_array) values (now(),’%s’)”, mysql_real_escape_string(serialize($api_return)) ); mysql_query($add_cache_query) or die(mysql_error()); $linkroll_data = $api_return; } else { //otherwise, force using the cache $linkroll_data = get_last_cached_data(‘linkroll’); }
    
    If the API call was successful, you perform a query to insert the parsed data into your cache table. You give the time_retrieved the value of the MySQL now() function, which will insert the current time and date as far as MySQL knows. In addition, you serialize the entire PHP array with the PHP’s serialize() function, escaping it with mysql_real_escape_string(). The result is a new row inserted into your database that contains all of the parsed data from the API call in PHP form as well as the time and date the cache row was made. If you don’t get a 200 status code, you default to fetching the cached data anyway. This way, if del.icio.us is down or not responding, you still have something to display. The only time this will ever fail is if del.icio.us doesn’t respond the very first time you browse to the page. If that happens, check to see what the response code actually was in order to help diagnose the problem. If the status code was 404, which means the page was not found, the API call may be malformed. You can read all about HTTP status codes and their meanings at www.w3.org/Protocols/rfc2616/rfc2616-sec10.html. So, the end result is that each time the page is loaded you get the same-formatted PHP data array, whether from cache or pulled from the API, ready for your use. With a system like this, your cache database can grow quite large. This may seem useless, but it’s arguable that there’s no such thing as too much data (as long as you can store and retrieve it easily). If, for example, you want to implement a form on the page that grabs bookmarks from earlier dates as selected by the user, you will be able to use the linkroll cache table to help you. It would be simple enough to write a few additional lines that clean out old rows in the linkroll table when new rows are added if the need arises.
    
    140
    
    12_097762 ch07.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 141
    
    Chapter 7: del.icio.us Mashup Techniques Try It Out
    
    Generating Your Own Tagroll
    
    It’s time to get the data for your tagroll. This is very similar to the linkroll code.
    
    1.
    
    You need to create a new table in the delicious_summary2 database to serve as the tagroll cache. In phpMyAdmin, select the delicious_summary2 database from the database drop-down list in the left column. Then, click the SQL tab to go to a text field that lets you enter in SQL queries. Input the following and then click Go to create your tagroll table:
    
    create table tagroll ( time_retrieved datetime not null, serialized_data_array mediumblob not null, index tagroll_time_retrieved (time_retrieved) );
    
    2.
    
    Below the code in index.php that fetches the linkroll (right above the get_last_cached_data() function), add the following:
    
    //next let’s fill $tagroll_data with the tags for this user for our tagroll //using the API $tagroll_data = array(); //start by seeing if the first (and only) row in the tagroll table has a //time_retrieved that is in the last hour $tagroll_cache_query = “select count(*) from tagroll where time_retrieved > date_sub(now(), interval 1 hour)”; $tagroll_cache_result = mysql_query($tagroll_cache_query); //if a count was returned, we should use cache and NOT make an api call if (mysql_result($tagroll_cache_result,0) >= 1) { //use the tagroll cache $tagroll_data = get_last_cached_data(‘tagroll’); } else { //no cache so time to update our cache with a new data fetched from the api do_api_call(‘/tags/get’); //if status is 200 then create the cache and use $api_return for our data. //otherwise, fetch the cache data instead. if ($api_return[‘status’] == 200) { $add_cache_query = sprintf( “insert into tagroll (time_retrieved,serialized_data_array) values (now(),’%s’)”, mysql_real_escape_string(serialize($api_return)) ); mysql_query($add_cache_query) or die(mysql_error()); $tagroll_data = $api_return; } else { //otherwise, force using the cache $tagroll_data = get_last_cached_data(‘tagroll’); } }
    
    3.
    
    Test your new tagroll by printing $tagroll_data to the page as follows:
    
    die(print_r($tagroll_data));
    
    141
    
    12_097762 ch07.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 142
    
    Part II: Get Ready to Mash You should see something like this: Array ( [0] => Array ( [name] => TAGS [attributes] => Array ( ) [children] => Array ( [0] => Array ( [name] => TAG [attributes] => Array ( [COUNT] => 1 [TAG] => *frequent ) ) [1] => Array ( [name] => TAG [attributes] => Array ( [COUNT] => 36 [TAG] => *temp ) ) [2] => Array ( [name] => TAG [attributes] => Array ( [COUNT] => 33 [TAG] => *wishlist ) ) [3] => Array ( [name] => TAG [attributes] => Array ( [COUNT] => 27 [TAG] => 3d ) ) [4] => Array ( [name] => TAG [attributes] => Array ( [COUNT] => 1 [TAG] => TeX ) ) [5] => Array ( [name] => TAG [attributes] => Array ( [COUNT] => 1 [TAG] => XML ) ) [6] => Array ( [name] => TAG [attributes] => Array ( [COUNT] => 1 [TAG] => a ) ) [7] => Array ( [name] => TAG [attributes] => Array ( [COUNT] => 1 [TAG] => architecture ) ) [8] => Array ( [name] => TAG [attributes] => Array ( [COUNT] => 56 [TAG] => activism ) ) [9] => Array ( [name] => TAG [attributes] => Array ( [COUNT] => 1 [TAG] => admin ) ) [10] => Array ( [name] => TAG [attributes] => Array ( [COUNT] => 2 [TAG] => adobe ) ) etc...
    
    4.
    
    Check the contents of the tagroll table in phpMyAdmin to see if the data was cached to the database. With a page reload, that data should come up much faster as it is loaded from cache.
    
    5.
    
    Be sure and remove die(print_r($tagroll_data)); before continuing.
    
    How It Works Fetching the tagroll works almost exactly like fetching the linkroll. You even store its data as a serialized array. The only difference is your arguments to do_api_call(), which fetch all tags with no additional query strings: do_api_call(‘/tags/get’);
    
    Now that you’re starting to get the data you need, its time to put it in your three-column layout the way you want to. This includes generating a list of links for your linkroll and tag clouds for the tagroll.
    
    Try It Out Displaying Your Linkroll and Tagroll 1. It will be easiest for this project to borrow the styles from delicious_summary.html while including a few extra bits of styling for your tag clouds. You could just link to the style sheet for delicious_summary.html (wherever it may be), but it might be better for now to copy it over and modify it to keep these two projects distinct. Create a new file called stylesheet.css in the delicious_summary2 folder and give it the following code (or just use delicious_summary2/ stylesheet.css code from the Wrox website): /* general page stylings */ html, body { background-color: #7A8073; margin: 0 2em 1em 2em; font-family: Arial, Helvetica, san-serif; position: relative; margin: 5px; color: #D0D9C3; } /* three column layout ids */ #header
    
    142
    
    12_097762 ch07.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 143
    
    Chapter 7: del.icio.us Mashup Techniques { color: #FFE6F9; text-align: center; position: absolute; top: 0; left: 0; width: 920px; height: 100px; font-size: 35px; } #left_col { position: absolute; top: 100px; left: 0; width: 295px; padding: 5px; border: 1px solid #000000; background-color: #80737C; } #right_col { position: absolute; top: 100px; left: 620px;; width: 295px; padding: 5px; border: 1px solid #000000; background-color: #80737C; } #center_col { position: absolute; top: 100px; left: 310px; width: 295px; padding: 5px; border: 1px solid #000000; background-color: #80737C; } a { text-decoration: none; color: #F5FFE6; font-weight: bold; } a:hover { color: #7A8073; background-color: #FFE6F9; } .col_banner {
    
    143
    
    12_097762 ch07.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 144
    
    Part II: Get Ready to Mash color: #FFE6F9; font-size: 20px; border-bottom: 1px dotted #FFE6F9; } ul, li { margin: 0; padding: 5px 0 5px 0; list-style-type: none; } p { margin: 0; padding: 0; font-size: smaller; } /* tagroll classes */ .largest_tag a { font-size: 55px; color: #F5FFE6; } .large_tag a { font-size: 45px; color: #CDDCB7; } .medium_tag a { font-size: 35px; color: #A6B293; } .small_tag a { font-size: 25px; color: #A2AE90; } .smallest_tag a { font-size: 15px; color: #7A8073 }
    
    2.
    
    Add the following link to the style sheet between the elements in index.php:
    
    ’s del.icio.us Summary Page
    
    3.
    
    144
    
    Create the three columns in your main HTML markup between the tags and below your already existing tag:
    
    12_097762 ch07.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 145
    
    Chapter 7: del.icio.us Mashup Techniques
    
    4.
    
    Begin with your linkroll, which will appear in the left column in a with left_col as its id. Insert the following:
    
    My Latest Bookmarks
    
    5.
    
    Place the following code in the center-column (with its id attribute set to center_col):
    
    My Tags
    
    6.
    
    Browse to the page. Your linkroll and tagroll should look like in Figure 7-2.
    
    Figure 7-2
    
    146
    
    12_097762 ch07.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 147
    
    Chapter 7: del.icio.us Mashup Techniques How It Works With this portion of the project, you finally take your actual del.icio.us data, whether cached or straight from the API, and output it as a part of your HTML markup. With your linkroll data, you simply iterate through each of your links and make them items in an unordered list. As you may remember, the XML response for the del.icio.us /posts/recent API method output looks something like this:
    
    When you parse this XML, you get something like the following PHP array: Array ( [0] => Array ( [name] => POSTS [attributes] => Array ( [TAG] => [USER] => negatendo ) [children] => Array ( [0] => Array ( [name] => POST [attributes] => Array ( [HREF] => http://www.blackberry.com/developers/journal/oct_2004/rss-rdf_push_service.shtml [DESCRIPTION] => Creating a RSS/RDF Push Service for BlackBerry [HASH] => c832aaf209de81dde235a1d6bda085a0 [TAG] => rss phones dev tech hacks [TIME] => 2006-07-23T17:02:52Z ) ) [1] => Array (
    
    147
    
    12_097762 ch07.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 148
    
    Part II: Get Ready to Mash [name] => POST [attributes] => Array ( [HREF] => http://googlesystem.blogspot.com/2006/07/google-video-link-to-part-of-video.html [DESCRIPTION] => Google Operating System: Google Video - Link to a Part of the Video [EXTENDED] => How to link to a specific timeframe in Google Video. [HASH] => 5712c9d4fb32653610dde32ca189290b [TAG] => googe hacks web video [TIME] => 2006-07-22T01:21:23Z ) ) ) ) [status] => 200 )
    
    For the linkroll and tagroll, you are only interested in the children part of the array, because this contains an array for each element. So, first you assign the $posts variable: //list recent posts (linkroll) $posts = $linkroll_data[0][‘children’];
    
    Then you simply iterate through $posts, outputting each bookmark as a list item in an unordered list. As with the JSON data earlier in this chapter, you only need output the note field (called EXTENDED in the API response) if it exists: echo “
    ”; foreach ($posts as $post) { echo “
    • ”. $post[‘attributes’][‘DESCRIPTION’].”
    ”; if (isset($post[‘attributes’][‘EXTENDED’])) echo “

    ”.$post[‘attributes’][‘EXTENDED’].”

    ”; } echo “
    ”;
    
    The tagroll is a little more complicated, because you not only want to output each tag, but you also want to assign size and color to the tag based on how often it is used. You want to create a tag cloud. You added five different CSS classes that define different colors and sizes for different tags earlier in the CSS markup: /* tagroll classes */ .largest_tag a { font-size: 55px; color: #F5FFE6;
    
    148
    
    12_097762 ch07.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 149
    
    Chapter 7: del.icio.us Mashup Techniques } .large_tag a { font-size: 45px; color: #CDDCB7; } .medium_tag a { font-size: 35px; color: #A6B293; } .small_tag a { font-size: 25px; color: #A2AE90; } .smallest_tag a { font-size: 15px; color: #7A8073; }
    
    With the tagroll, you want to distribute tags among these five different sizes, assigning them their corresponding class when you output them to the page. Fortunately, the del.icio.us API returns the number of times each tag is used via the count attribute, so you can determine the most-used tag and the leastused tag, and calculate three other counts between them to arrange tags by their number of times used. The del.icio.us API’s /tags/get method has an XML response similar to this:
    
    Your parsed array version of the response sees it as this: Array ( [0] => Array ( [name] => TAGS [children] => Array ( [0] => Array ( [name] => TAG [attributes] => Array ( [COUNT] => 1 [TAG] => art
    
    149
    
    12_097762 ch07.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 150
    
    Part II: Get Ready to Mash ) ) [1] => Array ( [name] => TAG [attributes] => Array ( [COUNT] => 36 [TAG] => dev ) ) [2] => Array ( [name] => TAG [attributes] => Array ( [COUNT] => 33 [TAG] => mysql ) ) [3] => Array ( [name] => TAG [attributes] => Array ( [COUNT] => 33 [TAG] => php ) )
    
    ) ) [status] => 200 )
    
    This format is not useful for finding out which are the most-used and least-used tags. So, the first thing you do is pull out the children arrays and reorganize and sort them by count: //pull all of the tags and their count out of the data array first //and put it into a k => v array, where v = an array of all tags w/ that count $tag_counts = array(); $tags = $tagroll_data[0][‘children’]; foreach ($tags as $tag) $tag_counts[$tag[‘attributes’][‘COUNT’]][] = $tag[‘attributes’][‘TAG’]; //sort tags by counts ksort($tag_counts);
    
    If you were to output $tag_counts to the screen, it would look something like this:
    
    150
    
    12_097762 ch07.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 151
    
    Chapter 7: del.icio.us Mashup Techniques Array ( [1] => Array ( [0] => art ) [33] => Array ( [0] => php [1] => mysql ) [36] => Array ( [0] => dev ) )
    
    Before determining the highest and lowest count, you remove any arrays that denote 1, 2, or 3 as their count (and therefore the tags that are under those counts). For this example, any tags used three or fewer times are considered to be too small to be significant for a tag cloud, so you use the following code: //remove groups of tags from $tag_counts with a count of 3 or below for ($i = 1; $i $tags_in_count){ foreach ($tags_in_count as $tag_name) $tag_values[$tag_name] = $count; } ksort($tag_values);
    
    151
    
    12_097762 ch07.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 152
    
    Part II: Get Ready to Mash Finally, you iterate through the array, creating a element for each tag and assigning the appropriate class name to match where the tag’s count falls in the distribution: //now go through $tag_values and output them with the according classes foreach ($tag_values as $tag_name => $tag_count) { if ($tag_count == $largest_count) echo “ “; elseif ($tag_count == $smallest_count) echo “ “; elseif ($tag_count > $smallest_count + ($count_distribution * 2)) echo “ “; elseif ($tag_count > $smallest_count + $count_distribution) echo “ “; else echo “ “; echo “”.$tag_name.””; echo “ ”; }
    
    And that’s one way a tag cloud is created. However, there’s still one thing missing in delicious_ summary2: the third column. In the original delicious_summary.html exercise, the right column contained all of the bookmarks filed under the JavaScript tag. However, this time you will do something different (and hopefully a little more fun). You may have noticed that the links in your tag cloud don’t go to their corresponding tag page on del.icio.us. This is because in delicious_summary2, you want the last 20 bookmarks under a tag to instantly appear in the third column on the right after that tag is clicked. You’ll use the SAJAX PHP library to achieve this without a page reload. The following Try It Out shows you how to do this.
    
    Try It Out Applying the Selectable Tag Linkroll 1. Create a MySQL table to store the data for the selectable tag linkroll. First, select the delicious_summary2 database, using the drop-down menu in the left portion of the phpMyAdmin interface. Then execute the following query in phpMyAdmin: create table tag_linkroll ( tag varchar(255) not null, time_retrieved datetime not null, serialized_data_array blob not null, index selectable_linkroll_time_retrieved (time_retrieved), index selectable_linkroll_tag (tag) );
    
    2.
    
    Include the SAJAX library in this project. To do this, copy Sajax.php from example6-10 (or download it from the SAJAX website at www.modernmethod.com/sajax/) into your lib folder, and then include the Sajax.php file in your code after delicious_mashups.in.php as follows:
    
    //also bring in the del.icio.us Mashups PHP library we made include(‘lib/delicious_mashups.inc.php’); //bring in Sajax goodness require(“lib/Sajax.php”);
    
    152
    
    12_097762 ch07.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 153
    
    Chapter 7: del.icio.us Mashup Techniques 3.
    
    Add the following function to your PHP code after the code that assembles $tagroll_data (or anywhere before your HTML markup begins):
    
    //this function will grab the links for a particular tag, whether from //cache or a del.icio.us API call function get_tag_linkroll($tag) { global $api_return; //tag_linkroll_data with be filled with the 20 latest posted bookmarks //under $tag $tag_linkroll_data = array(); //check for cache like with the normal linkroll but also query on the tag name $tag_linkroll_cache_query = “select * from tag_linkroll where time_retrieved > date_sub(now(), interval 1 hour) and tag=’”.mysql_real_escape_string($tag).”’”; $tag_linkroll_cache_result = mysql_query($tag_linkroll_cache_query); //if a row was returned, we should use cache and NOT make an api call if (mysql_num_rows($tag_linkroll_cache_result) >= 1) { //use the tag linkroll cache $tag_linkroll_data = get_last_cached_data(‘tag_linkroll’,$tag); } else { //no cache so time to update our cache with a new data fetched from the api do_api_call(‘/posts/recent?’,”count=20&tag=”.$tag); //if status is 200 then create the cache and use $api_return for our data. //otherwise, fetch the cache data instead. if ($api_return[‘status’] == 200) { $add_cache_query = sprintf( “insert into tag_linkroll (time_retrieved,serialized_data_array,tag) values (now(),’%s’,’%s’)”, mysql_real_escape_string(serialize($api_return)), mysql_real_escape_string($tag) ); mysql_query($add_cache_query) or die(mysql_error()); $tag_linkroll_data = $api_return; } else { //otherwise, force using the cache $tag_linkroll_data = get_last_cached_data(‘tag_linkroll’,$tag); } } //return the list with proper html formatting $posts = $tag_linkroll_data[0][‘children’]; $html = “selected tag: $tag”; $html .= “
    ”; foreach ($posts as $post) { $html .= “
    • ”. $post[‘attributes’][‘DESCRIPTION’].”
    ”; if (isset($post[‘attributes’][‘EXTENDED’])) $html .= “

    ”.$post[‘attributes’][‘EXTENDED’].”

    ”; } $html .= “
    ”; return $html; }
    
    153
    
    12_097762 ch07.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 154
    
    Part II: Get Ready to Mash 4.
    
    Modify the get_cached_data() function to optionally query on a tag in addition to time_ retrieved. Modify get_cached_data() to match the following, paying special attention to the bold lines:
    
    //this shared function fetches the last cached data for a given table function get_last_cached_data($table,$tag = ‘’) { //grab the newest cached item from $table if ($tag != ‘’) { $query = “select serialized_data_array from $table where tag = ‘“.mysql_real_escape_string($tag).”’ order by time_retrieved desc limit 1”; } else { $query = “select serialized_data_array from $table order by time_retrieved desc limit 1”; } $result = mysql_query($query); $row = mysql_fetch_row($result); //unserialize the data array and return it return unserialize($row[0]); }
    
    Because $tag is an optional parameter, this change should not affect the way the function is already in use by the rest of the page.
    
    5.
    
    Initialize SAJAX and export the get_tag_linkroll() function. Add this to the bottom of your first PHP code block, just before the HTML code begins:
    
    //initalize sajax and export the get_tag_linkroll function sajax_init(); sajax_export(“get_tag_linkroll”); sajax_handle_client_request();
    
    6.
    
    Inside the elements of your HTML markup, add the JavaScript code necessary for SAJAX via the sajax_show_javascript() function, as well as the JavaScript function you will be calling on your page and its callback function that will be executed by SAJAX:
    
    ’s del.icio.us Summary Page //called when you click a tag in the tag-cloud function get_tag_linkroll(tag) { document.getElementById(“tag_linkroll”).innerHTML = “Fetching linkroll. Please wait....”; x_get_tag_linkroll(tag, get_tag_linkroll_cb); } //x_get_tag_linkroll callback function get_tag_linkroll_cb(result) { document.getElementById(“tag_linkroll”).innerHTML = result;
    
    154
    
    12_097762 ch07.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 155
    
    Chapter 7: del.icio.us Mashup Techniques }
    
    7.
    
    Go to your code that outputs the tagroll tag cloud and change the anchor () elements to perform the get_tag_linkroll() JavaScript function when clicked as noted in the bold lines:
    
    foreach ($tag_values as $tag_name => $tag_count) { if ($tag_count == $largest_count) echo “ “; elseif ($tag_count == $smallest_count) echo “ “; elseif ($tag_count > $smallest_count + ($count_distribution * 2)) echo “ “; elseif ($tag_count > $smallest_count + $count_distribution) echo “ “; else echo “ “; echo “”.$tag_name.””; echo “ ”; }
    
    8.
    
    Set up the right column by giving it the following markup, between the elements with the id=”right_col” attribute:
    
    Browse by Tag

    « Click a tag in the column to the left to view my bookmarks for it here.

    
    
    9. 10.
    
    Browse to index.php and click any of your tags. There may be a slight delay as the bookmarks for the tag you clicked are downloaded and cached, but eventually the bookmarks should automatically appear in the right column, as shown in Figure 7-3. After clicking a few tags, check out the contents of the tag_linkroll table in phpMyAdmin. You’ll notice that a row appears for each tag you clicked. Each tag has individual cached data.
    
    How It Works When you click a tag link, the get_tag_linkroll() JavaScript function is called. You give get_tag_ linkroll() its argument with the PHP output of the tag name in your tagroll: echo “”.$tag_name.””;
    
    The return false portion of the onClick attribute prevents the link from being sent to the page and the page reloading.
    
    155
    
    12_097762 ch07.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 156
    
    Part II: Get Ready to Mash
    
    Figure 7-3
    
    get_tag_linkroll() simply replaces the content in the in the third column with a loading message, and then executes the SAJAX call with x_get_tag_linkroll(), informing SAJAX that when it’s done, it should send its data to the get_tag_linkroll_cb() JavaScript function. The arguments
    
    sent are the tag name and the name of the callback function: function get_tag_linkroll(tag) { document.getElementById(“tag_linkroll”).innerHTML = “Fetching linkroll. Please wait....”; x_get_tag_linkroll(tag, get_tag_linkroll_cb); }
    
    The PHP function get_tag_linkroll() does almost the exactly what you did when fetching your linkroll, with only a few differences. First, the function checks to see if there is a cache entry inside your database that has been there less than an hour. Not only does it query time_retrieved this time, but it queries on the tag as well: function get_tag_linkroll($tag) {
    
    156
    
    12_097762 ch07.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 157
    
    Chapter 7: del.icio.us Mashup Techniques global $api_return; //tag_linkroll_data with be filled with the 20 latest posted bookmarks //under $tag $tag_linkroll_data = array(); //check for cache like with the normal linkroll but also query on the tag name $tag_linkroll_cache_query = “select * from tag_linkroll where time_retrieved > date_sub(now(), interval 1 hour) and tag=’”.mysql_real_escape_string($tag).”’”; $tag_linkroll_cache_result = mysql_query($tag_linkroll_cache_query);
    
    There will be separate entries for each tag in your database. With so many possible caches — as many tags you have — this is when MySQL starts to become extremely useful for caching. Just like in your normal linkroll, if there is a cached row that’s been there less than an hour, your retrieve the cache; otherwise, you execute the API call. You supply the tag used as a second argument to the modified get_last_cache_data() function: //if a row was returned, we should use cache and NOT make an api call if (mysql_num_rows($tag_linkroll_cache_result) >= 1) { //use the tag linkroll cache $tag_linkroll_data = get_last_cached_data(‘tag_linkroll’,$tag); } else { ...the rest of the code... }
    
    You have to change get_last_cached_data()to enable it to query on the tag provided if one is supplied. This is why you add an if control statement that checks for a value for the $tag variable. If it exists, the function queries on the tag as well; if it doesn’t, it will just grab the newest row: if ($tag != ‘’) { $query = “select serialized_data_array from $table where tag = ‘“.mysql_real_escape_string($tag).”’ order by time_retrieved desc limit 1”; } else { $query = “select serialized_data_array from $table order by time_retrieved desclimit 1”; }
    
    As for get_tag_linkroll(), if there is no recent cache, it’s time to query the API. This time, the API call includes the tag parameter, whose value is the tag you want to get the bookmarks for: do_api_call(‘/posts/recent?’,”count=20&tag=”.$tag);
    
    The query is slightly different when you’re creating the cache entry. You insert a value for the tag column as well as the usual serialized data and current date and time: if ($api_return[‘status’] == 200) { $add_cache_query = sprintf( “insert into tag_linkroll (time_retrieved,serialized_data_array,tag) values (now(),’%s’,’%s’)”, mysql_real_escape_string(serialize($api_return)), mysql_real_escape_string($tag) );
    
    157
    
    12_097762 ch07.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 158
    
    Part II: Get Ready to Mash mysql_query($add_cache_query) or die(mysql_error()); $tag_linkroll_data = $api_return; } else { //otherwise, force using the cache $tag_linkroll_data = get_last_cached_data(‘tag_linkroll’,$tag); }
    
    With SAJAX, unfortunately you can’t just have the PHP page re-parsed and then output the values of $tag_linkroll_data inside the column as you did with $linkroll_data. Instead, your function must return the already fully formatted data, which JavaScript will then put where appropriate via setting the innerHTML value for the third column’s inner . So, inside your function, you assemble fully formatted HTML in the $html variable, and then return $html: //return the list with proper html formatting $posts = $tag_linkroll_data[0][‘children’]; $html = “selected tag: $tag”; $html .= “
    ”; foreach ($posts as $post) { $html .= “
    • ”.$post[‘attributes’][‘DESCRIPTION’].”
    ”; if (isset($post[‘attributes’][‘EXTENDED’])) $html .= “

    ”.$post[‘attributes’][‘EXTENDED’].”

    ”; } $html .= “
    ”; return $html;
    
    Notice how get_tag_linkroll() is still able to use all other functions and access all other variables on the page, including get_last_cached_data() and the values for $api_return. You’re even able to interact with the MySQL database. When the function is complete, SAJAX executes the JavaScript callback function get_tag_linkroll_ cb(), setting the result argument with the PHP-returned $html variable, and get_tag_linkroll_ cb()sets the innerHTML value for the tag_linkroll element with the returned data: //x_get_tag_linkroll callback function get_tag_linkroll_cb(result) { document.getElementById(“tag_linkroll”).innerHTML = result; }
    
    Now that’s a tasty del.icio.us summary page.
    
    Taking It to the Desktop By no means is interacting with the del.icio.us API, or for that matter any API, limited to web-based applications like the two projects you’ve done so far in this chapter. An API can also be used to enhance or create computer desktop applications, even if the API it uses is meant for a web-based service. In fact, desktop applications are being connected to the web more frequently to enhance the services that web applications provide.
    
    158
    
    12_097762 ch07.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 159
    
    Chapter 7: del.icio.us Mashup Techniques Creating a desktop application for Windows or Mac OS X is outside the scope of this book. However, there is one desktop application you’ve already spent a lot of time using in this book that you can program and integrate with del.icio.us API : the Firefox web browser. During one of the final projects in this book, you will develop your own Firefox extension that works with del.icio.us, thus bringing del.icio.us into the desktop environment. For now, you can get a feeling for how this might work by installing and using the official del.icio.us Firefox extension.
    
    Try It Out Adding the del.icio.us Firefox Extension 1. In Firefox, browse to http://del.icio.us/help/firefox/extension. Click Install to install the extension. Firefox may prompt you to authorize del.icio.us to install extensions first. If it does, click the Edit Options button and click Allow to allow extensions to be installed from the del.icio.us website. Then, click Install again.
    
    2.
    
    When the installation is complete, restart Firefox. You should see two new buttons to the left of the URL — one that looks like the del.icio.us logo and another that looks like a price tag with the word TAG on it — as shown in Figure 7-4.
    
    Figure 7-4
    
    The del.icio.us logo button will serve as a shortcut to your del.icio.us page. This way, you can quickly access your del.icio.us bookmarks. The TAG button is more interesting. Pressing it will open up a new posting window from which you can save the bookmark for whatever page you are browsing on. The window looks something like Figure 7-5.
    
    Figure 7-5
    
    159
    
    12_097762 ch07.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 160
    
    Part II: Get Ready to Mash Here’s something cool about this del.icio.us extension interface. If you have any selected text in the web page that you want to bookmark, just press the Tag button to automatically add it to the notes field. Also, the del.icio.us Firefox extension adds a del.icio.us menu to Firefox full of other interesting features. Be sure and check it out.
    
    How It Works The Firefox extension architecture enables developers to enhance and extend the Firefox web program. The del.icio.us development team has decided to take advantage of this and create their own extension to improve the del.icio.us experience for Firefox users. All of the features that the del.icio.us Firefox extension provides are simply new ways to interface with the features of del.icio.us that you’ve already used, such as posting a bookmark or searching del.icio.us. Instead of using bookmarklets or web pages, these features directly integrate with the software instead. The end result is a whole new del.icio.us user experience. When you develop your own Firefox extension later, you will use it to make the process of posting a new bookmark to a certain user’s del.icio.us page easier and more productive. For now, have fun experimenting with all the features the del.icio.us Firefox extension provides.
    
    Summar y In this chapter, you were given the chance to apply the API methods, tools, programming languages, and ideas you’ve only lightly experimented with up to this point to create two del.icio.us mashups. These mashups presented del.icio.us in a whole new and interesting way that it normally doesn’t provide. The first mashup used purely native HTML and JavaScript to fetch del.icio.us and raw JSON feeds. You then parsed and reformatted this data into something all your own. The second mashup took the same idea into the PHP realm. It gave you the ability to design a caching mechanism that solves many webbased API issues. Also you got a taste of what del.icio.us is like when integrated with a desktop computer program. In the next chapter, you’ll go even further with these concepts and really start mashing things together using different web software and APIs.
    
    Exercises Test your understanding of the projects in this chapter by completing the following exercises.
    
    1.
    
    160
    
    In delicious_summary.html, where you used the JavaScript DOM API to output the JSON data, alter the code to add an additional paragraph (

    ) node listing all of the tags for each bookmark displayed.
    
    12_097762 ch07.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 161
    
    Chapter 7: del.icio.us Mashup Techniques 2.
    
    If you wanted to give the delicious_summary2 project to a friend so they could create their own summary page, they would need to do a few things to get it up and running on their web server (in addition to installing the delicious_summary2 folder and its contents). What steps would they need to follow to bring their own summary page into existence?
    
    3.
    
    In the linkroll area, how would you add a bookmark link that other del.icio.us users could copy to their own del.icio.us? (Hint: take a look at how the del.icio.us bookmarklet works.)
    
    161
    
    12_097762 ch07.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 162
    
    13_097762 pt03.qxp
    
    12/7/06
    
    7:18 PM
    
    Page 163
    
    Part III
    
    Mashups and Remixes Chapter 8: Mashing del.icio.us and WordPress Chapter 9: Remixing del.icio.us with Greasemonkey Chapter 10: Remixing RSS Feeds Chapter 11: Mashing It Up with Web Services
    
    13_097762 pt03.qxp
    
    12/7/06
    
    7:18 PM
    
    Page 164
    
    14_097762 ch08.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 165
    
    8 Mashing del.icio.us and WordPress Arguably, the first thing that del.icio.us users want to mash up del.icio.us with is their blogging software, whatever it may be. This is probably because blogs, which are used to regularly post thoughts and ideas to the web, and del.icio.us, which is used to regularly save favorite websites and other daily discoveries, go hand-in-hand, at least conceptually. It seems only natural that they should be integrated in some way. Indeed, del.icio.us offers many features that help empower a typical blog to be much more useful and informational. In this chapter, you will look at some of the techniques commonly used in integrating del.icio.us with the WordPress blogging system. This will include several simple projects that will enable you to do the following: ❑
    
    Post a daily digest of bookmarks to WordPress.
    
    ❑
    
    Let your readers quickly and easily save links to your posts to their own del.icio.us accounts.
    
    ❑
    
    Present links inside your WordPress posts that will direct your readers to a page on del.icio.us where they can read about the popularity of the post among del.icio.us users and the related del.icio.us conversation.
    
    ❑
    
    Associate with each of your blog posts relevant bookmarks on del.icio.us via a mashup of your WordPress categories and del.icio.us tags.
    
    ❑
    
    Implement the del.icio.us Play Tagger to let your readers play links to .mp3 files inline with your posts.
    
    It may seem like a lot to do, but each of these projects are very simple and full of potential for expanding the power of WordPress and del.icio.us.
    
    14_097762 ch08.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 166
    
    Part III: Mashups and Remixes
    
    Sharing Your Daily Discoveries There are a couple of ways to share a daily digest of your del.icio.us bookmarks on your WordPress blog. The easiest and perhaps most recommended way is to include a del.icio.us linkroll in the sidebar or elsewhere in your WordPress template. Doing this is pretty easy, just like it was in the delicious_summary .html project. Include the JavaScript code for the linkroll in the WordPress theme wherever you want to put the linkroll. However, another popular method is to create an automated system that posts the day’s bookmarks to WordPress as a new blog entry. del.icio.us offers a built-in interface to automate the posting of your daily bookmarks. At the time of this writing, this system wasn’t fully developed and was still considered to be experimental. However, if you want to try it out, you can find the interface at http://del.icio.us/settings/yourname/daily (substitute your del.icio.us username for yourname). The “job thingy,” as the daily posting system calls it, is essentially a scheduled task for del.icio.us to perform with information on where it should send its data. This works with WordPress. If you click Add A New Thingy, you will be asked for the following information: ❑
    
    job_name: This can be any descriptive name, such as WordPress Post Thingy.
    
    ❑
    
    out_name: This is the username for the posting account. For WordPress, you would use the name of a user on your WordPress blog, such as admin.
    
    ❑
    
    out_pass: This is the password for your posting account. For WordPress, if you used the admin account, it would be admin password.
    
    ❑
    
    out_url: The interface for del.icio.us to send data to del.icio.us will send an XML-RPC request
    
    to your WordPress blog’s XML-RPC server interface at this URL. As you may remember from your earlier experience with WordPress and XML-RPC, it’s the full URL that ends in /xmlrpc.php. (Of course, because your WordPress blog exists on your local machine, putting your localhost address in this field will not work. Your WordPress blog would need to exist on the public Internet first.) ❑
    
    out_time: This is the hour of the day when you want the posting to occur. It’s best to make this value 24, which will be the end of the day for del.icio.us and therefore get every link you posted to del.icio.us for that day.
    
    ❑
    
    out_blog_id and out_cat_id: These are the ids for the blog and category you want to post to. For your WordPress blog, the value for both of these will probably be 1.
    
    After you create a job thingy, del.icio.us will automatically post links to your blog at the time you specified every day. At this time not only is this feature experimental, but it also gives you very little control over the appearance of the post and other factors. In the following Try It Out, you create your own daily posting program. It is written in PHP, uses the del.icio.us API, and posts to your WordPress blog daily via its XML-RPC interface with the help of the crontab (or another) scheduling service.
    
    Try It Out Using the Autoposter 1. In your htdocs directory, create a new directory called autoposter. Then create a lib subfolder inside the autoposter directory. (You will need several third-party libraries to get this program to work and this will make developing it much easier.)
    
    166
    
    14_097762 ch08.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 167
    
    Chapter 8: Mashing del.icio.us and WordPress 2.
    
    Download and/or copy the following files into the lib subdirectory: ❑
    
    The delicious_mashups.inc.php utility library you created in Chapter 7
    
    ❑
    
    Snoopy.class.php (which delicious_mashups.inc.php is dependent on)
    
    ❑
    
    XML-RPC for PHP (which consists of the xmlrpc.inc file and the compat subdirectory — you may remember it from the example6-9 project in Chapter 6)
    
    3.
    
    Create a script called autoposter.php in the autoposter directory. You will primarily be using this script from the command line, not browsing to it on the web. However, you will want to be able to do some initial testing with your web browser, so having it available in the htdocs directory for the purpose of development will be useful.
    
    4.
    
    The first thing you will want to do to with autoposter.php is start a PHP code block and then set up any constants that will be needed throughout the code, as follows:
    
    Information about your WordPress blog needed by XML-RPC for PHP is made into a PHP constant in addition to your del.icio.us account information. Be sure and set the values for these variables to whatever is appropriate for your own setup.
    
    7.
    
    Browse to autoposter.php in your web browser and check your WordPress blog. You should see a new post containing all of yesterday’s bookmarks as shown in Figure 8-1 (or a message saying you had no bookmarks for that day).
    
    Figure 8-1
    
    8.
    
    You’ll probably want to automate this process in some way. Crontab or some other commandline scheduling service is useful for this because you can actually execute PHP from the command line and not only from a web browser and Apache.
    
    169
    
    14_097762 ch08.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 170
    
    Part III: Mashups and Remixes For example, you can run autoposter.php from the command line in Mac OS X from inside the Terminal application with a command similar to this: php -f /Libarary/WebServer/Documents/autoposter/autoposter.php
    
    With Windows, you can also run PHP scripts from the command prompt. You may need to specify the location to the php.exe program as a part of the command: C:\PHP\php.exe -f C:\htdocs\autoposter\autoposter.php
    
    You don’t need the -f argument if you make the autoposter.php script executable and set as its first line the path to PHP, just as you would with a UNIX shell. -f means “parse this file” and tells PHP to execute the PHP code as-is. When you run the script from the command prompt, whether on Mac OS X or Windows, the output of the script will be printed to the screen. In the case of autoposter.php, the list of daily links will be posted to your WordPress blog as well.
    
    9.
    
    In your Crontab file, you can direct this output to a log file. An example crontab entry to run the autoposter.php script daily and append its output to a file called autoposter.log might look something like this:
    
    0 0 * * * php -f /Libarary/WebServer/Documents/autoposter/autoposter.php >> / Libarary/WebServer/Documents/autoposter/autoposter.log
    
    Installing this as an entry in crontab would execute the autoposter.php script every night at midnight. If crontab is unavailable on your system, such as with Windows computers, you might want to check out one of the many alternatives that work in much the same way — such as pycron, which is available for free at www.kalab.com/freeware/pycron/pycron.htm.
    
    How It Works The autoposter.php script translates output from the del.icio.us API into a new WordPress blog post. The first thing you need to do to make this happen is to assemble a call to the del.icio.us /posts/get? method with the arguments needed to fetch all of the prior day’s saved bookmarks. To do this, $yesterday is assigned yesterday’s date in CCYY-MM-DD format, with the help of the PHP mktime() function, which will return the UNIX timestamp for the time given, and date(), which formats the date properly: //get yesterday’s date in CCYY-MM-DD $yesterday = date(“Y-m-d”,mktime(0,0,0,date(“m”),date(“d”)-1,date(“Y”)));
    
    Then two variables are initialized that will be appended to further information later in the script. The first variable, $log, holds any output messages that need to be sent to the screen or directed to the crontab log, e-mail, or the like, and $post_content holds the HTML content to appear in your new blog post: //set up a log and html post content variable $log = “$yesterday autoposter.php:”; $post_content = “”;
    
    Next you make the call to /posts/get?, sending yesterday’s date as an argument:
    
    170
    
    14_097762 ch08.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 171
    
    Chapter 8: Mashing del.icio.us and WordPress //grab yesterday’s bookmarks via the del.icio.us API do_api_call(“/posts/get?”,”&dt=$yesterday”);
    
    Because this API method call is executed every time the script is run, it is imperative that it runs only once per day. If the API call is successful, you then go on to find out if the first element in the $api_return variable has any children, and if so, you then assemble an unordered list of all the returned posts into $post_content (just like you did with the custom linkrolls developed in Chapter 7): //make sure the api return status code is 200 before moving on if ($api_return[‘status’] == 200) { //make sure we have some posts if (isset($api_return[0][‘children’])) { //create the list of links $posts = $api_return[0][‘children’]; $post_content .= “

    ”; foreach ($posts as $post) { $post_content .= “
    • “.$post[‘attributes’][‘DESCRIPTION’].”
    ”; if (isset($post[‘attributes’][‘EXTENDED’])) $post_content .= “

    ”.$post[‘attributes’][‘EXTENDED’].”

    ”; } $post_content .= “
    ”; } else { //no bookmarks for today $post_content .= “Sorry, but I didn’t save any bookmarks to del.icio.us today.”; } } else { ... the rest of the code ... }
    
    The XML structure for a /posts/get? response consists of an element called with child elements. So, if the first element of the array has no children, there are no elements to be found in the data returned. If there are no elements, the $post_content variable is assigned a message explaining that there were no del.icio.us posts for that day. You may want to change the script so that a new blog post does not happen at all if there are no del.icio.us bookmarks saved for that day in order to avoid clutter on your blog. Then, the rest of the post is assembled into a call to metaWeblog.newPost and then sent to the XMLRPC server located at your WordPress installation: //create the xml-rpc client object $client = new xmlrpc_client(WP_XMLRPC_URL,WP_XMLRPC_HOST,80); //create an array for our post data $post = array(); $post[‘title’ ]= “del.icio.us links for today”;
    
    171
    
    14_097762 ch08.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 172
    
    Part III: Mashups and Remixes $post[‘description’] = $post_content; //assemble the xml-rpc message $paramaters = array( php_xmlrpc_encode(“1”), php_xmlrpc_encode(WP_USERNAME), php_xmlrpc_encode(WP_PASSWORD), php_xmlrpc_encode($post), php_xmlrpc_encode(“1”) ); $message = new xmlrpcmsg(“metaWeblog.newPost”,$paramaters); //what do we want our response to be? $client->return_type = ‘phpvals’; //send the XML-RPC message to the server $response = $client->send($message);
    
    If there is an error in the response, you append that to the $log variable; otherwise you denote that the XML-RPC API call was successful: //check the response to make sure all went well if ($response->errstr != ‘’) $log .= “ XML-RPC CALL FAILED - “.$response->errstr; else $log .= “ success”;
    
    Likewise, if the API call to del.icio.us was unsuccessful to begin with, this is appended to the $log variable instead: } else { $log .= “ DEL.ICIO.US API CALL FAILED - status code was “.$api_return[‘status’]; }
    
    Finally, the remaining value for $log is output to screen: //output log to screen echo $log; ?>
    
    The echo command works just as well for command-line scripting as it does for outputting HTML markup. Although automatically posting your daily del.icio.us links as new blog posts is a desirable feature to a lot of blogging del.icio.us users the end result is a lot of duplicated data for your readers to deal with. If your readers are truly interested in your del.icio.us links and your blog, it might be more convenient for them to subscribe to your del.icio.us RSS feed and your weblog and aggregate the data in their own way. Or, better yet, they can add you to their own del.icio.us network. That way, they can be apprised of your del.icio.us links any way they choose and not have to see them twice or more per day. Putting your del.icio.us links into a sidebar on your blog may be a more effective way of introducing your readers not only to your bookmarks but also to del.icio.us itself.
    
    172
    
    14_097762 ch08.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 173
    
    Chapter 8: Mashing del.icio.us and WordPress
    
    Spreading Your Ideas If your blog readers have their own del.icio.us accounts, they may want to save bookmarks to your blog posts to their bookmarks. If this is the case, then there is a little trick you can do to provide to your readers with the ability to post to del.icio.us straight from within your blog with only a simple modification to your WordPress theme.
    
    Try It Out
    
    Creating a Save to My del.icio.us Link
    
    For this project, you make an additional change to the classic-mashups theme you originally created in Chapter 5. If you haven’t deleted it, you can find it in the wp-content subdirectory of your WordPress installation. You can also find a version of classic-mashups in the Chapter 8 directory on the Wrox companion website.
    
    1.
    
    Using your editor, open the index.php file inside the theme. Look for the part of index.php that looks like the following code and add to it the code denoted in bold:
    
    ’),’delicious’, ‘toolbar=no,width=700,height=400’); return false;”>Save to del.icio.us ’),’delicious’, ‘toolbar=no,width=700,height=400’); return false;”>Save to del.icio.us
    
    5. 6.
    
    Close your PHP code block, and then save and close delicious-category-links.php. Browse to your WordPress administration back-end and click the Plugins tab. You should see your new WordPress plug-in in the list of available plug-ins, as shown in Figure 8-3.
    
    Figure 8-3
    
    177
    
    14_097762 ch08.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 178
    
    Part III: Mashups and Remixes 7. 8.
    
    Click the Activate link to the right of your plug-in description to enable the plug-in. If you have not done so yet, create a new WordPress post with some categories attached. You can assign multiple categories to each post on your WordPress blog, just like you can assign multiple tags to each bookmark you save to del.icio.us. To do this, click the Write tab in the WordPress admin interface and create a new post. Add a few new categories using the Categories interface in the left column of the posting interface, and then apply them to your post by making sure the box to the left of each category name is checked. Figure 8-4 shows what the categories interface looks like.
    
    You might have to expand the Categories area first by pressing the + (plus) button next to the word Categories. Be sure and add some categories that you know you have del.icio.us tags for, although perhaps it’s only natural your interests on del.icio.us and what you’ll write about in your blog will be the same.
    
    Figure 8-4
    
    9.
    
    178
    
    When you’ve got some categories created and assigned, publish the post by clicking Publish and then browse to your WordPress blog. You should now see a new “More at my del.icio.us:” footer, followed by links to your del.icio.us tag pages for each post’s corresponding categories, as shown in Figure 8-5.
    
    14_097762 ch08.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 179
    
    Chapter 8: Mashing del.icio.us and WordPress
    
    Figure 8-5
    
    With this feature, your readers can use your del.icio.us bookmarks to learn more about whatever it is you’re writing about. It’s almost like an automatic list of reference materials.
    
    How It Works WordPress plug-ins expand the WordPress functionality and the appearance of your blog beyond just editing your template. For this project, you wrote a simple plug-in that automatically added additional content to your posts. The plug-in took the categories assigned to the post and added to the post a list of links to del.icio.us tag pages for each of these categories. To better understand what went on, take a look at the delicious-category-links.php plug-in source file. First, the plug-in’s metadata is defined: /* Plugin Name: Del.icio.us Category Links Plugin URI: http://wordpress.org/# Description: Takes your post categories and creates a list of links to matching tag pages at del.icio.us. Author: Your Name Version: 1.0 Author URI: http://www.yourwebsite.com/ */
    
    This is the information that is displayed when you browse to the Plugins area in the WordPress Admin area. It describes who made the plug-in and what it does. This information is a required part of every WordPress plug-in. Because your del.icio.us username is a part of the URLs to the del.icio.us tag pages for which you want to create links, you initialized $delicious_username as follows: //your del.icio.us username $delicious_username = ‘yourname’;
    
    Note that this time, you didn’t make it a PHP constant. With WordPress plug-ins, avoiding the use of PHP constants is a good idea because you don’t want them to conflict with any constants defined by WordPress. Even if it’s unlikely that WordPress has a constant called DELICIOUS_USERNAME or something similar, it’s better not to take the risk and instead define a regular variable. This way, the variable and its scope are limited to only your plug-in.
    
    179
    
    14_097762 ch08.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 180
    
    Part III: Mashups and Remixes Next, you added a function called add_links() which accepts as an argument the content of each blog post: //append to the post text the links to del.icio.us function add_links($post_text) { ... the rest of add_links() ... }
    
    At the bottom of the script, you added a WordPress action hook with WordPress’s add_action() function: //action hook to handle post content add_action(‘the_content’, ‘add_links’);
    
    When WordPress implements a plug-in, it looks for add_action() and then hooks in and executes the function inside the plug-in that it points to by using tag, or the thing that should trigger the function. This “thing” is the first argument you gave to add_action(), which in your case was the the_content tag that sends the content of a post. When the_content is generated, it triggers the hook. The second argument, add_links(), is the function you added earlier. Therefore, the_content will be sent to add_links(). It’s important to note that almost every WordPress plug-in function must return the argument it was sent (although its content can be changed). In this case, add_links()will return a modified version of the post’s content. Taking a look at add_links(), you can see that it’s pretty straightforward: global $delicious_username; //setup the delicious_links variable $delicious_links = “

    More at my del.icio.us: “; //append links for each category foreach(get_the_category() as $cat) { $delicious_links .= “cat_name\”> $cat->cat_name “; } $delicious_links .= “

    ”; //return post text with delicious_links added return $post_text.$delicious_links;
    
    The $delicious_links variable is first initialized with some HTML markup. Then, the list of categories for the post are fetched and iterated through the WordPress get_the_category() function. For each category returned, a link to the corresponding del.icio.us tag page is appended to $delicious_links: foreach(get_the_category() as $cat) { $delicious_links .= “cat_name\”>$cat->cat_name “; }
    
    180
    
    14_097762 ch08.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 181
    
    Chapter 8: Mashing del.icio.us and WordPress The markup in $delicious_links is then finished and the original $post_text plus the contents of $delicious_links added to it is returned: $delicious_links .= “
    ”; //return post text with delicious_links added return $post_text.$delicious_links;
    
    That’s all there is to this simple WordPress plug-in. It’s arguable that the same thing that happens in this plug-in could have been done via further modifications to the classic-mashup theme. This is true. It’s up to you to decide whether a plug-in or theme change is more appropriate for what you want to do with your WordPress blog. Keep in mind that plug-ins are much more portable and capable of changing WordPress and its data in some pretty significant ways.
    
    Using the Del.icio.us Play Tagger for Your MP3 Links Just for fun, it’s time to add one more thing to your WordPress blog. In Chapter 4, you saw that when someone saves a bookmark to a photo on Flickr in del.icio.us, a small thumbnail of that photo actually appears next to the bookmark. There’s another trick like this on del.icio.us that involves links to MP3 audio files. Whenever a del.icio.us user saves a bookmark to an .mp3 file, a small box with an arrow inside of it appears alongside the bookmark, as shown in Figure 8-6. When you click the arrow, the MP3 will begin playback right in your browser. This lets you listen to music, podcasts, and the like without having to browse away from del.icio.us. This feature is called the Play Tagger, and you can read more about it at http://del.icio.us/help/playtagger.
    
    Figure 8-6
    
    What’s really cool, though, is that del.icio.us makes this technology available to anyone who wants to implement it into their own websites. For the final project in this chapter, you will write an additional WordPress plug-in that implements the del.icio.us Play Tagger. This will add even more functionality to your blog and give you another example of how WordPress plug-ins can mash with del.icio.us.
    
    181
    
    14_097762 ch08.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 182
    
    Part III: Mashups and Remixes Try It Out Writing the Play Tagger Plug-In 1. Create a new file in your WordPress installation’s plug-in directory called delicious-playtagger.php. Then, add the following code, save the file, and activate the plug-in from the WordPress backed area:
    
    2.
    
    Write a new post that links to an MP3 file. You can either use WordPress’s posting interface to create the link in your posts’ content or just manually enter HTML markup like this:
    
    Stephen Malkmus - “Us”
    
    Either way should work. WordPress is surprisingly flexible in how it allows you to write and edit blog posts. If you’re looking for an MP3 to link to, feel free to borrow one from http://del.icio.us/tag/ system:filetype:mp3, which is a special page that lists every MP3 posted at del.icio.us.
    
    3.
    
    Browse to your WordPress blog. You should see something like what was shown previously in Figure 8-6. Note how the Play Tagger button has automatically been added next to the.mp3 file link.
    
    4.
    
    Click the blue arrow provided by the Play Tagger and the MP3 should begin playing (after a few seconds of buffering). del.icio.us also provides a Tag This link that del.icio.us users can use to save the MP3 link to their own bookmarks. Figure 8-7 shows this link.
    
    182
    
    14_097762 ch08.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 183
    
    Chapter 8: Mashing del.icio.us and WordPress
    
    Figure 8-7
    
    How It Works The Play Tagger requires only that an include to some special JavaScript provided by del.icio.us appears somewhere on the page. This is what the include looks like:
    
    The plug-in you created includes the necessary JavaScript output between the tags in your blog’s markup. It does this by hooking into the wp_head tag included in the template. The add_play_ tagger_code()outputs the JavaScript: function add_play_tagger_code() { echo ‘’; } add_action(‘wp_head’, ‘add_play_tagger_code’);
    
    Unlike your previous plug-in, this only affects one part of the template, and not the entire post. In addition, wp_head does not send any arguments, nor does it expect any arguments to be returned. Simply output what you want to output when the Action Hook is triggered and the job is done. The Play Tagger works by searching the page for MP3 links and adding next to them little, tiny Macromedia Flash audio player that has the capability to stream the track directly to your readers.
    
    Summar y This chapter introduced just a few of the dozens of ways that you can incorporate del.icio.us into your blog, as well as have portions of it powered by del.icio.us. Even without the use of the del.icio.us API or any complex programming, you were able to make del.icio.us and WordPress work together in many different ways. This is partially thanks to the awareness that del.icio.us has about its usefulness in weblogs, but also thanks to the ability to hack WordPress using its extremely customizable templates and plug-in architecture. These techniques can help you spread your ideas, connect and collect your references, and even spice up the overall presentation of your blog.
    
    183
    
    14_097762 ch08.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 184
    
    Part III: Mashups and Remixes It’s worth noting that many of these projects as well as some much more impressive ones are all available as WordPress plug-ins. They’re developed and supported by fellow del.icio.us fans from around the world, and you can find many of them at http://codex.wordpress.org/Plugins/Delicious. If you want to read more about theme development, you can find it at http://codex.wordpress .org/Theme_Development. And information about plug-in development is at http://codex .wordpress.org/Writing_a_Plugin. This chapter just barely touched the surface of what you can do with WordPress and del.icio.us. Hopefully, it has given you an idea of how you can go about making your own themes and plug-ins that will enable you to take the projects presented here and your own ideas to a higher level.
    
    Exercises See if you can expand on some of the projects presented in this chapter by completing the following exercises.
    
    184
    
    1.
    
    In the automatically posted links provided by the autoposter.php script you wrote, it might be helpful to provide tags used with each bookmark. As an extra challenge, try to modify the code to make each tag into a link pointing to the appropriate del.icio.us tag page in your del.icio.us bookmarks.
    
    2.
    
    Instead of just including links to the del.icio.us tag pages matching your post categories, it’s possible to also fetch and display a selection of actual bookmarks from your own del.icio.us related to your blog posts. Describe how you might go about expanding on the del.icio.us Category Links Plugin.
    
    3.
    
    The del.icio.us Play Tagger code could have easily been integrated into the classic-mashup theme instead of installed as a WordPress plug-in. What would be a disadvantage of using a theme to do this? Would there be any advantages?
    
    15_097762 ch09.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 185
    
    9 Remixing del.icio.us with Greasemonkey In this chapter, you’re going to get hands-on experience with the Firefox Greasemonkey extension. Greasemonkey provides user scripts that enable you to override or change the formatting and functionality of any web page. In this chapter, you will create several user scripts to demonstrate the potential mashability of Greasemonkey. More often than not, you’ll want to develop your mashups as standalone web or desktop applications. Still, it’s definitely worth taking a closer look at this other avenue of del.icio.us hacking and tweaking. You may be amazed at the potential Greasemonkey has. In addition to learning what Greasemonkey is all about and how to develop for it, you will complete three projects that combine del.icio.us with Greasemonkey. In the first, you will re-skin del.icio.us, changing its overall appearance by modifying the del.icio.us style sheets and page style declarations. In the second project, you’ll further into modifying del.icio.us by actually improving the functionality of the del.icio.us posting interface. These two projects are arguably more remixes than mashups, because they change del.icio.us itself as opposed to mashing it with something else, but they will definitely show you some of the essential features of Greasemonkey. In addition, you will do a real mashup project for the third exercise in this book, wherein you will use Greasemonkey to show your five latest links on any page on the web. For all of these projects, you will need to use the Firefox web browser and, of course, have the Greasemonkey extension installed. If you haven’t installed Greasemonkey yet, go back to the Greasemonkey introduction in Chapter 6 and get things set up properly before you continue.
    
    Greasemonkey Explained Greasemonkey has special user scripts that are executed when a page loads. A user script can be for any web pages, or for one specific page. A Greasemonkey script contains JavaScript to be run immediately after the DOM-structure of a web document is loaded by Firefox (but before the
    
    15_097762 ch09.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 186
    
    Part III: Mashups and Remixes document is displayed in the browser). If you look at it in order, a web page’s base structure loads, a Greasemonkey script runs and does its thing, and then the web page is displayed. It’s actually possible to schedule Greasemonkey scripts or portions of other scripts to run at other points in this sequence, but this is the timeline of execution by default. The JavaScript that appears in a Greasemonkey user script can perform any number of tasks, including changing the DOM of a document, fetching and displaying data from outside sources, opening up a new pop-up window, redirecting the user elsewhere, and so forth. Greasemonkey also has the ability to store and retrieve its own data and add menu commands to Firefox itself. Every user script is a text file and must end in .user.js. If a user has Greasemonkey installed and browses to a Greasemonkey user script, they are given the option to install the script immediately. You can also manually install scripts by opening them from your hard drive or another location in Firefox. After the script is installed, it is copied to a directory inside Firefox’s preference files. From there, the user can edit the script.. When you save the script using this method, the changes take effect immediately. This makes the development of Greasemonkey scripts much easier. Every user script must contain some initial metadata that describes what the script does, where it resides on the web, and so forth. Past that point, though, JavaScript can do its thing. In addition to having every Firefox-compatible JavaScript and DOM method at your disposal, Greasemonkey also has its own API with a few additional and useful functions. You can read more about them and Greasemonkey development overall at http://greasemonkey.mozdev.org/ authoring.html. It’s worth mentioning that the Gecko engine — the web parsing engine that is in Firefox (and its derivatives) — is one of the more advanced implementations of DOM of any web browser. For a complete reference of all Gecko DOM methods, check out www.mozilla.org/docs/dom/domref/dom_ shortTOC.html.
    
    Skinning del.icio.us For the first project in this chapter, you will write a Greasemonkey script to alter the del.icio.us style sheet. You could use the style sheets or other methods of restyling pages that web browsers provide, but putting a new style or skin for del.icio.us in a Greasemonkey script makes del.icio.us page design extremely portable and extendable well beyond a few font and color changes. The term skin, when applied to computer software, is usually defined as an appearance mode that changes the look and feel of the software without changing its functionality. CSS can be interpreted as a kind of website skin, so when you want to skin a website, you change its CSS markup. Of course, you probably don’t have the capability to go into del.icio.us and change its style sheet to whatever you want. It would be nice if you could customize the style sheet and therefore re-skin del.icio.us for your own purposes. After all, the appearance of del.icio.us is pretty minimalist, and although it is quite nice, it could maybe use a little spicing up. Greasemonkey makes this easy as well as portable. If you don’t like the new skin, you can just disable the script and del.icio.us goes back to looking exactly as it did before. For this project, you will make a new skin for del.icio.us with Greasemonkey.
    
    186
    
    15_097762 ch09.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 187
    
    Chapter 9: Remixing del.icio.us with Greasemonkey Try It Out
    
    Changing CSS With Greasemonkey
    
    Adding and modifying CSS is often a trial-and-error process. You make a change, and then reload to see if it came out the way you wanted, and if not, you go back again, reload again, and so on. It’s the same with Greasemonkey. Creating, saving, and then reinstalling a Greasemonkey script to test it is pretty laborious. Fortunately, Greasemonkey lets you edit scripts and have the changes take effect immediately in Firefox. In this project, you first learn about how this happens, and then make changes to the CSS to see it in action.
    
    1.
    
    // // // // // //
    
    2.
    
    Go to the Tools menu in Firefox and select New User Script. This menu option should have been put there by the installation of the Greasemonkey extension. If you’ve never edited scripts this way before, Firefox will ask that you select your editor. Browse to and select your code editor from the prompt. When you do, your editor will open with a new document, complete with some default Greasemonkey user script metadata, like this: ==UserScript== @name @namespace @description @include ==/UserScript==
    
    User script template http://mywebsite.com/myscripts A template for creating new user scripts from *
    
    Set the metadata to match the following:
    
    Feel free to change the @namespace value to your own website if you have one. Technically, it should point to the original location on the web from which this script can be downloaded. // // // // // //
    
    ==UserScript== @name @namespace @description @include ==/UserScript==
    
    del.icio.us Mashups Skin http://www.yourwebsite.com/ A new look for del.icio.us thanks to Greasemonkey. http://del.icio.us/*
    
    Note that the @include directive specifies that this new script should run only on del.icio.us.
    
    3.
    
    Save the script somewhere convenient, such as your htdocs directory or your desktop, using your editor’s Save As function. Name it deliciousmashupskin.user.js.
    
    If you just click Save, the script will be saved to the Firefox temp directory, which may be difficult to find.
    
    4.
    
    You need to install the script you just saved. Begin by doing one of the following: ❑
    
    In Firefox, go to File➪Open File.
    
    ❑
    
    Drag and drop the script onto the Firefox icon in your dock or task bar.
    
    ❑
    
    Browse to the script in Firefox if you saved it to your htdocs directory.
    
    You will see the script’s contents displayed in Firefox and the button prompt to install the script. Install the user script.
    
    187
    
    15_097762 ch09.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 188
    
    Part III: Mashups and Remixes 5.
    
    You are going to edit the script from Greasemonkey’s Manage User Scripts interface. Select Tools➪Manage User Scripts to see a list of all Greasemonkey scripts installed on your system and the settings for each, as shown in Figure 9-1.
    
    Figure 9-1
    
    6.
    
    Select the del.icio.us Mashups Skin script and then click the Edit button located near the bottom of the dialog box. Your editor should launch with the script just as you saved it. Any changes you make to this version of the script now will be saved directly to the installed version of the script. You simply reload the page the script is affecting and the Greasemonkey user script will do its thing.
    
    7.
    
    To test the way script changes are saved, try out the Greasemonkey GM_log() function. GM_log()outputs text and messages to the Firefox JavaScript Console screen, which can be useful for debugging your Greasemonkey scripts. Add the following line to your script (below the metadata):
    
    GM_log(“Testing! Testing! 123!”);
    
    Browse to del.icio.us (or reload if you are already there). To view the JavaScript Console, select JavaScript Console from the Tools menu in Firefox. You can filter the console’s content to just Messages, which is where GM_log() outputs by default, by clicking Messages. There, you should see your message listed, including the test message you just tried, similar to what is shown in Figure 9-2.
    
    188
    
    15_097762 ch09.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 189
    
    Chapter 9: Remixing del.icio.us with Greasemonkey
    
    Figure 9-2
    
    8.
    
    Now you’ll change the del.icio.us CSS. Return to your script and take out the call to GM_log(). Then place the following code in your script:
    
    GM_addStyle( “body { font-family: serif; font-size: 18px; background-color: #FFC; } \ a:link { text-decoration: none; color: #f90; text-decoration: underline } \ a:visited { text-decoration: underline; color: #F30; } \ a:hover { text-decoration: underline; color: #009 }\ a:active { text-decoration: underline; } \ #header { margin-left: 1em; margin-right: 1em; background-color: #9F9; }” );
    
    9.
    
    Browse to the del.icio.us main page. It should look something like Figure 9-3.
    
    OK, so it’s not that pretty, but it is undeniably different. With only a few lines of code, you have completely altered the overall appearance of del.icio.us. If your eyes already feel like they’re coming out of their sockets thanks to this new color scheme, you can disable the script by either clicking the small monkey face that appears in the lower-right corner of Firefox, which will completely disable Greasemonkey, or uninstall the script from the Manage User Scripts interface.
    
    How It Works GM_addStyle() is a special API limited to Greasemonkey that lets you immediately alter any CSS
    
    appearing in the DOM of a loaded web document. Simply put some differing CSS in there, and the changes are applied.
    
    189
    
    15_097762 ch09.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 190
    
    Part III: Mashups and Remixes
    
    Figure 9-3
    
    With this particular project, you inserted markup to override some of the key styles at del.icio.us, including anchor styles and the overall background color, and made changes to the header that appears on each page. Note that each line of the CSS that was added was terminated by a \ symbol. This tells Greasemonkey to insert a line break. Of course, the entire call to GM_addStyle() could have been written without line breaks, but they help to improve the readability of the code. The idea of skinning of course can go beyond just changing CSS markup on a page, especially when Greasemonkey is involved. In the following section, you’ll use Greasemonkey to make user interface changes.
    
    Customizing the del.icio.us User Interface Have you ever used a web service that just doesn’t work the way you think it should? Perhaps it’s something very minor, like the way the login form on your bank’s website works, or the way the news website you frequent seems to unnecessarily launch its media player in a new window. As a web developer, issues like this may seem particularly annoying because you, of course, would make it better if you could.
    
    190
    
    15_097762 ch09.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 191
    
    Chapter 9: Remixing del.icio.us with Greasemonkey Greasemonkey code enables you to make a website work the way you want it to. Of course, this is all providing that a manipulation of the DOM structure of the website will suffice in achieving this goal. The effects a Greasemonkey script can have on a website can be surprising. One of the most important user interface areas at del.icio.us is the posting interface. For this project, you will make a Greasemonkey user script that brings in a subtle but possibly useful user interface change. As long as this user script is installed and active, the del.icio.us posting interface will behave in an entirely new way.
    
    Try It Out
    
    Changing the del.icio.us Posting Interface
    
    You can save private bookmarks to del.icio.us that no one can see. These are called private bookmarks. You can enable this feature in your del.icio.us settings, but you also have to check a form box in the posting interface every time you want to save a bookmark privately. However, you can use Greasemonkey to save bookmarks privately by default without having to check that box every time, and only post them publicly when you want. And you can make it happen with only one line of code.
    
    1.
    
    Access your del.icio.us settings at http://del.icio.us/settings/yourname/. Under the Bookmarks list of settings near the top, click Private Saving. On the next screen, check the box to allow private saving of favorites, and then click Change Setting.
    
    2.
    
    Use the posting bookmarklet or the del.icio.us Firefox extension to post a link. In the posting form, you will see a new Do Not Share check box to the right of the URL, as shown in Figure 9-4. When this box is checked and a bookmark is saved, that bookmark will not be seen by the public.
    
    Figure 9-4
    
    3.
    
    Start a new Greasemonkey user script. You can either start it through Tools➪New User Script or from scratch in your editor. Give it the following content, change the mention to www .yourwebsite.com to your own website, save it, and install it whichever way you prefer:
    
    You can also find this script in the code downloaded from the Wrox companion website. It’s called privatesaving.user.js. // // // //
    
    ==UserScript== @name @namespace @description
    
    do not share http://www.yourwebsite.com Enables “do not share” on the del.icio.us posting interface by
    
    191
    
    15_097762 ch09.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 192
    
    Part III: Mashups and Remixes // default. // @include http://del.icio.us/* // ==/UserScript== if (document.getElementById(‘private’)) { document.getElementById(‘private’).checked = true }
    
    4.
    
    Save a new bookmark to del.icio.us, and notice that the Do not Share” check box is now enabled by default, as shown in Figure 9-5. Thanks to the new user script you created in this project, every time you save a new bookmark to del.icio.us, it will default to being a private bookmark unless you uncheck that box.
    
    Figure 9-5
    
    How It Works There wasn’t a whole lot of code to this user script, but it was arguably a pretty significant change to how the del.icio.us posting user interface works. The trick to what you just did was in manipulating the DOM of the del.icio.us posting interface to change the default setting for a form element. With this in effect, the posting interface now works in a whole new way. Take a look at the HTML markup for the del.icio.us posting interface by going to View➪View Source and, the find this line: do not share
    
    This is the line of markup that creates the Do Not Share check box. Conveniently enough, it has a unique id attribute. So, by writing something in JavaScript that fetches this element by id, and then manipulates it by setting its checked attribute, the check box will default to a checked state. The JavaScript in the Greasemonkey user script you created simply checks to see if the private checkbox exists, and if so, sets its state to checked: if (document.getElementById(‘private’)) { document.getElementById(‘private’).checked = true }
    
    It’s as simple as that. Every time the del.icio.us posting interface is loaded, the Do Not Share check box will be enabled.
    
    192
    
    15_097762 ch09.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 193
    
    Chapter 9: Remixing del.icio.us with Greasemonkey
    
    Fetching Remote Data Greasemonkey does another task that, for the purposes of mashup development, is definitely worth noting. Greasemonkey is able to bring in data from remote sources (or send data to remote sources) with its GM_xmlhttpRequest() API method. GM_xmlhttpRequest() enables you to make an XMLHttpRequest to other websites and fetch the data returned. XMLHttpRequest is a method by which JavaScript and other programming languages can fetch and parse remote XML data. XMLHttpRequest is, in fact, the secret behind much of AJAX, which uses XMLHttpRequest to send and retrieve data from local and remote hypermedia documents, such as PHP scripts. As you may have guessed, if Greasemonkey has the ability to fetch data from a remote source with GM_xmlhttpRequest(), then Greasemonkey will be perfect for combining data from one website and integrating it with another. This can be a powerful tool. For example, you could write a user script that displays a website’s RSS feed directly in the browser, or a user script that fetches and displays prices for books from alternative book sellers on a book store website, and so forth. There are definitely some challenges involved in doing this, including devising a way for Greasemonkey to reinterpret the fetched data for your own purposes. With del.icio.us, there’s a tool that makes this very easy — the JSON feed. Because data fetched from del.icio.us via JSON are already JavaScript variables, you can easily evaluate and then interpret the data as you see fit. For the final small project in this chapter, you will write a Greasemonkey script that retrieves your latest bookmarks via a JSON feed at del.icio.us and then displays the bookmarks on another website.
    
    Try It Out
    
    Creating the Latest Links Footer
    
    Create the following script. (Remember, you can begin by either going to Tools➪ New User Script in Firefox, or create it from scratch in your editor.) Change www.yourwebsite.com to your own website. Also, be sure and change the value for the delicious_username variable near the start of the script to your own del.icio.us username, or the username of someone on del.icio.us whose links you enjoy. Then, save the script to your htdocs directory, naming it whatever you like (you can find this script as latestlinksfooter.user.js on this book’s website), and browse to and install it in Firefox. Here’s the code: // // // // // // //
    
    ==UserScript== @name del.icio.us Latest Links Footer @namespace http://www.yourwebsite.com @description Puts the five latest del.icio.us links for the specified user at the bottom of every page. @include * ==/UserScript===
    
    var delicious_username = ‘username’; GM_xmlhttpRequest({ method:”GET”, url:”http://del.icio.us/feeds/json/” + delicious_username + “?count=5&raw”, headers:{ “User-Agent”:”greasemonkey” }, onload:function(details) { var json_data = eval(‘(‘+details.responseText+’)’);
    
    193
    
    15_097762 ch09.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 194
    
    Part III: Mashups and Remixes var div = document.createElement(‘div’); div.appendChild(document.createTextNode(delicious_username + “‘s Latest Links”)); for (var i=0, json_data; post = json_data[i]; i++) { div.appendChild(document.createTextNode(“ - “)); var a = document.createElement(‘a’); a.setAttribute(‘href’, post.u); a.appendChild(document.createTextNode(post.d)); div.appendChild(a); } document.body.appendChild(div); } });
    
    When you’ve got the script going, simply browse to any webpage and you should see delicious_ username’s five latest links displayed at the bottom of the page. For example, Figure 9-6 shows what the Google home page would look with this script running. Note negatendo’s Latest Links in the list of links. The usefulness of this script is debatable, unless perhaps you need to be constantly appraised of someone’s del.icio.us links as you browse the web. Nonetheless, it does demonstrate Greasemonkey’s ability to fetch and then combine remote data from del.icio.us with other websites.
    
    Figure 9-6
    
    194
    
    15_097762 ch09.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 195
    
    Chapter 9: Remixing del.icio.us with Greasemonkey How It Works After setting the required Greasemonkey metadata and the delicious_username variable, the rest of the script consists entirely of a call to GM_xmlhttpRequest(). GM_xmlhttpRequest() accepts only one argument, referred to as the request details. The request details can contain up to seven different fields. For this example, you only included four of the seven possible fields. This included, starting from the top, the HTTP method for your request: GM_xmlhttpRequest({ method:”GET”,
    
    Next is the request URL, which in this case was the JSON feed URL including the value for delicious_ username where the del.icio.us username part of the URL would be as follows: url:”http://del.icio.us/feeds/json/” + delicious_username + “?count=5&raw”,
    
    Note that a limit of five links is requested, and the data is asked for in raw JSON form. This just means the data will be returned as a raw JSON data and not an already instantiated object called Delicious,
    
    which will make evaluating the data easier for you to do. Remember, GM_xmlhttpRequest() does not fetch JavaScript variables or interpret JSON data, it just retrieves whatever it is asked to retrieve. Other HTTP headers are in the details argument. In this case, you only declared your User-Agent value, but you could, for example, include WWW-Authenticate information here if you’re making calls to the del.icio.us API: headers:{ “User-Agent”:”greasemonkey” },
    
    And finally, the onload callback function, which will be called once the data from the request has been loaded: onload:function(details) { ... what onload should do... } });
    
    Greasemonkey isn’t only able to fetch data in this way; it can send data to a remote server as well. It’s also possible to make your scripts much more robust and flexible by adding callback functions that happen before or during a request. Check out the Greasemonkey website to look into these additional details. When the JSON feed is loaded from del.icio.us into Greasemonkey, the onload callback is executed. The data returned is placed into details.responseText. So, the first thing you did was evaluate the responseText as a JavaScript object, json_data: var json_data = eval(‘(‘+details.responseText+’)’);
    
    195
    
    15_097762 ch09.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 196
    
    Part III: Mashups and Remixes Then you created a new div element, and appended to it some text describing its contents as delicious_username’s Latest Links: var div = document.createElement(‘div’); div.appendChild(document.createTextNode(delicious_username + “‘s Latest Links”));
    
    Next, each object in json_data is added as a child to div, link and all, with a - separator: for (var i=0, json_data; post = json_data[i]; i++) { div.appendChild(document.createTextNode(“ - “)); var a = document.createElement(‘a’); a.setAttribute(‘href’, post.u); a.appendChild(document.createTextNode(post.d)); div.appendChild(a); }
    
    Finally, div is appended to the document.body, which in most cases will be the end of the HTML document (but not always): document.body.appendChild(div);
    
    Summar y The Greasemonkey user script projects presented in this chapter were pretty simple, but they demonstrated the potential Greasemonkey has for completely changing the way a website like del.icio.us looks, functions, and can integrate with other websites. As you might imagine, the potential for something like Greasemonkey is immense. Developers have made some pretty impressive things with Greasemonkey. The userscripts.org website is a collaborative collection of thousands of useful Greasemonkey scripts for a wide variety of websites, including del.icio.us. If you want to take a look at del.icio.usrelated User Scripts others have made, check out http://userscripts.org/tag/delicious. Greasemonkey is not without its issues. Most notably, because the way it works is dependent on how a website is coded at the time you develop your Greasemonkey script. If the owner of a website makes changes to a website’s CSS or DOM structure, chances are your Greasemonkey script will break. If you plan on rolling out a Greasemonkey user script as a mashup or part of your mashups, you’ll want to keep it as up-to-date as possible and account the best you can for these changes. Of course, another problem with Greasemonkey is that you can only use it with Firefox. However, there are Greasemonkey equivalents that have been developed for other browsers. For example, Trixie is an enhancement for Microsoft Internet Explorer 6 that works the same way Greasemonkey does. It can even use and interpret most Greasemonkey user scripts. You can find Trixie at www.bhelpuri.net/Trixie/. As you go on to create your own mashups, consider what Greasemonkey offers. Although it’s something extra your users will have to install to get things working, it will allow you to remix and mashup del.icio.us in ways that go well beyond a typical desktop or web application. In essence, Firefox itself is the platform for your mashup, and any page on the web is data you can use, or a place you can present your ideas.
    
    196
    
    15_097762 ch09.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 197
    
    Chapter 9: Remixing del.icio.us with Greasemonkey
    
    Exercises If you want to experiment with Greasemonkey some more, give these exercises a try.
    
    1.
    
    In the first project in this chapter, you used GM_addStyle() to add to the CSS markup at del.icio.us. Of course, there are lots of ways to change the style sheet for a particular website, and you don’t necessarily need Greasemonkey to do it. For example, many browsers support user-specified style sheets. Try to make the del.icio.us Mashups Skin user script unique by not only having it change the page styling but also making the search box on the del.icio.us front page bigger.
    
    2.
    
    You probably recall that tagging something with the special for: tag will send a bookmark to a del.icio.us user by copying the bookmark to their own inbox. For example, tagging something with for:negatendo will place that bookmark in my own del.icio.us inbox. Write a Greasemonkey user script that automatically tags all bookmarks you save with for:username, where username is a user you want to send interesting links to, essentially CC-ing them on each bookmark you save, like with e-mail.
    
    3.
    
    What would a call from Greasemonkey to the del.icio.us API look like? (Don’t worry about handling the data returned. If you like, just wrap it in an alert() function to test whether the response comes back.) Just try to come up with the basic code that fits the standards for interacting with the del.icio.us API. (You may have to do a little web searching on exactly how WWW-Authenticate headers must appear to get this working.)
    
    197
    
    15_097762 ch09.qxp
    
    12/7/06
    
    9:25 PM
    
    Page 198
    
    16_097762 ch10.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 199
    
    10 Remixing RSS Feeds The del.icio.us RSS feeds are the mashup maker’s golden ticket to the del.icio.us world and its data. The data they provide goes well beyond just a handful of random links — they’re literally a direct-connection to the hive mind of del.icio.us users. With the del.icio.us RSS feeds, you can be constantly appraised about what’s hot, what’s new, and what’s good according to a collective of thousands of Internet users from around the world. Because RSS is such a portable form of data, you can mix it up any way you like, capturing, organizing and presenting this data in entirely new ways. The end result is not only a new perspective on what’s going on at del.icio.us but also, hopefully, a way to personally discover something new and interesting. The “an RSS feed for every page” policy at del.icio.us is truly a dream come true for mashup designers. This chapter contains some projects that are almost guaranteed, through the process of you developing them, to introduce you to something new and interesting, whether it’s an unfamiliar but excellent blog, a funny cartoon, or a new song you’ve never heard before — and all this through the aggregation and representation of the always-changing RSS feeds from del.icio.us. Ultimately, these simple projects capture one of the most powerful aspects of del.icio.us: when bookmarks from thousands of people are combined and organized, something cool is bound to show up. The first project in this book will take an RSS feed and mix it into another RSS feed. The new RSS feed will contain only the fresh links for a tag — that is, only links that are new to you will appear in the feed, and those that you’ve seen before will be filtered out. Think of it as a del.icio.us tag feed tailored and filtered specifically to you. The next project will remix the images posted to del.icio.us into an online slideshow application. From there, you can quickly and easily watch a live feed of the last images posted to del.icio.us by the rest of the world. The final project in this chapter will take the MP3 audio files posted to del.icio.us and bring them automatically into your favorite media player.
    
    Cleaning Up Tag Feeds If up to now you’ve been subscribed to a del.icio.us tag feed in your feed reader for awhile, you’ve probably begun to get annoyed with how many times the same links keep cropping up in the feed.
    
    16_097762 ch10.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 200
    
    Part III: Mashups and Remixes This is the correct behavior on the del.icio.us side. For example, if you’re subscribed to http:// del.icio.us/rss/tag/gaming, everything tagged with gaming should appear in that feed in the order it was posted. If a user posts the same link that another user posted 10 minutes ago, then so be it — they both appear. This is especially common with whatever the hot item of the day is, whether it’s a new and interesting article or news story, or a hot new website. If it’s hot, you can bet it will be posted to del.icio.us by many different people, and if they use the same tags, it’s going to appear in that tag feed a lot. It would be nice to tailor the del.icio.us tag feeds to only show items that you haven’t yet seen in the feed. This project does exactly that. You develop a new, remixed RSS feed generated by PHP and backed by MySQL that will only present the freshest tag links that haven’t yet appeared in the feed. The actual PHP script you write will serve as the RSS XML file, and depending on what query string it is provided, it will generate filtered feeds for any tag you can imagine.
    
    You will be developing this project in your local development environment, so a web-based feed reader like Bloglines will be unable to access the generated RSS feeds. To see the full potential of this project, you will need to take it online or use it with desktop feed readers capable of accessing your local web server.
    
    Try It Out
    
    Using the freshtags Feed
    
    For this project, your arsenal will consist of PHP, the Magpie RSS PHP library, and a MySQL database.
    
    1.
    
    Create a new folder in your htdocs directory called freshtags, and give it a lib subfolder. Then, copy into lib everything you need to use the Magpie RSS library. This includes the rss_cache.inc, rss_fetch.inc, rss_parse.inc, and rss_utils.inc files as well as the extlib subdirectory.
    
    2.
    
    Create an additional subdirectory inside the freshtags directory called cache. This is where you will direct Magpie to store its cached RSS feeds. You can actually put it anywhere you like — just make sure when you include Magpie in your code later that you give it the location of the cache directory. Additionally, be sure and make the cache directory writable by your web server if that’s something you need to do for your platform, or Magpie’s caching won’t work properly.
    
    3.
    
    Create a MySQL database for this project. Enter the following SQL commands by putting them all in a text file and uploading the file through phpMyAdmin, entering them directly in the SQL command box in phpMyAdmin, or inputting them any other way you see fit for interacting with your local MySQL database:
    
    You can also find these commands in the downloadable code for this chapter on the Wrox website. It’s in the freshtags.sql file in the freshtags project folder. create database freshtags; grant all on freshtags.* to ‘delicious_sql’@’localhost’; use freshtags; create table bookmarks (
    
    200
    
    16_097762 ch10.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 201
    
    Chapter 10: Remixing RSS Feeds id int(255) not null auto_increment, tag varchar(255) not null, link varchar(255) not null, title varchar(255) not null, description varchar(255) not null, dc_date varchar(255) not null, primary key (id), index bookmarks_tag (tag), index bookmarks_link (link) );
    
    If you don’t remember how to use SQL commands in phpMyAdmin, look back at the MySQL section in Chapter 6 for a refresher.
    
    4.
    
    You are going to reuse the delicious_sql user created back in Chapter 7. Hopefully, this user still exists on your development machine (if you haven’t done anything to remove the user, it will). If it doesn’t, go look back at the delicious_summary project in Chapter 7 or use the commands to create the user found in Chapter 7’s delicious_summary2.sql file (which you can download from the Wrox website).
    
    5.
    
    You’ll only need to create one PHP source file for this project. For the last file you’ll need, create a file called index.php in the freshtags directory and open it in your editor. At this point, the freshtags directory should contain the following:
    
    6.
    
    ❑
    
    cache
    
    ❑
    
    index.php
    
    ❑
    
    lib
    
    ❑
    
    extlib (containing Snoopy.inc.php — Magpie’s implementation of Snoopy)
    
    ❑
    
    rss_cache.inc
    
    ❑
    
    rss_fetch.inc
    
    ❑
    
    rss_parse.inc
    
    ❑
    
    rss_utils.inc
    
    Begin index.php with a PHP code block and the following code, which will set up MySQL and Magpie appropriately:
    
    MAGPIE_CACHE_DIR should be set to wherever you decided cache should be. The code will look for cache in the freshtags directory. Also if the MYSQL_PASSWORD for the delicious_sql user is different than password, you should change it to the appropriate password. \n”); //standard RSS 2.0 bits including dc ?> del.icio.us/tag/ - filtered http://del.icio.us/tag/
    
    203
    
    16_097762 ch10.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 204
    
    Part III: Mashups and Remixes Filtered tag feed for the del.icio.us tag. @http://del.icio.us/tag/
    
    13.
    
    Test the script with your browser first (you’ll probably want to use Firefox because it will display XML outright in the browser window). First browse to the script without any additional query string specified. You can browse to either http://localhost/freshtags/ or http:// localhost/freshtags/index.php because index.php is (hopefully) set as an index document with Apache. You will see a message that says, “No tag defined.”
    
    14.
    
    Specify a tag by browsing to http://localhost/freshtags/?tag=tagname (where tagname is gaming or crafts or whatever suits your interests). You should see a valid RSS document listing 30 or so items for the tag you specified (like what’s shown in Figure 10-1). These items are generated from your local MySQL database. This is not Firefox’s view of del.icio.us feed but rather a reparsing of it.
    
    Figure 10-1
    
    15.
    
    When you browse to your freshtags script for the first time, a new entry for each link from the original del.icio.us tag feed is inserted into the bookmarks table. Confirm this by browsing the bookmarks table’s contents in phpMyAdmin. You should see something similar to Figure 10-2.
    
    205
    
    16_097762 ch10.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 206
    
    Part III: Mashups and Remixes
    
    Figure 10-2
    
    16.
    
    Confirm that the cache directory you specified for Magpie to use has a cache file in it to make sure that caching is functioning properly.
    
    Each time you load the freshtags script after this (and after the Magpie cache of the del.icio.us RSS feed expires — a default of one hour), the RSS feed will be reparsed and any new links that don’t already exist in the database for the tag specified will be inserted. Then, a new RSS feed will be generated by the script featuring the new, as of yet unseen links at the top. This way, the script only produces the freshest links, with no repeats. If you use a web-based feed reader like Google Reader, you cannot try out the feed for yourself because it only exists on your local development environment (which probably isn’t accessible via the web). Some software feed readers, however, can read XML generated by the localhost. Figure 10-3 is a screenshot of how the feed appears in NetNewsWire — a software feed reader for Mac OS X. To make the most of this project, try to get your freshtags folder published to the web as soon as possible, and then subscribe to some freshtag URLs in your feed reader. Then you’ll be able to access fresh, personalized links from del.icio.us tag feeds any time you like.
    
    206
    
    16_097762 ch10.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 207
    
    Chapter 10: Remixing RSS Feeds
    
    Figure 10-3
    
    How It Works The freshtags script gathers the applicable RSS tag feed from del.icio.us, breaking it up into items which it inserts into the freshtags database (or if they already exist in the database, ignores them) and then rolls a new RSS feed containing the latest links entered in the database, which happen to be the most recent and newest items from the original tag feed at del.icio.us. The bulk of this is handled in the portion of the code inside the control statement that checks for the existence of $_GET[‘tag’]. If $_GET[‘tag’] exists, meaning a tag has been specified in the script via a URL query string, the feed generation happens. Here’s how this works. First, the full tag feed URL at del.icio.us is assembled from the BASE_TAG_FEED_URL constant and the tag specified in the query string. Then, Magpie’s fetch_rss() function is used to download the feed and assign it to the $rss variable: //assemble complete feed url $feed_url = BASE_TAG_FEED_URL.$_GET[‘tag’]; //grab the feed $rss = fetch_rss($feed_url);
    
    207
    
    16_097762 ch10.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 208
    
    Part III: Mashups and Remixes Each item in the feed is then processed. The script checks to see if an entry matching the RSS item’s link and the specified tag already exist in the bookmarks database (using LIKE instead of = for each column value will make the search case-insensitive): //go through each feed item by link and see if they exist already //in the database. if not, add the items foreach ($rss->items as $item) { //exists already? $link_exists_check = “select count(*) from bookmarks where link LIKE ‘“.mysql_real_escape_string($item[‘link’]).”’ and tag LIKE ‘“.mysql_real_escape_string($_GET[‘tag’]).”’”; $link_exists_check_result = mysql_query($link_exists_check) or die(mysql_error()); ... the rest of the code... }
    
    The table structure of bookmarks consists of six columns as defined in your original table creation command. The first is id, a unique and automatically assigned identifier for each row in the table: create table bookmarks ( id int(255) not null auto_increment, tag contains the tag for the stored bookmark: tag varchar(255) not null, link is the bookmark URL: link varchar(255) not null, title is the original title for the bookmark (as set by whatever del.icio.us user first posted it): title varchar(255) not null, description will be whatever was entered in as the bookmarks notes by the del.icio.us user that
    
    posted it: description varchar(255) not null, dc_date is the date the bookmark was posted on del.icio.us (you’ll see why it’s called dc_date shortly): dc_date varchar(255) not null,
    
    In addition, some of the columns were indexed in order to make searching on the table much faster: primary key (id), index bookmarks_tag (tag), index bookmarks_link (link) );
    
    The MySQL query is performed to check whether the link exists in the bookmarks table queries on the RSS items tag and link variables:
    
    208
    
    16_097762 ch10.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 209
    
    Chapter 10: Remixing RSS Feeds foreach ($rss->items as $item) { //exists already? $link_exists_check = “select count(*) from bookmarks where link LIKE ‘“.mysql_real_escape_string($item[‘link’]).”’ and tag LIKE ‘“.mysql_real_escape_string($_GET[‘tag’]).”’”; $link_exists_check_result = mysql_query($link_exists_check) or die(mysql_error()); ... the rest of the code... }
    
    If the bookmark doesn’t exist for this particular item, it is inserted into the database because it is considered a new bookmark for this feed: $link_exists_check_result = mysql_query($link_exists_check) or die(mysql_error()); //if no rows were returned then add the link to the database if (!mysql_result($link_exists_check_result,0)) { $bookmark_insert_query =”insert into bookmarks ( tag, link, title, description, dc_date ) values ( ‘“.mysql_real_escape_string($_GET[‘tag’]).”’, ‘“.mysql_real_escape_string($item[‘link’]).”’, ‘“.mysql_real_escape_string($item[‘title’]).”’, ‘“.mysql_real_escape_string($item[‘description’]).”’, ‘“.mysql_real_escape_string($item[‘dc’][‘date’]).”’ );”; mysql_query($bookmark_insert_query) or die(mysql_error()); }
    
    In the shaded line in the preceding code, del.icio.us makes the date and time an item was published available via an RSS formatting idea known as Dublin Core. All you really need to know is that it’s just another way of including data in RSS feeds. Naming your database column dc_date will let you know that the data stored inside is formatted following the Dublin Core rules and was brought in from the del.icio.us RSS feed as such. As you will see, the RSS feed that freshtags generates also uses some of the Dublin Core formatting. After all new, as of yet unseen bookmarks have been stored in the database, the script selects the latest bookmarks from the bookmarks table. Each time an item is added to bookmarks, its id column’s value is the next-highest id available; therefore, ordering the selected bookmarks by id (starting with the highest) will put the newest bookmarks first: If you want more, or fewer, items to appear in the generated RSS feed, simply adjust the NUM_RSS_ ITEMS constant to fetch more or fewer rows from the bookmarks table. //select the last NUM_RSS_ITEMS added and output a new feed $bookmarks_select_query = “select * from bookmarks where tag=’”.mysql_real_escape_string($_GET[‘tag’]).”’ order by id desc limit “.NUM_RSS_ITEMS.””; $bookmarks_select_results = mysql_query($bookmarks_select_query) or die(mysql_error());
    
    209
    
    16_097762 ch10.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 210
    
    Part III: Mashups and Remixes The rest of the code creates an RSS XML file using the data retrieved and immediately serves the file to whatever is accessing the script. To do this, PHP’s header() function overwrites the default file headers sent by PHP to a web browser with whatever alternative header you define. In this case, the document’s Content-Type header is changed to that of an XML document: //setup the headers header (“Content-type: text/xml”); // Output file as XML
    
    Then, some standard XML bits required for a valid RSS feed are added. The inclusion of the xmlsns:dc attribute in the element says that dc will denote implementation of the Dublin Core XML schema, as defined at the URL provided: echo (“\n”); //standard RSS 2.0 bits including Dublin Core ?>
    
    The standard , , , and elements are then added, with PHP variables to customize the output of these elements: del.icio.us/tag/ - filtered http://del.icio.us/tag/ Filtered tag feed for the del.icio.us tag.
    
    Each row returned from your earlier MySQL query is processed and output as an RSS : @http://del.icio.us/tag/
    
    Note the element (which is shaded in the code). To be valid RSS, the element must be present and contain a string that uniquely identifies the item. This is commonly the permanent link to the RSS item in question, but it doesn’t have to be. By adding the isPermaLink=”false” attribute, you tell RSS parsers that this id is unique but isn’t the permanent link to the item. Its value is just the
    
    210
    
    16_097762 ch10.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 211
    
    Chapter 10: Remixing RSS Feeds bookmark’s id in your bookmarks table (which will always be unique) followed by the URL to the place the data originated (the tag page on del.icio.us). This is just one way of specifying a unique ID. , when not a permanent link, just has to be unique in the feed. The other thing to note is the usage of the element (also shaded in the code). This is where you’ve transported the original Dublin Core date and time from the del.icio.us feed. Feed readers typically use dates in RSS to order the presentation of items, so you should always include a date and time for the item in some fashion. Each of the database values added to the RSS XML elements are processed through the sanitize_for_ xml() function, which does two things. First, it strips away any characters that will PHP 4 can’t handle. Unfortunately, not all the characters that appear in the original del.icio.us feeds can be parsed by PHP 4 without a great struggle. So, to keep this simple, they are just removed with this script. It also converts certain characters that XML doesn’t accept in raw form in the feed to their HTML entities. //make non xml-friendly characters safe for xml function sanitize_for_xml($string) { $final = ‘’; //remove high bit characters $string_chars = array(); for ($i = 0; $i < strlen($string); $i++) { $string_chars[] = $string[$i]; } foreach ($string_chars as $char) { if (ord($char) < 128) $final .= $char; } //sanitize the non-xml friendly characters return str_replace ( array ( ‘&’, ‘“‘, “‘“, ‘’ ), array ( ‘&’ , ‘"’, ‘'’ , ‘<’ , ‘>’ ), $final ); }
    
    After each item returned from the bookmarks table query has been processed and output, the closing XML elements appear: ?>
    
    Anything that is printed by the script, either from the echo function or information that appears outside of PHP brackets, will be sent to the browser, feed reader as a part of an XML file thanks to the header() function’s changing of the document’s Content-Type.
    
    Media Tag Remix: An Image Feed Slideshow The del.icio.us filetype and media tags are automatically added when certain types of bookmarks point to image, audio, video, document, and other types of non-hypermedia files. For example, http:// del.icio.us/tag/system:filetype:pdf shows all bookmarks to PDF (Portable Document Format) files saved to del.icio.us, and http://del.icio.us/tag/system:media:image shows all images posted to del.icio.us.
    
    211
    
    16_097762 ch10.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 212
    
    Part III: Mashups and Remixes Every page on del.icio.us has an RSS feed, and these special tag pages are no exception. Therefore, you should be able to isolate and reinterpret the data from these tag feeds in special ways. In this project, you’ll take the RSS feed for the system:media:image tag and display all the images it points to as links on a web page in a slideshow format.
    
    Try It Out
    
    Using Slideshow
    
    Just like the previous freshtags project, this project will use Magpie RSS to process del.icio.us RSS feeds.
    
    1.
    
    Create a directory in your htdocs directory called slideshow and put inside it the necessary lib and cache directories with all the usual content and settings — just like in the freshtags project. No MySQL database will be necessary, however.
    
    2.
    
    In your editor, create an index.php file inside the slideshow directory, open a PHP code block, and give it the usual setup and del.icio.us-related constants:
    
    
    
    4.
    
    212
    
    Most of the rest of this script will contain HTML markup and JavaScript code (with a little PHP inserted here and there). Begin with a few bits of typical HTML and CSS markup:
    
    16_097762 ch10.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 213
    
    Chapter 10: Remixing RSS Feeds A del.icio.us Image Feed Slideshow! body { margin: 1em; font-family: Helvetica, Arial, Sans-Serif; color: #FFF; background: #000; } a { color: #FF0; }
    
    5.
    
    Staying in the element, add the following JavaScript code that initializes and controls the slideshow (note the inclusion of PHP code blocks interspersed in the early bits of the JavaScript — this is a little trick that gives JavaScript PHP variables and data):
    
    //how many seconds before switching images var num_seconds_per_image = 20; //which image are we on? (start with 0) var cur_image_num = 0; //how many total images (set by initSlideshow()) var total_images = 0; //setup array of image paths (the extra ‘’ is added on purpose) var images = [ ‘’ ]; //array of image titles var image_title = [ ‘’ ]; //the timer object var timer; //initialize the slideshow function initSlideshow() { //set total_image_num total_images = images.length - 2; document.getElementById(‘total_image_num’).innerHTML = total_images; //load first image nextImage(); } //show the next image
    
    213
    
    16_097762 ch10.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 214
    
    Part III: Mashups and Remixes function nextImage() { //set automatic execution of nextImage() window.clearTimeout(timer); timer = setTimeout(“nextImage()”,num_seconds_per_image * 1000); //set the next slide if (cur_image_num == total_images) cur_image_num = 1; else cur_image_num++; setImage(); } //show the previous image function prevImage() { //set automatic execution of nextImage() window.clearTimeout(timer); timer = setTimeout(“nextImage()”,num_seconds_per_image * 1000); //set the next slide if (cur_image_num == 1) cur_image_num = total_images; else cur_image_num--; setImage(); } //sets the image function setImage() { //set the current image number document.getElementById(‘cur_image_num’).innerHTML = cur_image_num; //set image info document.getElementById(‘image_info_holder’).innerHTML = image_title[cur_image_num]; //set the image image_holder = document.getElementById(‘image_holder’); //remove image_holder’s children if they exist (which was prev img) if (image_holder.childNodes.length == 1) { image_holder.removeChild(image_holder.childNodes[0]); } img = document.createElement(‘img’); img.setAttribute(‘src’,images[cur_image_num]); image_holder.appendChild(img); }
    
    6.
    
    Close the element and insert the rest of the needed HTML markup, including a form to help control the slideshow as well as elements defining where to place the images and their titles:
    
    Images live from del.icio.us. Want to narrow it down? Enter a tag:
    
    216
    
    16_097762 ch10.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 217
    
    Chapter 10: Remixing RSS Feeds When the Enter a Tag form is submitted, $_GET[‘tag’] is set and $feed_url is appended with the tag thanks to the + symbol. (That’s the only form submission on this page, by the way — the Next and Previous buttons only trigger JavaScript commands.) After some typical HTML markup, several JavaScript variables and functions are created. The first three variables define how many seconds should pass between each slide and hold both the current slide number and the total number of slides to be set later: //how many seconds before switching images var num_seconds_per_image = 20; //which image are we on? (start with 0) var cur_image_num = 0; //how many total images (set by initSlideshow()) var total_images = 0;
    
    Next, two JavaScript arrays are set up, one for the paths to each image (pulled from the $item[‘link’] PHP variable) and another for the title for each image (pulled from the $item[‘title’] PHP variable): //setup array of image paths (the extra ‘’ is added on purpose) var images = [ ‘’ ]; //array of image titles var image_title = [ ‘’ ];
    
    There are three things worth pointing out in this portion of the script. The first is that each string sent to echo ends with \n, which causes PHP to produce a line break and makes the JavaScript markup easier to read: var images = [ ‘’ ];
    
    Also note the additional empty array item added at the end of each PHP-filled array, which is just a lazy way of ensuring that the last item in the array added by PHP does not end in a comma (otherwise, the JavaScript may not run properly):
    
    217
    
    16_097762 ch10.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 218
    
    Part III: Mashups and Remixes var images = [ ‘’ ];
    
    Finally, note the htmlentities() element on the item title which is a built-in method that PHP has of sanitizing text for various purposes by converting certain characters to their HTML equivalents, including single and double quotes that would seriously mess things up in JavaScript:
    
    Take some time to view the HTML source generated by your code (View➪Page Source in Firefox). Find the JavaScript between the elements, and you will see the links and titles for each of the RSS feed items appear directly in the source as values for the images and image_titles JavaScript arrays. Moving on, a final variable is defined that is meant to hold the setTimeout() object that will pace the slideshow, and then several different JavaScript functions are defined, starting with initSlideshow(): //the timer object var timer; //initalize the slideshow function initSlideshow() { //set total_image_num total_images = images.length - 2; document.getElementById(‘total_image_num’).innerHTML = total_images; //load first image nextImage(); } initSlideshow() is called later when the HTML document loads via the element’s onload
    
    attribute. It sets up the count of the total images (minus 2 to account for the extra array element) and displays the total images on the page in the appropriate spot. It also calls nextImage() to start the slideshow. The next two functions, nextImage() and previousImage(), reset the 20-second timer, raise or lower the current image number, respectively (or reset it if the end of the slideshow loop has been reached), and call setImage(): //show the next image function nextImage() { //set automatic execution of nextImage() window.clearTimeout(timer); timer = setTimeout(“nextImage()”,num_seconds_per_image * 1000); //set the next slide if (cur_image_num == total_images) cur_image_num = 1;
    
    218
    
    16_097762 ch10.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 219
    
    Chapter 10: Remixing RSS Feeds else cur_image_num++; setImage(); } //show the previous image function prevImage() { //set automatic execution of nextImage() window.clearTimeout(timer); timer = setTimeout(“nextImage()”,num_seconds_per_image * 1000); //set the next slide if (cur_image_num == 1) cur_image_num = total_images; else cur_image_num--; setImage(); } setImage() sets all image information on the page, which includes updating the current image number as it is displayed, setting the image title in the image_info element, and creating (after removing any existing) an image child element to the image_holder element that references the image
    
    URL pulled from the RSS feed. The remaining HTML markup is fairly straightforward. The call to initSlideshow() in the first shaded line, and the onclick attributes for the > buttons call their respective JavaScript functions in the second set of shaded lines: Images live from del.icio.us. Want to narrow it down? Enter a tag:
    
    3.
    
    After closing the PHP block, add the following HTML markup:
    
    A del.icio.us Jukebox! body { margin: 1em; font-family: Helvetica, Arial, Sans-Serif; }
    
    221
    
    16_097762 ch10.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 222
    
    Part III: Mashups and Remixes Export a music playlist live from del.icio.us. Enter in a tag to narrow it down (optional), or just hit “Get Playlist” Tag:
    
    5.
    
    Try out the script by executing it via command-line PHP. As you may remember, the command will be something like this:
    
    php -f hotjobs.php
    
    If all goes well, the script should output something similar to the following: Checking for items at http://hotjobs.yahoo.com/rss/0/USA/CO/-/RFS/pizza Posted: General Manager, Restaurant Management, Comp. up to $70K - Pilot Travel Centers LLC - Colorado Springs, CO USA Posted: Restaurant Heidi’s Brooklyn - CO - Denver - Post-NewsJobs.com - Denver, CO USA Posted: Restaurant General Manager / Compensation up to $70K - Pilot Travel Centers LLC - Colorado Springs, CO USA Posted: RESTAURANT - SHAKER-ALL CLIENTS LOCAL - Denver, CO USA
    
    230
    
    17_097762 ch11.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 231
    
    Chapter 11: Mashing It Up with Web Services These are all postings to HotJobs for pizza-related food service jobs in Colorado. They should show up in your del.icio.us bookmarks, tagged with autobookmarked jobs along with a for: tag pointing to the friend you are so graciously helping out, similar to Figure 11-1.
    
    Figure 11-1
    
    How It Works The HotJobs web service makes much of its data freely available in RSS form. You can request the data by either sending arguments to the feed URL via query string parameters or actually placing identifiers for the data you’d like returned as a part of the feed URL in a somewhat RESTful fashion. For this project, you use the parts of the feed URL to define the job-types of interest with these variables: //enter a - (dash) for unused elements $country = ‘USA’; $state = ‘CO’; $city = ‘-’; $category = ‘RFS’; $keywords = ‘pizza’;
    
    The variables then assemble into $feed_url, which is the complete URL request for the RSS feed you intend to fetch from HotJobs: $feed_url = HOTJOBS_URL.$country.”/”.$state.”/”.$city.”/”.$category.”/”.$keywords;
    
    You can probably figure out what each variable means, but keep in mind that each request variable, including the meaning of the $category variable, is documented at the HotJobs Web Services documentation web page at http://developer.yahoo.com/hotjobs/index.html. Simply adjust those variables to alter the data returned by the script. As the documentation explains, sending the minus sign (-) as a value will act as a wildcard, matching all results for that particular variable. After the feed request URL is assembled and the request is made, each item returned is processed. The del.icio.us API /posts/get? method is used on each link appearing in the RSS feed before a new
    
    231
    
    17_097762 ch11.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 232
    
    Part III: Mashups and Remixes bookmark is posted, and if /posts/get? returns any child elements of the main element, the link to the job description has already been saved to your del.icio.us and doesn’t need to be posted: //post the items found if they don’t exist //tagging them with for:SLACKER_FRIEND foreach ($rss->items as $item) { //check to see if the url has already been posted do_api_call(‘/posts/get?’,”&url=”.urlencode($item[‘link’])); if (!isset($api_return[0][‘children’])) { ... the code to save the link as a del.icio.us bookmark... } else { echo $item[‘link’].” already posted - skipping\n”; } }
    
    Notice that $item[‘link’] is surrounded by the PHP urlencode() function. urlencode() makes any string safe for transport via a URL, such as with a REST request. Although it’s unlikely that an item URL itself will have anything in it that might break a REST call, it’s never a bad idea to use urlencode(). In the later call to /posts/add?, every query value is escaped with urlencode(). If it has never been saved before, the link is saved to your del.icio.us bookmarks. Notice the $tags variable in the proceeding code and how it appends the SLACKER_FRIEND constant to make a legitimate for: tag in the shaded block. The rest is fairly self-explanatory. The call to /posts/add? is made and the results echo to the screen: $url = $item[‘link’]; $description = $item[‘title’]; $extended = $item[‘description’]; $tags = “for:”.SLACKER_FRIEND.” autobookmarked jobs”; do_api_call(‘/posts/add?’,”&url=”.urlencode($url).”&description=” .urlencode($description).”&extended=”.urlencode($extended).”&tags=” .urlencode($tags)); if ($api_return[‘status’] == 200) echo “Posted: “.$description.”\n”; else echo “There was a problem posting “.$description.”\n”;
    
    The HotJobs autobookmarking script is fairly simple. It depends on the simplicity of a RESTful API call that returns easy-to-parse RSS data without the need for any additional authentication or XML dissection. The next Try It Out involves a slightly more complex autobookmarking script that brings in some additional command-line script techniques. It also addresses the challenge involved in processing a data return that isn’t RSS formatted, as may frequently occur when you try to integrate additional web APIs into your mashup applications. This script will pull down and automatically post search results from eBay using the eBay REST API.
    
    Try It Out
    
    Using the eBay Autobookmarker
    
    The eBay Autobookmarker script will search for eBay item listings using the eBay REST API. Instead of specifying what to search on inside the script, as you did with the HotJobs Autobookmarker, in this example you will design it to accept a search string provided as a command-line argument.
    
    232
    
    17_097762 ch11.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 233
    
    Chapter 11: Mashing It Up with Web Services You will need to use Snoopy to make calls to and fetch data from the eBay REST API. Magpie has a copy, so you can just borrow it by linking directly to Snoopy.inc.php in Magpie’s extlib directory. You will also use the delicious_mashups.lib.php library you made earlier not only to form the needed API calls to del.icio.us, but also to parse the XML data returned from eBay. You’ll need your eBay credentials as well, specifically your eBay Sandbox username and REST token. Refer to Chapter 4 if you still need to set that up.
    
    1.
    
    Create a new script inside the autobookmarkers folder with your editor called ebay.php and set up the appropriate paths to Snoopy and your del.icio.us API library, as well as the usual constants required to operate with both:
    
    
    
    6.
    
    To test this autobookmarking script, first try invoking it from the command line like normal:
    
    php -f ebay.php
    
    You should get this in return: You need to specify something to search for as an argument!
    
    To properly invoke this script, you need to type a search string after your call to ebay.php, like so: php -f ebay.php “powerbook g4”
    
    You should always put multiword search strings in quotes. PHP will automatically parse them as a single argument. When you invoke the script with a search string, the call to the eBay REST API will be made and new bookmarks will be saved to your del.icio.us account matching the search string you provided. They will all be automatically tagged with autobookmarked and ebay. The ability to specify what you want to search for via a command-line parameter has its uses. You could schedule the script to execute multiple times, each with different search strings, on a regular basis to routinely save items of interest at eBay to your del.icio.us bookmarks. For example, if you use Crontab, you could conceivably make several calls to the same script with your Crontab file like so: 0 0 * * 1 php -f /htdocs/autobookmarkers/ebay.php “vintage macintosh” 0 0 * * 1 php -f /htdocs/autobookmarkers/ebay.php “colecovision” 0 0 * * 1 php -f /htdocs/autobookmarkers/ebay.php “macrame owl”
    
    This would result in any new eBay items involving vintage macintosh, colecovision, and macrame owl to be automatically saved to your del.icio.us bookmarks every Monday.
    
    How It Works The first item of interest in the eBay autobookmarking script is the code involved in the processing of command-line arguments: //fetch query string from arguments if (!isset($argv[1])) die(“You need to specify something to search for as an argument!\n”); else $search_string = urlencode($argv[1]);
    
    With most PHP setups, the variable $argv is a global array of command-line arguments. The value for the first index in the array, $argv[0], is the name of the script being processed (in this case, ebay.php). All the ensuing arguments are what follow the name of the script. So, $argv[1] is your search string. By placing it in quotes, the shell command line automatically parses the argument as a single string.
    
    235
    
    17_097762 ch11.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 236
    
    Part III: Mashups and Remixes If you’re interested in the further command-line features that PHP provides, check out the documentation on the PHP home page at http://us2.php.net/manual/en/features.commandline.php. After the $search_string variable has been set, the full REST call to eBay is assembled in the $full_ api_url variable. As you may remember from the introduction to eBay’s API in Chapter 4, a call to eBay’s REST API requires the function call, in this case GetSearchResults, and both the RequestToken and RequestUserId for the eBay user on whose behalf you are searching. The Query variable is given the URL-safe $search_string: //full query url $full_api_url = BASE_REST_URL.”?CallName=GetSearchResults&RequestToken=”.USER_REST_TOKEN .”&RequestUserId=”.USER_ID.”&Query=”.$search_string.””;
    
    After that, the returned data is processed. You can use parse_xml_results() from delicious_mashups.lib.php without having to remake the function or its features. Its XML parsing routine is simple enough to handle any kind of generic XML. The eBay response for a REST API call looks something like this: 2006-08-20 20:19:28 110003840240 Custom Built Computer 1 1 http://cgi.sandbox.ebay.com/ws/eBayISAPI.dll?ViewItem&item=110003840240&category=11 4193 ... the rest of the XML response ... 9 0 1 9 ... even more XML! ...
    
    The next task the script performs is to drill down through the elements to pull out the values for each item’s and elements: 2006-08-20 20:19:28
    
    236
    
    17_097762 ch11.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 237
    
    Chapter 11: Mashing It Up with Web Services 110003840240 Custom Built Computer 1 1 http://cgi.sandbox.ebay.com/ws/eBayISAPI.dll?ViewItem&item=110003840240&category=11 4193 ... the rest of the XML response ... 9 0 1 9 ... even more XML! ...
    
    Another way to do this is to iterate through each element in the array and find the elements with the name you are looking for. Although this is more computationally intensive, it’s also more likely to get you the data you need if something changes in the XML schema. So, the next bit of code in ebay.php starts with the children of the root XML document element () and iterates through them, first looking for the element: //search for the xml elements we need $root_element_children = $api_return[0][‘children’]; foreach ($root_element_children as $root_element_child) { if ($root_element_child[‘name’] == “SEARCH”) { $search_items = $root_element_child[‘children’]; foreach ($search_items as $search_item) { if($search_item[‘name’] == “ITEMS”) { $items = $search_item[‘children’]; } break; } break; } }
    
    Then it looks for the element: //search for the xml elements we need $root_element_children = $api_return[0][‘children’]; foreach ($root_element_children as $root_element_child) { if ($root_element_child[‘name’] == “SEARCH”) {
    
    237
    
    17_097762 ch11.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 238
    
    Part III: Mashups and Remixes $search_items = $root_element_child[‘children’]; foreach ($search_items as $search_item) { if($search_item[‘name’] == “ITEMS”) { $items = $search_item[‘children’]; } break; } break; } }
    
    The $items variable receives each child of , which will be each eBay item returned. Next each $item is evaluated, and the character data values for each item’s and elements are assigned to the $url and $description variables, respectively: foreach ($items as $search_result_item) { //determine the item title and url $item_details = $search_result_item[‘children’]; foreach ($item_details as $item_detail) { if ($item_detail[‘name’] == “LINK”) $url = $item_detail[‘cdata’]; if ($item_detail[‘name’] == “TITLE”) $description = $item_detail[‘cdata’]; } unset($item_details); ... the rest of the code ... }
    
    After that, just like with the HotJobs autobookmarking script, an initial del.icio.us API call is used to check for the existing presence of the bookmark to make sure it hasn’t already been posted. If it hasn’t, the call to /posts/add? is made: //check to see if the url has already been posted do_api_call(‘/posts/get?’,”&url=”.urlencode($url)); if (!isset($api_return[0][‘children’])) { $tags = “autobookmarked ebay”; do_api_call(‘/posts/add?’,”&url=”.urlencode($url).”&description=” .urlencode($description).”&extended=”.urlencode($extended).”&tags=” .urlencode($tags)); if ($api_return[‘status’] == 200) echo “Posted: “.$description.”\n”; else echo “There was a problem posting “.$description.”\n”; } else { echo $item[‘link’].” already posted - skipping\n”; }
    
    238
    
    17_097762 ch11.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 239
    
    Chapter 11: Mashing It Up with Web Services //unset $url and $description unset($url); unset($description);
    
    The response format and all the other intricacies of the eBay REST API are fully documented at http://developer.ebay.com/developercenter/rest/. There’s one more autobookmarking script to make. This last one involves another common hurdle sometimes found in working with web service APIs — signed authentication schemes. Unfortunately, some APIs need to secure themselves beyond just having developers apply for and send an API key with every request or authenticate their own web service account with every call to their API. Some web services require that each request be sent with secret, encoded signatures that verify the identity of your application. In addition, some also require that users explicitly permit an application to access and change their data before it can be used. A service that incorporates both of these additional levels of security is Flickr, the online photo sharing service. Each request to its API must be signed in a special way before it will work. Not only that, but if your API request is to access and/or change a Flickr user’s data, the user must give your application permission to do so first. For the last project in this section you will actually create two scripts. The primary script will automatically post your Flickr favorites to del.icio.us. A secondary script will be created first, however, to perform the necessary actions for you to get what you need to allow your script to do this. It may seem like an overly complicated system, but it’s actually pretty ingenious in the way it enables Flickr to protect users and its data with a pretty sophisticated API system. Although the Flickr authentication system is fairly unique, it’s setting the trend for APIs to come and you can expect a lot of other web service APIs to follow this path in the future.
    
    Try It Out
    
    Using the Flickr Autobookmarker
    
    With Flickr, you can mark photographs you find there as favorites by clicking the star-shaped button above each photograph you browse to. When you do, the star turns pink, and the photograph is automatically added to a page displaying your favorite photographs from all over Flickr, as shown in Figure 11-2. You already share interesting things on del.icio.us when you save bookmarks to them, so it makes sense to want to automatically transport the list of your favorite photographs to del.icio.us. Flickr provides an API method to retrieve a user’s list of favorites, called flickr.favorites.getList (documented at www.flickr.com/services/api/flickr.favorites.getList.html), but unfortunately it’s not going to be as easy as making a REST call to that API function and parsing its results. This and many other API functions at Flickr require an authentication agreement between your application, the Flickr user whose favorites you’d like to access, and the Flickr API. These are usually represented by three items that you will send along with your REST call to Flickr: ❑
    
    Your application’s API key
    
    ❑
    
    Your application’s API signature
    
    ❑
    
    An authentication token that represents a pre-established permissions agreement made between your application and the Flickr user whose photographs you are going to read or change
    
    239
    
    17_097762 ch11.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 240
    
    Part III: Mashups and Remixes It might help to think of the API key as your application’s username for the Flickr API, the signature as your applications password, and the authentication token as the user id for the Flickr user whose photographs your application is to access.
    
    Figure 11-2
    
    240
    
    1.
    
    Hopefully by now you’ve applied for and received a Flickr API key, so that part is done. Before you can use it, however, you’ll need to configure the key. This will help you determine how to form its signature as well as get the user authentication token you’ll need. You can visit the list of your keys at www.flickr.com/services/api/keys/. Find the API key you would like to use for the Flickr Autobookmarker application and click the Authentication: Not Configured link to go into its configuration settings.
    
    2.
    
    On the configuration form, the identifying number-and-letter hash for your key is called its Shared Secret. This will be a part of your application’s signature, so be sure and make a note of it. Then go ahead and fill out the required fields on the form. Name your application Flickr Autobookmarker and enter Posts your favorites to del.icio.us automatically as its description. Set the Authentication Type to Mobile Application (recommended by Flickr for all commandline applications) and the Mobile Permissions to Read, as shown in Figure 11-3.
    
    17_097762 ch11.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 241
    
    Chapter 11: Mashing It Up with Web Services 3.
    
    Take note of the URL next to “Your authentication URL” (which is where you will go to allow the Flickr Autobookmarker application to access your photos), and then save the changes to your API key.
    
    Figure 11-3
    
    4.
    
    Log in to Flickr and then browse to the URL you noted in step 3. You should see a page explaining that the Flickr Autobookmarker application would like access to your photos and offering you the chance to agree to let it do so, as shown in Figure 11-4.
    
    Figure 11-4
    
    5.
    
    Click the Ok, I’ll Allow It button. You are taken to a page that displays a special code, called a mini-token, that you are supposed to type into your mobile application or, in this case, set as a variable in the command line you are about to make to fetch the final authentication token you need. Figure 11-5 shows what this page looks like. Depending on the type of application you make, this procedure happens different ways. If you configure an API key to be a web application, then after the user clicks Ok, I’ll Allow It they are redirected to a callback URL at your web applications website with the authentication information sent as a query string. With a desktop application, all of the Flickr login and permission granting can be handled inside the application itself. It all depends on the platform for your mashup application. Flickr probably recommends designing a command-line application as a mobile application because it’s easy to enter in the mini-token on the command line or using some other method.
    
    241
    
    17_097762 ch11.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 242
    
    Part III: Mashups and Remixes
    
    Figure 11-5
    
    6.
    
    Because you only need one user authentication token — the one for your own Flickr user account — you will write a script to convert the mini-token to the final authentication token you’ll need to provide when using the Flickr API’s flickr.auth.getFullToken method. To do this, create a script called flickr_get_token.php and give it the following code, pointing to a version of Snoopy.class.php you have available and providing your Flickr API key as the API_KEY and the API key’s Shared Secret as the SHARED_SECRET:
    
    
    
    7.
    
    Invoke the script with the mini-token you retrieved earlier, like this (assuming your mini-token was 123-123-123):
    
    php -f flickr_get_token.php 123-123-123
    
    You should see some XML printed to the screen, similar to this: 12345678823457 read
    
    8.
    
    The authentication token you’re looking for is the data appearing inside the element, shown in bold in the preceding code. Make note of this for your autobookmarking script. You now have the string you need that represents the agreement made between your application and the user whose data you will be reading on Flickr. Now that you’ve noted the final authentication token for the Flickr user (yourself, most likely) whose favorites you want to read,
    
    From this point on, you won’t need the mini-token anymore. In fact, it works only once to retrieve the final authentication token, and then is useless. Keep flickr_get_token.php handy, however, just in case you want to get the authentication tokens for other Flickr users.
    
    9.
    
    It’s time to write the actual autobookmarking script. It will be fairly similar to the other autobookmarking scripts you’ve written thus far. Create a new PHP file called flickr.php wherever you’re keeping your other autobookmarking applications and give it the following PHP code in full (be sure and set the DELICIOUS_USERNAME, DELICIOUS_PASSWORD, API_KEY, SHARED_ SECRET and FULL_TOKEN constants to their appropriate equivalent values, setting FULL_TOKEN to the full user authentication token that flickr_get_token.php gave you):
    
    
    
    10.
    
    244
    
    Invoke the script from the command line without any arguments. Your Flickr favorites will begin to be populated on del.icio.us, as shown in Figure 11-6. del.icio.us will show the thumbnail for each Flickr image posted inline with your del.icio.us bookmarks.
    
    17_097762 ch11.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 245
    
    Chapter 11: Mashing It Up with Web Services Obviously, the big challenge in this particular autobookmarking script was working with Flickr’s somewhat complex authentication scheme. I can’t speak for the Flickr developers, but my guess is that Flickr knows that many of their users keep much of their private lives and special memories on Flickr, and if a third-party application is going to mess with them, then Flickr will want to do everything they can to ensure both the Flickr user and Flickr itself can keep tabs on what’s going on. This authentication system definitely supports and enforces this idea.
    
    Figure 11-6
    
    How It Works When you allowed Flickr Autobookmarker to access your photos and then retrieved the mini-token code, you told Flickr that it’s okay for this application to do its thing and that you’ll let the application know this. Flickr then waits for a response from the application to fetch the final authentication key, confirming that the Flickr user wants to continue using the application. The first script you made, flickr_get_token.php, does this by first capturing the mini-token as an argument to the script: //fetch query string from arguments if (!isset($argv[1]))
    
    245
    
    17_097762 ch11.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 246
    
    Part III: Mashups and Remixes die(“You need to give me your mini token.\n”); else $mini_token = $argv[1];
    
    It then makes the call to the Flickr API’s flickr.auth.getFullToken method via this URL: $get_full_token= “http://flickr.com/services/rest/?method=flickr.auth.getFullToken&api_key=” .API_KEY.”&mini_token=”.$mini_token.”&api_sig=”.$api_sig; $snoopy->fetch($get_full_token);
    
    Aside from the method being called to the Flickr REST URL, three other arguments are sent as query strings, denoted in bold in the preceding code. The first is your application’s API key. The second is the mini-token provided by the user. The third is your application’s API signature. For almost every call to the Flickr API, an API signature is required. (The only calls that don’t are those that interact purely with non-private information provided by Flickr and do not involve data manipulation.) The API signature is an additional query string that serves as your application’s password to use the API service. It is assembled from several parts put into a single string and then converted into an MD5 hash. Flickr is waiting for your API calls on the other end with the same hash. If they match, the API call happens. If they don’t, it does not. This is why it’s extremely important to assemble your API signature properly. Take a look at the part of flickr_get_token.php that assembles the value for $api_sig. It is a combination of the SHARED_SECRET constant, the string “api_key” followed by the API_KEY constant, the string “method” followed by the method being called, which is flickr.auth.getFullToken, and the string “mini_token” followed by the mini-token included as an argument to the script: $api_sig = md5(SHARED_SECRET.”api_key”.API_KEY.”methodflickr.auth.getFullTokenmini_token” .$mini_token);
    
    All API signatures are assembled in a similar fashion, but they don’t always include all of the same parameters. The things that remain constant are, in order:
    
    1. 2. 3. 4.
    
    The shared secret Your API key The text “method” and the method being called Any additional arguments, formatted as the name as the argument and then the value (in this case “mini_token”) and then the value for $mini_token
    
    When hashed together, all these things form the API signature needed for almost all of Flickr’s API requests. It ultimately identifies your application to Flickr using the shared secret hash that only your application and Flickr know, as well as information about the request you are sending. If you intend to roll out more robust Flickr-based mashups, you will do well to design a function or some other method of assembling the API signature string without having to put together each little part of the string again and again.
    
    246
    
    17_097762 ch11.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 247
    
    Chapter 11: Mashing It Up with Web Services Ultimately, all flickr_get_token.php does is take the user’s mini-token and produce the full API user token needed for the rest of your software’s requests to the Flickr API. If a Flickr user didn’t permit or chooses to revoke permission to your application’s access to their photos, you won’t be able to retrieve that user’s full token, much less make any calls on their behalf. These autobookmarking scripts are simple, but it would be a good idea to design your more sophisticated mashups to handle these possible scenarios. Now that you understand how the API signature is formed, the actual flickr.php autobookmarking script is pretty easy to pick through. It first begins with the usual setup of Snoopy.class.php, your del.icio.us mashups library, and the Flickr API and user keys. You only need to calculate one signature, for the flickr.favorites.getList method, as follows: //calculate $api_sig for flickr.favorites.getList $api_sig = md5(SHARED_SECRET.”api_key”.API_KEY.”auth_token”.FULL_TOKEN .”methodflickr.favorites.getList”);
    
    The string schema for the API signature remains the same except for one addition: the authentication token is an argument before the method name. Every authenticated Flickr API call will follow this schema. Any additions to the query should still appear after the method name, just as mini_token appeared in the authentication string in flickr_get_token.php. After that, it’s a matter of fetching the data from the Flickr API with the full REST API call URL, and then posting it to del.icio.us. The REST response format is fully documented on Flickr at www.flickr .com/services/api/response.rest.html. You can probably figure out for yourself how most of it comes together to form the data needed for the call to the del.icio.us API. The one thing to note here is how the URL is assembled for the del.icio.us bookmark in the shaded line (which wraps here due to page constraints): //go through each photo and save if never saved to del.icio.us before foreach ($photos as $photo) { $url = sprintf(“http://www.flickr.com/photos/%s/%s”,$photo[‘attributes’][‘OWNER’], $photo[‘attributes’][‘ID’]); $description = $photo[‘attributes’][‘TITLE’]; $tags = “flickr photography autobookmarked”; //check to see if the url has already been posted do_api_call(‘/posts/get?’,”&url=”.urlencode($url)); if (!isset($api_return[0][‘children’])) { do_api_call(‘/posts/add?’,”&url=”.urlencode($url).”&description=” .urlencode($description).”&tags=”.urlencode($tags)); if ($api_return[‘status’] == 200) echo “Posted: “.$description.”\n”; else echo “There was a problem posting “.$description.”\n”; } else { echo $url.” already posted - skipping\n”; } }
    
    247
    
    17_097762 ch11.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 248
    
    Part III: Mashups and Remixes The basic link to a photo web page on Flickr consists of the base URL www.flickr.com/photos/ followed by the Flickr user id, which appears in the REST response as , and then the photo’s unique id, which appears in the REST response as . The further intricacies of the Flickr URL scheme are all documented at www.flickr.com/services/api/misc.urls.html. These three autobookmarking projects gave you an overview of some of the challenges that might be involved in mashing up other web service data with del.icio.us. For the next part of this chapter, you’ll take data from del.icio.us and put it somewhere else with a system that backs up your bookmarked web pages on the Amazon S3 storage system.
    
    Amazon: Caching Pages with S3 It’s possible that at least once in your Internet-browsing life you have taken advantage of Google’s cached version of a particular web page that has either changed or gone offline since Google indexed it. If you haven’t, it’s definitely a Google feature worth knowing about, because it enables you to access the data you need from the web even if the website that hosts it is temporary offline or is gone completely. Most links returned by a Google search have a cached link beside or below them from which you can access a cached version of the page, which has a box at the top that looks something like the one shown in Figure 11-7.
    
    Figure 11-7
    
    248
    
    17_097762 ch11.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 249
    
    Chapter 11: Mashing It Up with Web Services Because your del.icio.us bookmarks are undoubtedly links to trusted and important sources of information formed from your own browsing of the web, it would be useful to have your own page caching system similar to Google’s from which you would be able to read stored versions of web pages and other documents you have bookmarked, even if it’s just the HTML markup for the page or the contents of a linked MP3 or image. You can’t just depend on Google’s cache because it may not be as up-to-date as your bookmarks, and of course, it is not targeted to your favorites. The ideal system would be one that you could design and control. There are a lot of technical issues involved in rolling out such a system, the least of which is finding a place and a method to store the potentially large amounts of data your cached HTML represents. There is a web service that offers an interesting solution for this, and that is Amazon’s Simple Storage Service, also known as S3. Amazon S3 lets you read, write, and delete data in Amazon’s own servers using familiar web-transfer and RESTful methods, and best of all, it’s inexpensive. At the time of this writing, the cost for storing data at S3 is $0.15 per gigabyte of data per month, and the data is available on the web via a public URL (if you choose for it to be public) and infinitely scalable. Creating a sophisticated del.icio.us caching system using Amazon S3 is beyond the scope of this chapter. However, you can still roll-out out a functioning proof-of-concept implementation, and it may be easier than you think. For this project, you’ll take a look at Amazon S3 and how it works, and then create an automated del.icio.us page caching script and retrieval system so that anytime you’re browsing the web, not only will you have your del.icio.us bookmarks handy, but you’ll also be able to access the bookmarked page’s content even if the page itself doesn’t exist anymore. Before you get started, you need to sign-up for Amazon Web Services (AWS), which hopefully you did in Chapter 4. Amazon will provide you two access key identifiers: your access key id and your secret access key. You’ll need these to do this project, so make sure you have them on hand. You can always retrieve them by browsing to http://aws.amazon.com/, logging in, and choosing View Access Key Identifiers under Your Web Services Account. After you have an AWS account, you can sign up for Amazon S3 by browsing to http://aws.amazon .com/s3 and clicking Sign up for Web Service. You will need to have an Amazon S3 account in addition to an AWS account to complete this project. Amazon recommends that you install two Pear modules to best interact with Amazon S3 from PHP. Pear is a PHP application and extension registry. Basically, that means it’s a library of third-party code called packages that you can easily plug in to your PHP applications, just like you have been doing with Snoopy.class.php, Magpie, and so forth. The two Pear packages you’ll need are Crypt_HMAC and HTTP_Request. If you’re using Mac OS X, Pear is probably already installed and can be used from the command line. To install the two extensions you need, simply enter the following commands into the shell (via Terminal.app) and the packages will be downloaded and install automatically: sudo pear install Crypt_HMAC sudo pear install --onlyreqdeps HTTP_Request
    
    Your Pear setup may put the installed packages in a place that PHP doesn’t know about, however, so you may need to include this line with each of the files developed for this project: set_include_path(get_include_path() . PATH_SEPARATOR . “/usr/lib/php”);
    
    249
    
    17_097762 ch11.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 250
    
    Part III: Mashups and Remixes This adds the /usr/lib/php directory to the list of places where PHP to look for Pear extensions. If you’ve installed the Pear extensions and they don’t seem to be working, try adding a call to set_ include_path() at the top of your code. If you’re using Windows, you’ll probably need to install Pear first. Download the installer from http:// pear.php.net/package/PEAR/, and then install the packages you need straight from the Windows command prompt using these commands: pear install Crypt_HMAC pear install --onlyreqdeps HTTP_Request
    
    After you’ve got those two Pear packages installed, it’s time to write some code. All of the following scripts involving Amazon S3 can be found on the Wrox companion website for this book in the delcache project folder.
    
    Try It Out
    
    Creating a Bucket
    
    Before you can store data at Amazon S3, you need to make a place to keep it, called a bucket. An Amazon S3 bucket is just like a file directory or folder on your computer. It can be named almost anything but is limited to the characters that are allowed to appear in web domain names, so you can’t use spaces or any unusual characters. This is because you want to be able to reference the bucket over the web. As you will see, you’ll be able to browse directly to items in your bucket via a web browser, so it’s important that your bucket’s name works in a URL. Another caveat involving bucket naming is that the name must be unique across all bucket names anywhere on Amazon S3, even from those made by other Amazon S3 users. This is because your buckets exist in a public space (even if the contents are private), and need to be identified in a unique way. This first script involves the creation of the Amazon S3 bucket that will store your cached web pages, getting things ready for the actual caching script as well as giving you an introduction to the Amazon S3 REST API.
    
    1.
    
    Create a new folder in your htdocs directory called delcache and then create a new commandline PHP script inside it called create_s3_bucket.php. Give it the following PHP code, in full (setting your BUCKET_NAME constant to your del.icio.us username, followed by an underscore, and then the string “delcache”, and setting S3_ACCESS_KEY and S3_SECRET_KEY to your Amazon access key ID and secret key ID, respectively):
    
    
    
    2.
    
    Run the script from the command line (php -f create_s3_bucket.php). and hopefully It should return a 200 response code, meaning the request to create the bucket was successful. Also, because this bucket was made to be public, you should be able to browse to it with your web browser. If your bucket name was, for example, username_delcache, then browsing to http://username_delcache.s3.amazonaws.com/ should show you an XML response describing your bucket, now fully instantiated on Amazon S3. This is what the XML response will probably look like (to a browser that is capable of displaying XML inline, like Firefox):
    
    username_delcache 1000 false
    
    251
    
    17_097762 ch11.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 252
    
    Part III: Mashups and Remixes How It Works After some initial constant setup, your code first brings in the installed Pear packages, just like a normal file include: // pear installed goodness require_once ‘Crypt/HMAC.php’; require_once ‘HTTP/Request.php’;
    
    The next two constants exist in the unlikely event that you’ll need to change them, that being the Amazon REST API URL and the privacy settings for the bucket: //other settings define(‘S3_URL’,”http://s3.amazonaws.com/”); define(‘ACL_SETTING’,’public-read’); //this will let you browse to data public-read means the general public will be able to read the bucket but not add to or change it. You can also make Amazon S3 buckets public-read-write so that others can write data to it as well, or private, meaning no one but you (or applications signing their request properly) can access the data.
    
    There are a few other access control settings listed in the Amazon S3 documentation. All requests to the Amazon S3 API should include a date and time formatted in the RFC 822 standard, so in this case, the current date and time is assigned to $rfc_822_datetime: //the date and time in rfc 822 $rfc_822_datetime = date(“r”); //content type can be empty for creating a bucket $content_type = ‘’; //can be empty for creating a bucket but not later
    
    Additionally, you should define the Content-Header for the file you are transporting. In the case of bucket creation, no file is transferred, so that variable can be blank for now. (You’ll need to set it when you finally start putting data in your Amazon S3 bucket.) Next, the signature for your REST request is assembled. As with the Flickr API signature, this signature is meant to authorize your request to Amazon S3 and includes all the information about the request in a single encrypted string: //assemble your s3 signature $s3_signature = “PUT\n\n”.$content_type.”\n”.$rfc_822_datetime.”\nx-amz-acl:” .ACL_SETTING.”\n/”.BUCKET_NAME.”/”; $hasher =& new Crypt_HMAC(S3_SECRET_KEY, “sha1”); $signature = hex2b64($hasher->hash($s3_signature));
    
    The authorization string contains the following elements (in the order presented in the preceding code), with each element separated by a newline character (\n):
    
    1.
    
    252
    
    The request verb, which basically describes how you’d like to move data: In the case of creating a bucket, this is PUT for uploading, updating, or setting data.
    
    17_097762 ch11.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 253
    
    Chapter 11: Mashing It Up with Web Services 2.
    
    An MD5 hash of the content you are sending: This is optional and is not needed for creating a bucket; however, the proceeding newline character must still appear even if this header isn’t included.
    
    3. 4. 5.
    
    The content type for the request: Also optional.
    
    6.
    
    The resource you are going to access: In this case, your bucket name, surrounded by slashes (/).
    
    The RFC 822 formatted date and time. All x-amz- headers: Special headers that do certain things with the data at Amazon S3. In the case of this script, the header is x-amz-acl, which sets access control permissions for the bucket.
    
    This assembled string is then computed as an HMAC-SHA1 hash using your secret access key as the hash key, converted to its Base 64 equivalent. This authorization string is included in the request header, not unlike the way you send WWW-Authenticate information in your headers for requests to the del.icio.us API. In fact, you will find that working with Amazon S3 includes a combination of other API techniques you’ve already implemented. As with the del.icio.us API, you include header information detailing aspects of your REST request, and as with the Flickr API, your request will include a special signature identifying your application to Amazon. Next a new HTTP_Request object is set up. HTTP_Request does in many ways exactly what Snoopy.class.php does — it makes web requests from your application. Therefore, it’s perfect for making a REST call. In fact, you could use it instead of Snoopy in many of the earlier projects if you prefer. //make the request to create the bucket $s3req =& new HTTP_Request(S3_URL . BUCKET_NAME.”/”); $s3req->setMethod(‘PUT’); $s3req->addHeader(“content-type”, $content_type); $s3req->addHeader(“Date”, $rfc_822_datetime); $s3req->addHeader(“x-amz-acl”, ACL_SETTING); $s3req->addHeader(“Authorization”, “AWS “ . S3_ACCESS_KEY . “:” . $signature);
    
    The addHeader() method is used to add the request method, content-type, Date, and x-amz-acl values to the request, as well as an authorization header containing the string “AWS” followed by a space, your Amazon API access key, a colon (:), and then the final signature compiled earlier. This is what makes a fully assembled Amazon S3 REST request. Finally, the request is sent to the Amazon S3 API and the HTTP response code is printed to the screen. Just like with the del.icio.us API, if the response code is successful (200), everything went well. Now that your Amazon S3 bucket is ready, it’s time to start filling it up with cached versions of the web pages you’ve bookmarked at del.icio.us.
    
    Try It Out
    
    Caching Web Documents
    
    In this Try It Out, you’ll write the script that will go through your del.icio.us bookmarks and cache them as files in your newly created Amazon S3 bucket. You will use the RSS feed as your data source at del.icio.us for this, meaning that only the last 30 items will be cached each time the script is run. This
    
    253
    
    17_097762 ch11.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 254
    
    Part III: Mashups and Remixes doesn’t mean items that fall from the feed will be removed from cache. They will remain there in an archival state exactly as they were processed the very last time their URLs were read from the feed. Your script will then fetch the content of the web page in question using HTTP_Request along with some information about it and then recreate it as a file at Amazon S3.
    
    1.
    
    Start a new PHP file in the delcache directory called create_s3_cache.php. Place the Magpie RSS files and cache directory inside the delcache folder or in another convenient location.
    
    2.
    
    Open a PHP code block in create_s3_cache.php and begin with the same constants and variables found in create_s3_bucket.php (setting BUCKET_NAME to the name of the bucket you created earlier, and setting your S3_ACCESS_KEY and S3_SECRET_KEY):
    
    
    
    255
    
    17_097762 ch11.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 256
    
    Part III: Mashups and Remixes 6.
    
    Execute the script from the command line (php -f create_s3_cache.php). You should see output similar to this:
    
    Cache updated for http://fusion.gat.com/docview/tar_gzip.html (c0218365200e99c2e72584b47e468378) Cache updated for http://www.flickr.com/photos/26462343@N00/3815510 (ab9f6a3c78073eb16285c80e2fd59d18) ... the rest of the script’s output...
    
    Notice the letters and numbers between the parentheses, such as ab9f6a3c78073eb16285c80 e2fd59d18. This is the unique key for the cache file created at Amazon S3. Basically, it’s the filename. Because each cache file you made is public, you can browse to the file in your web browser and see the cached version of the page. If you decided to call your bucket username_delcache, for example, you would access the file at http://username_delcache.s3.amazonaws.com/ ab9f6a3c78073eb16285c80e2fd59d18. (Note where the bucket name and key name appear in the URL.) After browsing to it, you should see the cached version of the page, as shown in Figure 11-8.
    
    Figure 11-8
    
    Just like with Google’s caching system, this cached file is simply the raw HTML markup of the bookmarked page, displayed in the browser. Sometimes the result is not pretty, but the information displayed could be useful. For example, if you schedule this script to run nightly with Crontab, you’ll have scaling backup of all your del.icio.us bookmarks always available.
    
    256
    
    17_097762 ch11.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 257
    
    Chapter 11: Mashing It Up with Web Services How It Works Things really start to get interesting with create_s3_cache.php inside the foreach control loop that processes information returned by Magpie: //create and/or update the cache for each item foreach ($rss->items as $item) { ... the processing of RSS feed }
    
    You use the file_key to identify the cache file in your Amazon S3 directory. With this script, the file_ key is an MD5 hash of the item link, which is of course the bookmark URL: $file_key = md5($item[‘link’]);
    
    Making the filename an MD5 hash of the bookmark URL will ensure that each bookmark cached has only one cache file. As you may remember, del.icio.us organizes bookmarks the same way. HTTP_Request is used to fetch the complete contents of the bookmark URL and assign it to $file_ contents. The file’s MIME type is also assigned to $file_content_type: //get the contents of the file you want to cache $req =& new HTTP_Request($item[‘link’]); $req->sendRequest(); $response_code = $req->getResponseCode(); $file_content_type = $req->getResponseHeader(‘content-type’); $file_contents = $req->getResponseBody();
    
    It’s a good idea to keep track of the MIME type just in case the bookmarked page isn’t an HTML document and is instead, for example, an XML document or MP3 music file. If the file contents are returned, then it’s time to save the file to Amazon S3. First the signature string is assembled just like with create_s3_bucket.php. The only difference is that the $content_type variable actually has a value this time, and the $file_key is appended to the end of the signature after the BUCKET_NAME: //assemble your s3 signature $s3_signature = “PUT\n\n”.$content_type.”\n”.$rfc_822_datetime.”\nx-amz-acl:” .ACL_SETTING.”\n/”.BUCKET_NAME.”/”.$file_key; $hasher =& new Crypt_HMAC(S3_SECRET_KEY, “sha1”); $signature = hex2b64($hasher->hash($s3_signature));
    
    Then the PUT request is made to the Amazon S3 API. This is almost exactly like the request made in create_s3_bucket.php. The biggest difference is that the $file_contents are set in the request via HTTP_Request’s setBody() method. Also, this time the request URL includes the key name as well. Your request URL with Amazon S3 is always the complete API path to the file — even if that file does not yet exist: //make the request to create the file in the bucket $s3req =& new HTTP_Request(S3_URL.BUCKET_NAME.”/”.$file_key); $s3req->setMethod(‘PUT’);
    
    257
    
    17_097762 ch11.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 258
    
    Part III: Mashups and Remixes $s3req->addHeader(“content-type”, $content_type); $s3req->addHeader(“Date”, $rfc_822_datetime); $s3req->addHeader(“x-amz-acl”, ACL_SETTING); $s3req->addHeader(“Authorization”, “AWS “ . S3_ACCESS_KEY . “:” . $signature); $s3req->setBody($file_contents); $s3req->sendRequest();
    
    The rest of the script catches any errors and outputs any needed messages. The next step is to schedule this script to execute automatically every so often, ensuring that new bookmarks you add are entered in the cache. Daily would be enough, so a Crontab schedule like the following (every day at midnight) would work well: 0 0 * * 1 php -f /htdocs/delcache/create_s3_cache.php
    
    With the script created and scheduled, the only thing left to do is to devise a convenient way to access the cached pages when needed. For the final project in this chapter, you will at last leave the command line behind and make a web page and bookmarklet combo that will fetch and display the cached bookmark data.
    
    Try It Out
    
    Redirecting to the S3 Cache
    
    Because the cached data is available via a public URL, all you really need is a convenient way to access that URL when a page you bookmarked before is unavailable or not responding. You’ve already experienced the convenience of a JavaScript bookmarklet in terms of posting links to del.icio.us. Making a bookmarklet that redirects you to the cached version of whatever page you are trying to browse to is a good way to solve this problem.
    
    1.
    
    Create a script in your delcache directory called get_s3_cache.php and give it the following PHP and HTML markup in full (setting BUCKET_URL to the appropriate URL by changing the text in italics to whatever you named your bucket):
    
    del.icio.us cache bookmarklet
    
    258
    
    17_097762 ch11.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 259
    
    Chapter 11: Mashing It Up with Web Services

    Install this bookmarklet to fetch the cache for the webpage you are browsing.

    
    
    2.
    
    Browse to get_s3_cache.php and you should see something like the page shown in Figure 11-9.
    
    Figure 11-9
    
    3.
    
    Drag and drop the “Fetch my del.icio.us cache for this page” link to your browser’s toolbar to install the bookmarklet. To test it, browse to one of the bookmarked pages you know you have a cache for, and click the bookmarklet. You should immediately be redirected to your cache of the page on Amazon S3.
    
    259
    
    17_097762 ch11.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 260
    
    Part III: Mashups and Remixes How It Works The first thing get_s3_cache.php does is check for the presence of a URL in a query string. If the URL is there, the program converts the URL to an MD5 hash, which determines the key name for the file on Amazon S3 (if it exists), and then redirects you to the file at BUCKET_URL, which is of course your cache file bucket at Amazon: //amazon s3 bucket rest url define(‘BUCKET_URL’,’http://negatendo_delcache.s3.amazonaws.com/’); //redirect to the cache if url is specified if (isset($_GET[‘url’])) { $file_key = md5($_GET[‘url’]); Header(“Location: “.BUCKET_URL.$file_key); } else { ... the rest of the code ... }
    
    It is the bookmarklet itself that sends whatever URL you’re currently browsing as a query string to this page, and if no query string is provided to the page, it conveniently gives you the bookmarklet link to install: [email protected] Rally Poster 1.0 Brett O’Connor {ec8030f7-c20a-464f-9b0e-13a3a9e97384} 1.5 1.5.0.*
    
    This string is the GUID, or Globally Unique Identifier, that represents Firefox as a target application for the extension. If you developed this extension for other Mozilla software, the GUID for those applications and their corresponding supported version information would appear here. The install manifest is capable of holding a lot more useful information about your extension, including an extended description of what it does, information for downloading updates to the extension automatically, a full list of creators and contributors, and so forth. If you like, you can read about everything that can possibly go into an install manifest at http://developer.mozilla.org/en/docs/install.rdf. Another important file to note that exists in the root directory of the rallypost extension is the chrome.manifest file. This is the chrome registry file, which maps the chrome package names to the location of the packages in the installed extension. Basically, the chrome registry shows Firefox what exists where and how it should be put together. Chrome is a word you will hear a lot when dealing with extensions. It is the blanket term for the various user interface and scripting entities within a Mozilla extension or application. Inside a chrome package, you will typically find the following groups of elements, called chrome providers: ❑
    
    content: Usually made up of the XUL and JavaScript code that forms the user interface and
    
    functionality of an extension. ❑
    
    locale: Holds files containing localized wording and other content meant to make an extension
    
    portable across languages and locales. ❑
    
    skin: Holds the appearance elements for the extension, which is usually made up of CSS files and images.
    
    If you look at the contents of rallyposter’s chrome.manifest file, you will see that each of these three chrome providers is mentioned along with the packagename, or short name for your extension, and some of the corresponding local directories inside rallyposter: content locale
    
    rallyposter rallyposter
    
    content/ en-US locale/en-US/
    
    273
    
    19_097762 ch12.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 274
    
    Part IV: Mashups Applied: A Research Project Hub skin rallyposter classic/1.0 skin/ overlay chrome://browser/content/browser.xul chrome://rallyposter/content/firefoxOverlay.xul style chrome://global/content/customizeToolbar.xul chrome://rallyposter/skin/overlay.css
    
    For the locale and skin chrome providers, an additional element denotes which locale or which skin should be affected. If you intend to provide additional localizations for your extensions, or have it include different appearance elements for different skins (did you know you can skin Firefox?), then you would point to them with additional lines in chrome.manifest. Before you take a look at the contents of the directories mentioned alongside each chrome provider, note the last two lines in the chrome registry: content rallyposter content/ locale rallyposter en-US locale/en-US/ skin rallyposter classic/1.0 skin/ overlay chrome://browser/content/browser.xul chrome://rallyposter/content/firefoxOverlay.xul style chrome://global/content/customizeToolbar.xul chrome://rallyposter/skin/overlay.css
    
    The overlay line states that the normal chrome of the web browser (chrome://browser/content/ browser.xul) should be combined with rallyposter’s firefoxOverlay.xul’s XUL. The style line similarly states that the browser’s usual toolbar XUL (chrome://global/content/customize Toolbar.xul) should be combined with the CSS found in rallyposter’s skin/overlay.css file. Just like with the chrome providers, you can include mentions to multiple overlay and style overlays. Next, take a look at the firefoxOverlay.xul file in the content directory. This file is combined with the main Firefox web browser user interface via the chrome registry. When this happens (typically when the chrome is reloaded, such as on a browser restart), the interface elements defined here are brought in. As you can see, XUL is good old XML, and if you pick through it enough, you’ll probably see elements you already recognize. For example, note the references to the overlay.css file in the skin directory, as well as the overlay.js file inside the content directory:
    
    274
    
    19_097762 ch12.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 275
    
    Chapter 12: Collecting References with a Custom Firefox Plug-In
    
    Instead of having to specify the full path to each of these files, firefoxOverlay.xul uses a URL-like reference known as the chrome URL, such as chrome://rallyposter/skin/overlay.css. The chrome manifest has specified the contents of the rallyposter package, so if you want to reference anything inside that package, just use the chrome://rallyposter/ URL. Next, the chrome URL is used in an element called :
    
    The is an XUL element that references a list of localized strings from property files. When the extension is loaded, it automatically associates the browser’s language with which language’s property files it should load. So, although the chrome URL to the rallyposter.properties file in the locale directory (appearing in the src attribute for ) would technically be chrome://rallyposter/locale/en-US/rallyposter.properties, the en-US portion, known as the language code for the particular localization, is determined and handled by the browser and extension automatically. If you look at the rallyposter.properties file in your editor, you will see a list of name-value pairs representing various strings that are used in the extension: helloMessage=Hello World! helloMessageTitle=Hello prefMessage=Int Pref Value: %d
    
    275
    
    19_097762 ch12.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 276
    
    Part IV: Mashups Applied: A Research Project Hub These strings are loaded as a JavaScript object and used in the overlay.js code, including the portion that displays the Hello World! alert (in bold): var rallyposter = { onLoad: function() { // initialization code this.initialized = true; this.strings = document.getElementById(“rallyposter-strings”); }, onMenuItemCommand: function(e) { var promptService = Components.classes[“@mozilla.org/embedcomp/promptservice;1”] .getService(Components.interfaces.nsIPromptService); promptService.alert(window, this.strings.getString(“helloMessageTitle”), this.strings.getString(“helloMessage”)); }, onToolbarButtonCommand: function(e) { // just reuse the function above. you can change this, obviously! rallyposter.onMenuItemCommand(e); } }; window.addEventListener(“load”, function(e) { rallyposter.onLoad(e); }, false);
    
    The onMenuItemCommand() and onToolbarButtonCommand() functions summon the alert, by onToolbarButtonCommand() simply calling onMenuItemCommand(). The XUL that actually changes the Firefox user interface appears near the end of the firefoxOverlay.xul file:
    
    276
    
    19_097762 ch12.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 277
    
    Chapter 12: Collecting References with a Custom Firefox Plug-In The and elements represent the Firefox menus and toolbar, respectively. The id attributes in bold are actually special ids that are a standard part of the Firefox chrome. When you reference an id that already exists in this manner, the XUL you include is added to the Firefox XUL. The onMenuItemCommand() and onToolbarButtonCommand() functions are the values for the oncommand attributes of both user interface elements. When a user interacts with the elements, these functions are called from the overlay.js file, and the alert appears. One additional thing to check out in firefoxOverlay.xul is the way that the label and tooltiptext attributes are set using special variables, as shown in bold:
    
    These variables correspond to the other localization file, called rallyposter.dtd. This is a Document Type Definition (DTD) file, which defines localized strings for XUL markup. To add localized strings to your XUL directly, add entries to this file. A great deal of an average Firefox extension is made up of the files and architecture needed for localizing the extension for different languages and regions. It may seem like it’s a lot of unnecessary work from the standpoint of the Rally Poster extension, but if you go on to write other Firefox extensions and release them to the general public, you will do well to plan ahead and make the most of extension localization. Even if you aren’t multilingual, simply planning your architecture in advance to handle translations of your software is a good idea when it comes to extension development (or software development in general). Thanks to modern operating systems, computer software is almost instantly global. If you don’t localize now, or at least plan on it, you may end up having to do a lot more extra work or pay a localization company thousands of dollars in redevelopment costs. If it’s going to be serious software, always plan to localize. The overlay.css file inside the skin directory contains standard CSS markup used to position things like the toolbar button inside the chrome. The graphic for the toolbar button is also kept inside the skin directory. The defaults directory contains the code and content necessary for storing extension preferences. You won’t be using any preferences with this extension, but this is where you’ll work if you add them later or with your own Firefox extensions. Entire books could be (and have been) written on the intricacies and capabilities of the Mozilla extension architecture. Don’t worry about understanding it all right away. The important thing is that you know what makes up an extension, so that in the next section of this chapter, you can alter the JavaScript and XUL to fit your needs for the Rally Poster extension.
    
    277
    
    19_097762 ch12.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 278
    
    Part IV: Mashups Applied: A Research Project Hub
    
    Creating the Rally Poster User Interface Next you need to create the user interface from which users of the Rally Poster extension will save bookmarks to your del.icio.us. This interface should feature the usual del.icio.us bookmark fields, such as places to enter the bookmark URL, a title, and an extended description, as well as ensure that the only tags used are appropriate for the project. Finally, the interface should be able to grab the title and URL for whatever page the browser has currently landed on. It would be possible write such an interface entirely in XUL and JavaScript, and it would probably look pretty good that way because as it would appear to exactly match the Firefox look and feel. But it would be a lot of work, so instead, you are going to take the same shortcut that del.icio.us takes with its own extension and actually create the posting interface as a web-based interface. (The pop-up that appears when you press the Tag button in the del.icio.us Firefox extension is actually an abridged version of the standard del.icio.us posting interface brought up in a pop-up window.) Designing your own interface enables you to make changes to it (or disable it completely when the motorcycle rally is over) without having to roll out a brand new extension. Plus, while XUL is pretty cool, it’s still not as easy to develop in as HTML and PHP, at least for your purposes, especially because you’ve already designed a PHP library to interact with the del.icio.us API.
    
    Try It Out
    
    Creating the Interface Web Page
    
    Before you place this interface inside the Rally Poster extension, you’ll first want to create it as a standalone PHP web page. You will later design the Rally Poster extension to open this web page in a browser pop-up window, providing the URL and title of the current page as a query string. So, you want to make sure the web page URL and title fields are pre-filled in the form if they exist in the reserved PHP $_GET variable.
    
    1.
    
    Create a new file inside the rally2007 directory called save_popup.php, and start your code with the usual elements needed to use the delicious_mashups.inc.php you wrote in Chapter 7:
    
    
    
    5.
    
    Now for the HTML portion of this interface. The $response variable gets set if an attempt at saving a link has been made. If it’s not set, the HTML form to save a link will be displayed. Otherwise, the value for $response will be displayed, showing either an error or successful response. After closing your PHP code, complete save_popup.php by adding the following markup in full:
    
    
    
    279
    
    19_097762 ch12.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 280
    
    Part IV: Mashups Applied: A Research Project Hub Save to Rally Website Save this page to the Rally project website.

    URL:	” />
    Notes:
    Category:	Vendors Restaurants Hotels Services 280 19_097762 ch12.qxp 12/7/06 9:26 PM Page 281 Chapter 12: Collecting References with a Custom Firefox Plug-In Sponsor Other

    [ Close this Window ]
    
    6.
    
    Browse to save_popup.php in your web browser. You should see something like Figure 12-8.
    
    Figure 12-8
    
    7.
    
    The Rally Poster extension will send a URL and link to this interface so that users won’t have to enter that information. You can provide a URL and link for this page with a query string, and it will be applied to the appropriate form values. Browse to save_popup.php while specifying a value for location and title, such as with the following URL:
    
    http://localhost/rally2007/save_popup.php?location=http://www.google.com &title=Google
    
    281
    
    19_097762 ch12.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 282
    
    Part IV: Mashups Applied: A Research Project Hub You should then see the page load with the URL and title form fields already filled out, as shown in Figure 12-9.
    
    Figure 12-9
    
    8.
    
    Test saving the bookmark to del.icio.us by typing something in the Notes field and then pressing Save. You should see a confirmation that the bookmark was saved. Then, browse to your del.icio.us and note how the bookmark was saved with the rally2007 tag as well as a tag for whatever category was selected in the Category drop-down list. This way, anyone using the extension will be restricted to keeping things organized by the tags you have configured in the Category drop-down list.
    
    How It Works No concepts are included with save_popup.php that you haven’t touched on already in this book. A standard HTML form is used to interact with the del.icio.us API, which in this case involves saving a new bookmark. Here are some highlights of the code. Starting with the HTML portion, note how the URL and Description text fields are pre-set with values in the URL (if they exist) (which will be an essential part of the interface when it is integrated with the Firefox extension because the extension will set these values to whatever page is active in the browser): URL: ” />
    
    If you want to add or take away categories for posted bookmarks, which become tags associated with them, you would change the Category code. Category: Vendors Restaurants Hotels Services Sponsor Other
    
    There are two user interface elements that call the JavaScript window.close() method. The first is triggered by the cancel button in the posting form:
    
    And the second is triggered by a link that appears after saving a bookmark: [ Close this Window ]
    
    Because this interface will appear in a pop-up browser window, and not be browsed to normally, users will need an easy way to exit the pop-up window. These elements will allow them to do so. If you try the buttons now they will not work because a window that isn’t opened by JavaScript can’t be closed by JavaScript. When this interface appears as a pop-up later, however, it will work. Moving on to the PHP code that executes if the Save button is clicked, two variables are created. $response contains a status message that will be printed to the screen after a successful or failed API call, and $arguments contains the full string of arguments to be sent with the del.icio.us API call: $response = ‘’; //will contain the success/error message from posting //assemble API method arguments $arguments = ‘’;
    
    283
    
    19_097762 ch12.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 284
    
    Part IV: Mashups Applied: A Research Project Hub $arguments is then assigned each of the possible values sent by the posting form. Each value in the query string is passed-through the urlencode() method to ensure safe travel: //url if ($_POST[‘url’] != “”) $arguments .= “&url=”.urlencode($_POST[‘url’]); else die(“Sorry - URL is required!”); //description if ($_POST[‘description’] != “”) $arguments .= “&description=”.urlencode($_POST[‘description’]); else die(“Sorry - title is required!”); //extended $arguments .= “&extended=”.urlencode($_POST[‘extended’]);
    
    The &tags argument receives two values, separated by a space — the DEFAULT_TAG constant and then whichever category was selected in the Category:
    
    //tags - consists of the default tag and whatever category was selected $arguments .= “&tags=”.urlencode(DEFAULT_TAG.” “.$_POST[‘category’]);
    
    The API call is executed and $response is given a favorable or unfavorable value, which is then displayed in the HTML when it reloads: //save the link to del.icio.us do_api_call(‘/posts/add?’,$arguments); //set $response to indicate whether we got a favorable response or not if ($api_return[‘status’] != 200) $response = “Sorry, but there was an error. Code: “.$api_return[‘status’]; else $response = “Saved successfully!”;
    
    You will revisit save_popup.php in a later chapter to make some improvements, but for now this is a good start towards a simple and secure way to have the motorcycle rally collaborators save bookmarks to your del.icio.us account. The next step will be to integrate this interface with your existing Rally Poster extension skeleton architecture.
    
    Completing the Rally Poster Extension Thanks to your earlier work with the web-based Extension Wizard tool, the Rally Poster extension is almost finished. Only two minor changes have to be made, which you’ll do in this section. First, you’ll change some of the wording that appears inside the extension to make it relate to the extension’s purpose. Then you’ll change the JavaScript code so that instead of displaying a Hello World! message, clicking the extension’s toolbar button or selecting it from the Tools menu launches a new, sized window containing the save_popup.php interface with the URL and Title fields already containing the relevant data for the current web address.
    
    284
    
    19_097762 ch12.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 285
    
    Chapter 12: Collecting References with a Custom Firefox Plug-In Try It Out
    
    Finishing Up the Extension
    
    You want to change the user interface strings from the generic Your Localized Menu Item and Your Toolbar Button to something more informative. Because these strings are a part of the extensions XUL, you’ll edit the XUL DTD file found in the localization files.
    
    1.
    
    Open rallyposter.dtd, which can be found in the EN-us subdirectory of rallyposter’s locale directory, and change its contents to match the following:
    
    
    
    2.
    
    Change the extension’s JavaScript code to launch save_popup.php instead of displaying the Hello World! alert. To do this, open overlay.js from the Rally Poster content folder and replace the content of the onMenuItemCommand() method with the following:
    
    var rallyposter = { onLoad: function() { // initialization code this.initialized = true; this.strings = document.getElementById(“rallyposter-strings”); }, onMenuItemCommand: function(e) { var location, title; var savePopupURL = “http://localhost/rally2007/save_popup.php”; var browser = window.getBrowser(); var webNav = browser.webNavigation; if(webNav.currentURI) location = webNav.currentURI.spec; else location = gURLBar.value; if(webNav.document.title) title = webNav.document.title; else title = location; this.openPopupWindow(savePopupURL+”?location=”+encodeURIComponent(location)+ “&title=”+encodeURIComponent(title), 700, 400); }, onToolbarButtonCommand: function(e) { // just reuse the function above. you can change this, obviously! rallyposter.onMenuItemCommand(e); }, }; window.addEventListener(“load”, function(e) { rallyposter.onLoad(e); }, false);
    
    3.
    
    Set the savePopupURL variable to the full, browsable path to save_popup.php. To use this extension in a production environment, you would want to serve save_popup.php from a public web server and not your localhost.
    
    285
    
    19_097762 ch12.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 286
    
    Part IV: Mashups Applied: A Research Project Hub 4.
    
    Insert an additional method, openPopupWindow(), as shown in the following shaded code:
    
    var rallyposter = { onLoad: function() { // initialization code this.initialized = true; this.strings = document.getElementById(“rallyposter-strings”); }, onMenuItemCommand: function(e) { var location, title; var savePopupURL = “http://localhost/rally2007/save_popup.php”; var browser = window.getBrowser(); var webNav = browser.webNavigation; if(webNav.currentURI) location = webNav.currentURI.spec; else location = gURLBar.value; if(webNav.document.title) title = webNav.document.title; else title = location; this.openPopupWindow(savePopupURL+”?location=”+encodeURIComponent(location)+”&title =”+encodeURIComponent(title), 700, 400); }, onToolbarButtonCommand: function(e) { // just reuse the function above. you can change this, obviously! rallyposter.onMenuItemCommand(e); }, openPopupWindow : function(aPath, aWidth, aHeight){ //make it center var width = aWidth, height = aHeight; var left = parseInt((screen.availWidth/2) - (width/2)); var top = parseInt((screen.availHeight/2) - (height/2)); var props = “width=”+width+”,height=”+height+”,left=”+left+”,top=”+top+”,menubar=0,toolbar=0, scrollbars=1,location=0,status=1,resizable=1”; var newWindow = window.open(aPath, “”, props); newWindow.focus(); } }; window.addEventListener(“load”, function(e) { rallyposter.onLoad(e); }, false);
    
    5.
    
    Test your changes to the Rally Poster extension. The quickest and safest way to have your changes take effect is to restart Firefox. Then browse to a web page and choose Post to the Rally Website from the Tools menu. The save_popup.php interface will appear in a new window, centered on the screen, containing information about the website’s URL and title, similar to Figure 12-10. Save the link or click Cancel to exit the interface.
    
    If you prefer using the toolbar button, you should find it works the same way.
    
    286
    
    19_097762 ch12.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 287
    
    Chapter 12: Collecting References with a Custom Firefox Plug-In
    
    Figure 12-10
    
    How It Works The most significant change made to the extension involved altering the functionality of the onMenuItemCommand() method. Most of this code is pretty standard JavaScript with a few methods unique to the extension architecture. Take a look at onMenuItemCommand(). First, you’ll see that some initial variables are created for the incoming location (URL) and title values. Additionally, savePopupURL is assigned the location of save_popup.php: var location, title; var savePopupURL = “http://localhost/rally2007/save_popup.php”;
    
    The window.getBrowser() method gives to browser the active browser window object: var browser = window.getBrowser();
    
    287
    
    19_097762 ch12.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 288
    
    Part IV: Mashups Applied: A Research Project Hub Next, a special XUL property of browser, called webNavigation is given to the webNav variable: var webNav = browser.webNavigation; webNavigation contains most of the information about where the browser is browsing to at any given
    
    moment. Next, the current URL and document title are pulled from webNav: if(webNav.currentURI) location = webNav.currentURI.spec; else location = gURLBar.value; if(webNav.document.title) title = webNav.document.title; else title = location;
    
    Then the openPopupWindow() method you created is called with arguments consisting of the final URL to access, which is the location of save_popup.php, and the escaped values of location and title as query strings, as well as the pixel-sized width and height dimensions for the window it is to summon: this.openPopupWindow(savePopupURL+”?location=”+encodeURIComponent(location)+”&title =”+encodeURIComponent(title), 700, 400);
    
    Most of the openPopupWindow() code is used to determine the user’s current screen dimensions and then center a new window inside of it, which is summoned using the standard JavaScript window.open() method: //make it center var width = aWidth, height = aHeight; var left = parseInt((screen.availWidth/2) - (width/2)); var top = parseInt((screen.availHeight/2) - (height/2)); var props = “width=”+width+”,height=”+height+”,left=”+left+”,top=”+top+”,menubar=0,toolbar=0,sc rollbars=1,location=0,status=1,resizable=1”; var newWindow = window.open(aPath, “”, props); newWindow.focus();
    
    That’s all there is to creating this extremely simple but useful Firefox extension. The last step is to properly package the extension as an XPI file and then deploy it to your fellow coordinators.
    
    Deploying the Rally Poster Extension Because this is a hypothetical project, this section only lightly touches on what must be done to package and release a Firefox extension. The process involves renaming, copying, and archiving several parts of the existing extension architecture. Additionally, it involves a change to the chrome manifest to indicate this new file storage arrangement. There are several good tutorials for how to go about doing this on the web.
    
    288
    
    19_097762 ch12.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 289
    
    Chapter 12: Collecting References with a Custom Firefox Plug-In If you’re using Windows, check out the tutorial at www.borngeek.com/firefox/toolbar-tutorial/ ch_7.html. It describes how files should be rearranged and archived and includes a handy script to make the process much easier. If you’re using a UNIX-like system, such as Mac OS X, you’re encouraged to try out the build.sh shell script that came with the prepackaged extension downloaded from the Extension Wizard website. After some minor configuration, this script will do all of the legwork involved in properly packaging the extension. After you have the XPI file, it’s just a matter of putting it on the web and directing Firefox users to it. Providing the web server you put it on is configured to properly handle the XPI file type, when a Firefox user browses to your packaged extension, they should then be instantly prompted to install it.
    
    Summar y Now that you’ve written and deployed the Rally Poster extension to everyone on the motorcycle rally organization team, your del.icio.us bookmarks will begin to fill up with dozens of bookmarks to vendors, restaurants, hotels, advertisers, and other useful resources. Because you’ve written your extension to standardize the tags your fellow coordinators will use, you’ll be able to create a web page from which you and the other coordinators can view, sort, and further make use of all of these gathered resources. It’s time to move on to creating this front end. With it, you will aggregate, organize, and display the references in a way that will hopefully be both good looking and functional. Meanwhile, del.icio.us will continue to serve as the silent and useful back-end to the entire system.
    
    Exercises You can expand on the Rally Poster extension in many ways. Try your hand at the following exercises to learn how.
    
    1.
    
    The Rally Poster extension allows its users to select only one category for each bookmark saved. Of course, because del.icio.us allows you to add many tags to a bookmark, it would make a lot of sense to let rally coordinators choose more than one category at a time. What would be some ways to address this while keeping the possible choices as limited as possible?
    
    2.
    
    Say you wanted to add French language (language code fr) support to the Rally Poster extension. What files and directories would you need to add, and what changes would you need to make to do this?
    
    3.
    
    Say you have fifty or so event coordinators using your Rally Poster extension. After the rally ends, how are you going to stop people from continuing to post resources to your del.icio.us? Or, what changes would you need to make to start collecting resources for next year’s rally?
    
    289
    
    19_097762 ch12.qxp
    
    12/7/06
    
    9:26 PM
    
    Page 290
    
    20_097762 ch13.qxp
    
    12/7/06
    
    9:27 PM
    
    Page 291
    
    13 Aggregating, Organizing, and Displaying Your Research With your newly created Firefox extension, you’ve now got an easy way for you and the other rally organizers to collect the web resources needed to coordinate this year’s motorcycle rally. Browsing through and sorting these references directly via del.icio.us probably isn’t an ideal way to interpret and organize this data, especially because you’re going to want to continue to keep this tool as clean and as easy to use as possible. So instead, you’re going to create a tool to interpret and organize your collected research into a single project coordination home page. In this chapter, you’ll call on what you know about fetching data from del.icio.us and implement some simple PHP, XHTML, and CSS techniques to set the stage for a front-end home page to your del.icio.us-powered organizational tool. Users of this interface will be able to not only browse a list of references, but also narrow down the list based on the categories you defined during the Firefox extension development phase. Additionally, you and the other coordinators will be able to quickpost a bookmark from this page if for some reason the Rally Poster extension is unavailable. The tasks you perform in this chapter will help you present your research in a clearer, easier to understand, and less cluttered fashion. The final product will also have its own unique aesthetic that will present the interface as a single resource-gathering tool with its own unique functionality and feel — even though at its core it’s a simple remixing of data pulled from del.icio.us. Think of it as a customized version of del.icio.us for the unique purposes of your project.
    
    Basic Page Layout First you will create the basic layout and functionality for the rally project’s home page. The home page will present the collected references for the project as well as allow users to filter the references displayed by category. All of this will be driven primarily by PHP and will use the project’s RSS feeds at del.icio.us as the page’s data source.
    
    20_097762 ch13.qxp
    
    12/7/06
    
    9:27 PM
    
    Page 292
    
    Part IV: Mashups Applied: A Research Project Hub Try It Out
    
    Creating the Project Home Page
    
    Because this will be the main page for the rally project, you will code it as an index.php file in the rally2007 directory of your htdocs area.
    
    1.
    
    Create index.php and begin with the following source code:
    
    Be sure and change YOURNAME in the BASE_TAG_FEED_URL constant to whatever your del.icio.us login is, and set DEFAULT_TAG to the same value as its equivalent in the save_popup.php page you made in Chapter 12.
    
    7.
    
    After closing your PHP code block, begin your XHTML markup with the following elements:
    
    Rally 2007
    
    8.
    
    Begin the portion of the page with a little descriptive text as well as a drop-down list that will enable users to select which category of links they are browsing:
    
    Rally 2007

    Here’s the collected web references for the upcoming rally. You can use the “Category” dropdown to filter them by category. Feel free to add a reference using the Firefox extension provided or the “Add a Bookmark” link. Please contact me if you have any questions.

    Category: Filter by Category... All Bookmarks Vendors Restaurants Hotels Services Sponsor Other (Currently browsing .)
    
    293
    
    20_097762 ch13.qxp
    
    12/7/06
    
    9:27 PM
    
    Page 294
    
    Part IV: Mashups Applied: A Research Project Hub 9.
    
    Add the XHTML markup and PHP code to generate an unordered list of each bookmark pulled from the RSS feed, and then end the XHTML markup:
    
    
    • Category:
    
    
    10.
    
    294
    
    Browse to index.php. You should see something similar to Figure 13-1.
    
    20_097762 ch13.qxp
    
    12/7/06
    
    9:27 PM
    
    Page 295
    
    Chapter 13: Aggregating, Organizing, and Displaying Your Research
    
    Figure 13-1
    
    If you select a different category from the Category: drop-down list, or click a category link that appears with each bookmark, the view will change to show only references in that category, as in Figure 13-2.
    
    295
    
    20_097762 ch13.qxp
    
    12/7/06
    
    9:27 PM
    
    Page 296
    
    Part IV: Mashups Applied: A Research Project Hub
    
    Figure 13-2
    
    How It Works In this portion of the project, the del.icio.us RSS feeds provide value beyond that of a feed reader and become available and easy-to-parse data sources. Each view on this page is a different RSS feed. When you choose to view the references under a single category, a new RSS feed is fetched, featuring only references with that tag pulled from del.icio.us and processed by the script. You may be wondering why the RSS feed was chosen over the del.icio.us API in this instance. Using an RSS feed is the friendly data download method and causes a lot less strain on del.icio.us than making API calls. Additionally, the del.icio.us API, at least at this time, does not support fetching data for multiple clustered tags. It’s possible to design a method to process bookmark tags after downloading them from the API, but for now the convenience of the RSS feed will suit this project just fine. To determine which feed it should select, the script checks for the presence of the category query variable and, if it exists, assigns it to the $cluster_tag variable: //determine if an additional tag needs to be a part of the RSS feed url if (isset($_GET[‘category’]) && $_GET[‘0category’] != ‘’) $cluster_tag = “+”.$_GET[‘category’]; else $cluster_tag = ‘’;
    
    296
    
    20_097762 ch13.qxp
    
    12/7/06
    
    9:27 PM
    
    Page 297
    
    Chapter 13: Aggregating, Organizing, and Displaying Your Research A cluster is a common name for a combination of two or more tags. As you may remember, you can denote clusters of tags in del.icio.us URLs, including those for RSS feeds, by separating multiple tags with the plus (+) symbol. If the $_GET[‘category’] variable exists, $cluster_tag is preceded by a plus (+) symbol. The final RSS feed URL is then assembled as a combination of the base RSS feed URL you provide as a constant, the standard default tag for this project which is also a constant, and the $cluster_tag variable (which will be blank if no specific category was specified): $feed_url = BASE_FEED_URL.DEFAULT_TAG.$cluster_tag; $rss = fetch_rss($feed_url);
    
    The final feed URL might look something like this: http://del.icio.us/rss/YOURNAME/rally2007+Vendors
    
    Or, if there was no cluster tag, like this: http://del.icio.us/rss/YOURNAME/rally2007
    
    Following the fetch_rss() call, the $bookmarks variable is given the returned RSS items: $bookmarks = $rss->items;
    
    Skip down to where the $bookmarks variable is processed. You will see that each bookmark is created as a list item in an unordered list:
    • Category:
    
    
    297
    
    20_097762 ch13.qxp
    
    12/7/06
    
    9:27 PM
    
    Page 298
    
    Part IV: Mashups Applied: A Research Project Hub
    $this_category is provided the category for the bookmark — which is of course the other (nondefault) tag for the bookmark — via the get_category() function you wrote.
    
    The get_category() function takes a parameter containing the space-separated list of tags for a bookmark (provided by $bookmark[‘dc’][‘subject’]), uses the PHP explode() function to break it into array based off the space delimiter, and then returns the first tag from that array that does not match DEFAULT_TAG: //returns the tag list minus the default tag function get_category($tag_list) { //break the tag list into an array $tags = explode(“ “,$tag_list); //return the first tag that isn’t DEFAULT_TAG (if you allow multiple //tags you’ll want to change this to return an array of remaining tags) foreach ($tags as $tag) { if ($tag != DEFAULT_TAG) { return $tag; break; } } }
    
    Going back to the portion of code that generates the unordered list, notice that a link is created from the category name back to this page, with the category name as a query variable:
    • Category:
      
      298
      
      20_097762 ch13.qxp
      
      12/7/06
      
      9:27 PM
      
      Page 299
      
      Chapter 13: Aggregating, Organizing, and Displaying Your Research
    
    
    Clicking this link will reload the page with an RSS feed containing clustered tag data. Another route of seeing the bookmarks for a particular category is to select the category from the dropdown menu that appears near the top of the page. This web form is designed so that it is automatically submitted when an item is selected from the drop-down menu: Category: Filter by Category... All Bookmarks Vendors Restaurants Hotels Services Sponsor Other (Currently browsing .)
    
    Selecting All Bookmarks returns an empty value, which will help ensure that no tag-cluster RSS URL is parsed if the user simply wishes to see all the bookmarks under the default tag.
    
    Adding Styles The home page is beginning to see some functionality, but by no means can it be called attractive. It’s time to spice it up by bringing in some style sheet formatting.
    
    Try It Out
    
    Implementing a Style Sheet
    
    In this example, you will create an external style sheet that will not only be included by the index.php page, but also by save_popup.php (as well as anything else you create), therefore giving the entire application a unified look and feel. You’ll also throw a little PHP in the styling mix to extend the CSS capabilities.
    
    1.
    
    In the rally2007 folder, create a file called stylesheet.css. You also might want to keep index.php and save_popup.php handy because you will be making some changes there as well.
    
    299
    
    20_097762 ch13.qxp
    
    12/7/06
    
    9:27 PM
    
    Page 300
    
    Part IV: Mashups Applied: A Research Project Hub 2.
    
    Start stylesheet.css with some markup related to the overall formatting of the page body and anchors:
    
    body { font-family: Helvetica, Arial, Sans-Serif; font-size: 18px; color: #000; background-color: #FFF; margin-left: 2em; margin-right: 2em; } a:link { text-decoration: none; font-weight: bold; color: #693; } a:visited { text-decoration: none; font-weight: bold; color: #9C6; } a:hover { text-decoration: underline; font-weight: bold; color: #F33; }
    
    3.
    
    Add the following code, which will format the
    and its contained
    • elements:
      
      ul { list-style-type: none; margin: 0; padding: 0; } li { border: 1px; border-top: 0; border-color: #66C; border-style: dotted; margin-left: 0; padding: 1em; }
      
      300
      
      20_097762 ch13.qxp
      
      12/7/06
      
      9:27 PM
      
      Page 301
      
      Chapter 13: Aggregating, Organizing, and Displaying Your Research 4.
      
      Add the following class declaration (the purpose behind this particular style class will be revealed shortly):
      
      .li_alternate { background-color: #FFC; }
      
      5.
      
      Add the following code, which will style the header elements as well as bring in two other class styling elements for the category select form in index.php:
      
      h1 { font-family: Times New Roman, Times, Serif; font-weight: bolder; color: #666; } h3 { color: #666; font-style: italic; } .category_form { color: #FFF; background-color: padding: 5px; }
      
      #66C;
      
      .category { color: #666; }
      
      6.
      
      Go to save_popup.php, or open it in your editor if you haven’t already. Between the elements that appear below the main block of PHP code, add the following markup, which will bring the style sheet into save_popup.php:
      
      Save to Rally Website
      
      All you’ve done is change the web page that the extension uses, so there is no need to change the Firefox extension itself.
      
      301
      
      20_097762 ch13.qxp
      
      12/7/06
      
      9:27 PM
      
      Page 302
      
      Part IV: Mashups Applied: A Research Project Hub 7.
      
      Add the link to the style sheet the same way in index.php:
      
      Rally 2007
      
      8.
      
      Keep index.php open and find the category select form inside of it. Wrap it in a element with its class attribute set to the category_form class you created in your style sheet, as shown in the bolded lines:
      
      Category: Filter by Category... All Bookmarks Vendors Restaurants Hotels Services Sponsor Other (Currently browsing .)
      
      9.
      
      Add or change the following bolded lines to the portion of your code that iterates through the bookmarks and outputs them as list items (this includes both CSS and PHP code changes):
      
      
      ”>
      
      302
      
      20_097762 ch13.qxp
      
      12/7/06
      
      9:27 PM
      
      Page 303
      
      Chapter 13: Aggregating, Organizing, and Displaying Your Research Category:
      
      
      10.
      
      Browse to the index.php page in rally2007. You should see something quite different this time, including a new look for the unordered list items that features alternating row colors for each item. It should look something like Figure 13-3.
      
      Figure 13-3
      
      11.
      
      Save a bookmark using the Rally extension. You’ll notice that it now has a different look too, as shown in Figure 13-4.
      
      303
      
      20_097762 ch13.qxp
      
      12/7/06
      
      9:27 PM
      
      Page 304
      
      Part IV: Mashups Applied: A Research Project Hub
      
      Figure 13-4
      
      How It Works This book has been pretty light on the CSS discussion up to this point, so perhaps now is a good time to break down at least this one style sheet so the curious among you can see how it comes together to make what you just saw happen. The body declaration styles everything inside the markup tags. This includes right and left 2emsized margins. The em unit in CSS represents the length of the going font, so in this case, it would be 18 pixels times 2 (36 pixels) on each side, as the body font is also declared here to be 18 pixels tall: body { font-family: Helvetica, Arial, Sans-Serif; font-size: 18px; color: #000; background-color: #FFF; margin-left: 2em; margin-right: 2em; }
      
      The next few elements set the styling of the normal, visited, and hover properties of the links of the page. In this case, they are given variations on the light green color, with the hover color being bright red, and the link is only underlined during the hover state: a:link { text-decoration: none; font-weight: bold; color: #693; } a:visited {
      
      304
      
      20_097762 ch13.qxp
      
      12/7/06
      
      9:27 PM
      
      Page 305
      
      Chapter 13: Aggregating, Organizing, and Displaying Your Research text-decoration: none; font-weight: bold; color: #9C6; } a:hover { text-decoration: underline; font-weight: bold; color: #F33; }
      
      Next, the unordered list and list item elements are styled on the page. The usual right margin on such a list is removed by setting the margin and padding values to 0, and the bullets are removed from the list by setting the list-style-type to none: ul { list-style-type: none; margin: 0; padding: 0; }
      
      For each list item, a 1-pixel dotted purple border is added, except at the top (to prevent double borders). Also, setting margin-left to 0 here helps ensure the list items are not indented on the left. The padding setting still puts a lot of space around each list item to make each bookmark prominent on the page. li { border: 1px; border-top: 0; border-color: #66C; border-style: dotted; margin-left: 0; padding: 1em; }
      
      Next, the li-alternate style class is created, which will cause whichever items it styles to have a yellow background color: .li_alternate { background-color: #FFC; }
      
      Go back to the changes you made in index.php. Notice that the modulus arithmetic operator is used to calculate the remainder of the $i variable when divided by two, which is incremented with each bookmark displayed. If calculating the $i modulus returns a value, meaning it is divisible by two, the li_alternate class is applied to the
    • element. This shades every other row in the list.
      ”> Category:
      
      
      In PHP, modulus, represented as a percentage sign (%), will return false if one number ($i) divided by another number (in this case 2) has no remainder. Otherwise, it will return a value, which counts as true in your code. So, for the first
    • element printed, 0 % 2 will equal 0, and therefore the li_alternate class will not be applied. For the next element, 1 % 2 will have a remainder, and li_alternate will be added as an attribute for the
    • element. For the third element, 2 % 2 equals 0, so there is no li_alternate class, and so on, effectively creating alternating row colors. Returning to the style sheet, the header elements and are given styles: h1 { font-family: Times New Roman, Times, Serif; font-weight: bolder; color: #666; } h3 { color: #666; font-style: italic; }
      
      306
      
      20_097762 ch13.qxp
      
      12/7/06
      
      9:27 PM
      
      Page 307
      
      Chapter 13: Aggregating, Organizing, and Displaying Your Research does not occur in index.php, but it does appear in save_popup.php in the “Save this page to the
      
      Rally project website” text. The next entry in the style sheet creates the category_form class, which is used to create the white text and purple background for the category select form that appears near the top of index.php: .category_form { color: #FFF; background-color: padding: 5px; }
      
      #66C;
      
      Finally, each with its class attribute set to be category has its text colored gray, which helps make the category listed under each reference description distinct: .category { color: #666; }
      
      Adding a Quick Posting Form Now you’ll add a way to save bookmarks from the project home page. This way, if rally coordinators don’t have access to the posting extension, such as when they’re using a web browser other than Firefox, they can still add their references.
      
      Try It Out
      
      Creating the Quick Posting Pop-Up Link
      
      Implementing the quick posting form is as easy as making one simple change to index.php. Insert the following shaded markup in the category select form’s element before the tag: Add a Bookmark Category: Filter by Category... All Bookmarks Vendors Restaurants Hotels Services Sponsor Other
      
      307
      
      20_097762 ch13.qxp
      
      12/7/06
      
      9:27 PM
      
      Page 308
      
      Part IV: Mashups Applied: A Research Project Hub (Currently browsing .)
      
      Reload index.php. You should see an Add a Bookmark link in the right portion of the category select form. Clicking it will display the Save pop-up window, just like it did with the Rally Poster extension. Check out Figure 13-5 to see what it looks like. The URL and Title fields must be filled out manually, but otherwise the form should function as usual.
      
      Figure 13-5
      
      How It Works Clicking the Add a Bookmark link essentially calls the same JavaScript code that using the Rally Poster extension does. A pop-up window containing save_popup.php appears and can be used to save a link to the project. Beyond that, everything works exactly as it does with the Firefox extension. Having most of your bookmark-saving interface exist in a web page makes this quite easy to do. This method also mimics the del.icio.us approach to a bookmark posting interface, where a single web form appears and can be utilized in different ways, whether via the posting bookmarklet, the del.icio.us Firefox extension, or some other means.
      
      308
      
      20_097762 ch13.qxp
      
      12/7/06
      
      9:27 PM
      
      Page 309
      
      Chapter 13: Aggregating, Organizing, and Displaying Your Research
      
      Summar y At this point you can take this project in many different directions, depending on your reference-gathering needs. For example, you could design a system to let project members vote on which resources to keep and which to discard. Or you could add additional sorting methods to the page, such as adding the ability to sort bookmarks by date and time, alphabetically, and so forth. You could also apply some of the techniques you used in the earlier mashup projects to display images inline on the project home page, or embed and play audio and video files that are bookmarked directly in the web browser. You could also use additional special tags to add more data to the reference. For example, if you want to cite a source, you could use a tag similar to via:joe. Or, to denote the cost for something, you could tag it with price:200. Of course, just like with the category drop-down list, you could build normal XHTML forms and other user interface elements to enforce and standardize these tags, and the front-end could reinterpret them back into more human-readable values, such as From Joe, or Price Over $200.00. The point is that tags need not only serve as a way to search and organize bookmarks, but they also can carry simple data that expands on information about the resource. In terms of the motorcycle rally, something that might help out the rally coordinators a great deal would be the ability to attach locations and dates to a bookmark. That way, maps and deadlines could be associated with the gathered resources. In the next chapter, you will expand this project to add the ability to collect such data, as well as utilize other web services to present and interact with it.
      
      Exercises Try out these exercises to gain a better understanding of the functionality behind the motorcycle rally project home page.
      
      1.
      
      If you wanted to allow users to apply more than just one category to a bookmark, such as assigning both the Vendors and Services categories to a single reference, describe how you would have to change the rally home page interface.
      
      2.
      
      Continuing with the previous question, what would the RSS feed URL look like in order to provide data for bookmarks tagged with multiple categories?
      
      3.
      
      Aside from using the API or RSS feeds, what’s another method by which you can fetch a project’s bookmarks from del.icio.us?
      
      309
      
      20_097762 ch13.qxp
      
      12/7/06
      
      9:27 PM
      
      Page 310
      
      21_097762 ch14.qxp
      
      12/7/06
      
      9:27 PM
      
      Page 311
      
      14 Bringing in Other Web Services Up to this point, this motorcycle rally coordination mashup has mostly existed in its own space, not really sharing its functionality with any other service besides del.icio.us. It’s time to put an end to that. Especially with a project like this, bringing in other web services can offer a great deal of added functionality. Some of the most impressive mashup projects involve tying together different web applications into something entirely new. In this chapter, you will take some web services provided by Google and Yahoo! and bring them together in the rally coordination home page. Just because Google and Yahoo! are major competitors doesn’t mean you can’t make them both work for you. The collection and presentation of del.icio.us data will still remain the core functionality of this mashup, but the services you use are going to make the whole thing look and function better. The first project in this chapter is a simple one. You will take a calendar from Google’s Calendar service and mix it in with the project home page. A calendar is perfectly suited for such a project and will fit well with the purpose of the rally coordination home page. If other coordinators have their own Google Calendars, they will be able to add the events as well as discuss them. Google will do most of the legwork for this aspect of the project, but you’ll take a quick peek inside to see exactly how it works. In addition, you will preview the Google Calendar API still in development to see what possibilities it might offer in terms of expanding on Google Calendar’s mashup capabilities. Then you will move on to something more sophisticated. You will develop a method to tie saved bookmarks directly to geographical data. For example, when scouting for locations to hold the rally, coordinators can add a link not only to a location’s website, but also a link to its address. You will use the Yahoo! geocoding API to convert this address to latitude and longitude coordinates. These will be saved as additional tags along with the bookmark, a process called geotagging. Then, you will enhance the home page to search for these geotags and, if they exist, implement a feature that will display a map pinpointing the bookmarked location, thanks to the Yahoo! Maps Beta API. Implementing these two features will drastically enhance the rally project home page and serve to make it one of the more unique projects in this book. The nice thing about being a mashup developer is that you can use the best of the web for your own purposes, even if it involves using services from entirely different companies.
      
      21_097762 ch14.qxp
      
      12/7/06
      
      9:27 PM
      
      Page 312
      
      Part IV: Mashups Applied: A Research Project Hub
      
      Adding a Calendar Google Calendar is an impressive entry in the field of web-based calendars that brings an ease-of-use more typical of desktop calendars, like iCal or Outlook, than what you normally would find on the web. You can even add new events in a fairly unique way, called the quick add feature. You type a phrase such as “dinner with Michelle at 6pm Tuesday,” and Google Calendar will interpret the phrase into a calendar item. Google Calendar features a tight integration with the rest of Google’s web-based office applications, such as Gmail, as well as several very useful sharing and social features that enable you to publish, share, and discuss calendar events in a way that is fairly unique in the world of web-based calendars.
      
      Try It Out Implementing a Google Calendar 1. If you haven’t yet done so, sign up with Google Calendar at www.google.com/calendar. You’ll be taken immediately to your own personal calendar.
      
      2.
      
      For this project you don’t want your private calendar data to appear on the project home page, so you must create a new, additional calendar specifically meant for the purpose of organizing the rally. The quickest way to do this is to look for the My Calendars area near the lower-left corner of the main Google Calendar interface. There, you should see your calendar listed, as well as a blue button with a plus (+) symbol inside, as shown in Figure 14-1.
      
      Figure 14-1
      
      3.
      
      Click the + button next to My Calendars to go to the Create New Calendar page, shown in Figure 14-2. Here, you can create a calendar specifically for planning the motorcycle rally. Give the calendar a name, description, and location. Also, set the sharing settings for the calendar to “Share all information on this calendar with everyone.” This will make it easier to publish the calendar to the rally project homepage. You also have the option of sharing the calendar with other specific Google Calendar users via the “Share with specific people:” settings (not shown in the figure). You can even enable certain people with the capability to edit the calendar’s data. If you really are someday coordinating a team effort like this motorcycle rally project, this might be a very useful feature.
      
      4.
      
      312
      
      Take a few moments to add some sample events to the rally calendar you just created. If you look at the list of calendars, you will see check boxes by both your personal calendar and the new rally calendar. It might help to hide your personal calendar by clearing the check box by it before adding new events. That way, it will ensure events that you add will be applied to the right calendar. Try out the Quick Add feature as well: Type something like meet and greet with other coordinators this Friday 7 pm, press Return, and watch the magic.
      
      21_097762 ch14.qxp
      
      12/7/06
      
      9:27 PM
      
      Page 313
      
      Chapter 14: Bringing in Other Web Services
      
      Figure 14-2
      
      5.
      
      After you’ve added a few events, it’s time to get the code you need for the rally project home page. To do this, return to the calendar settings page for the rally calendar. From the list of calendars, click the down arrow next to the rally calendar to see a pop-up with a Calendar Settings link, as shown in Figure 14-3. Click that link to return to the settings page.
      
      Figure 14-3
      
      6.
      
      Near the bottom of the Calendar Settings page you will see several Calendar addresses, as in Figure 14-4, which the calendar uses to make its data available.
      
      313
      
      21_097762 ch14.qxp
      
      12/7/06
      
      9:27 PM
      
      Page 314
      
      Part IV: Mashups Applied: A Research Project Hub
      
      Figure 14-4
      
      7.
      
      XML is included in the address list, which is of course ideal for mashups, as well as the iCal format, which is another standardized format ideal for calendars (and also quite mashable). Click the blue HTML button to add the calendar to the rally home page. You should be presented with a window containing the direct link to the calendar as well as a link to the Google Embeddable Calendar Helper configuration tool. Click the Configuration Tool link to continue to an embeddable calendar helper that will generate HTML code suitable for placing the calendar directly in your web page, similar to the del.icio.us linkrolls you experimented with in Chapter 7. In fact, just like with the del.icio.us linkroll generator, the changes you make in this form will affect some markup that you can then add to your web site to display your calendar.
      
      8.
      
      314
      
      Configure the embedded calendar. Set it up as you like, but make sure you set the Mode to Agenda and the IFrame Size no larger than 320 pixels wide, as shown in Figure 14-5.
      
      21_097762 ch14.qxp
      
      12/7/06
      
      9:27 PM
      
      Page 315
      
      Chapter 14: Bringing in Other Web Services
      
      Figure 14-5
      
      9.
      
      Open index.php from the rally2007 folder and copy the HTML provided by the Google Embeddable Calendar Helper just above the
      element and below the Category Form’s element. Wrap it in its own with its id attribute set to calendar.
      
      Do not directly type in the following element. You must copy-and-paste it from Google’s tool.
      
      
      ”>
      
      Notice how the PHP YAHOO_APP_ID constant is printed in the JavaScript code.
      
      4.
      
      Just below the previous addition to the element, add the custom JavaScript functions that toggle on and off the map rendering on the page, as shown in the shaded lines in the following code:
      
      Rally 2007 ”> Category:
      
      
      324
      
      21_097762 ch14.qxp
      
      12/7/06
      
      9:27 PM
      
      Page 325
      
      Chapter 14: Bringing in Other Web Services 7.
      
      Open stylesheet.css and add the following wherever you like in the file:
      
      .other_metadata { float: right; } #map_container { position: fixed; margin-left: 30%; text-align: center; border: 3px solid #000; background-color: #FFF; display: none; } #map { height: 400px; width: 400px; }
      
      8.
      
      Browse to index.php. Unless the Magpie cache of the project bookmarks hasn’t yet expired (you can always delete the cache by removing all the files from the cache directory), you should see the geotagged bookmark appear with a Show Map link, as shown in Figure 14-9.
      
      Figure 14-9
      
      325
      
      21_097762 ch14.qxp
      
      12/7/06
      
      9:27 PM
      
      Page 326
      
      Part IV: Mashups Applied: A Research Project Hub If you click the link, a box will appear with map containing a point denoting the exact location for the bookmark, as shown in Figure 14-10.
      
      Figure 14-10
      
      If you mouse-over the point (denoted with an A), it will expand to show the title of the bookmark location, as shown in Figure 14-11. You can also click and drag on the map to move it around. To hide the map, just click the Hide Map link at the bottom of the box.
      
      326
      
      21_097762 ch14.qxp
      
      12/7/06
      
      9:27 PM
      
      Page 327
      
      Chapter 14: Bringing in Other Web Services
      
      Figure 14-11
      
      How It Works The Yahoo! Maps JS-Flash API does most of the hard work in this project. The map is completely generated by Yahoo!’s own servers and placed on the page. All you need to do is construct, configure, and place it using a few simple JavaScript commands. Start by taking a look at the show_map_link() function you just made. This function is called during the rendering of each bookmark fetched from the tag feed. Its arguments provide the full list of tags for the bookmark as well as its title. First, the tags are split up by their space delimiter into an array via PHP’s explode() method: //creates a link to show a map if geotag data exists function show_map_link($tag_list,$title) { //break the tag list into an array $tags = explode(“ “,$tag_list); ... the rest of the code ... }
      
      327
      
      21_097762 ch14.qxp
      
      12/7/06
      
      9:27 PM
      
      Page 328
      
      Part IV: Mashups Applied: A Research Project Hub Then, each tag in the array is iterated through. Using regular expression matching, any tags that appear to be geotags have their coordinates taken and assigned to the $lat and $lon variables: foreach ($tags as $tag) { if (preg_match(‘/^geo:lat=(.*)$/i’,$tag,$latmatch)) $lat = $latmatch[1]; if (preg_match(‘/^geo:lon=(.*)$/i’,$tag,$lonmatch)) $lon = $lonmatch[1]; }
      
      A regular expression (commonly shortened to regex) is a string of special characters and letters that represent a pattern to look for in a string that it is checked against. The PHP preg_match() will take any matching data and place it in an array, in this case $latmatch or $lonmatch depending on what it finds. If you’re unfamiliar with regular expressions it’s well worth your time to check out one of the many web resources about it, such as http://en.wikipedia.org/wiki/Regular_expression. If latitude and longitude geotags are found and $lat and $lon are given the coordinates, then the Show Map link is printed to the page: if ($lat != ‘’ && $lon != ‘’) { echo “[ Show Map ]”; }
      
      This link, when clicked, executes the JavaScript function. show_map() is given three parameters, assigned by PHP: the latitude coordinates, the longitude coordinates, and the bookmark title. If you continue down to the show_map() function in the JavaScript code you wrote, you will see that the first thing that happens is that a LatLon() object is created using the provided lat and lon parameters: function show_map(lat,lon,title) { //create yahoo maps latlon object var latlon = new LatLon(lat, lon); ... the rest of the code ... }
      
      This object is a part of the Flash API that Yahoo! provides. When you make the JavaScript include to the Yahoo! apiloader library, you bring in this JavaScript version of this special object as well as dozens of others that serve various purposes. The LatLon() object, in this case, as described by Yahoo!’s API Reference Manual, “represents a point on the map through the intersection of latitude and longitude coordinates.” In other words, this object tells Yahoo about a latitude/longitude intersection you know about, which is of course the location for whatever you geotagged. Next another object specific to the Flash API is created, the Map() object: //display map centered at zoom level 3 var map = new Map(“map”, “YOURAPPLICATIONID”, latlon, 3);
      
      The Map() object, as you may have guessed, represents the Flash map application that will later be created on the page. It is given four parameters. The first is the container for the map, identified by its ID. For this project you created a element with its id attribute set to “map”:
      
      328
      
      21_097762 ch14.qxp
      
      12/7/06
      
      9:27 PM
      
      Page 329
      
      Chapter 14: Bringing in Other Web Services [ Hide Map ]
      
      With this parameter, the Flash API knows it’s going to put the map inside that . The next parameter you give the construction of the Map() object is your Yahoo! application ID. After that, you are required to give it the location you want to map. It accepts many different types of objects here, including latitude/longitude coordinates. So, you give it your latlon object. Finally, Map() is assigned a fourth argument, the zoom level for the map. This is number between 1 and 17 that represents how zoomed-in the map view should be. A value of 3 is pretty close up but not so close that you can’t identify a few street blocks surrounding the point on the map. Another JavaScript object is then created, CustomPOIMarker(). This object represents an expandable point-of-interest marker on the map. It accepts two parameters. The first is what the point of interest should be identified by, known as its index. Here you just used the letter A but in other mapping situations you might want to use something like Start or End, for example, when mapping the distance between two points. The second parameter to CustomPOIMarker() is the marker’s title. When the user clicks or rolls over the marker, it will expand to show this title. You assigned it the title of the bookmark: //add a marker marker = new CustomPOIMarker(‘A’,title);
      
      Next, you used the Map() object’s addMarkerByLatLon() function to place the marker on the map exactly where the latitude and longitude coordinates intersect: map.addMarkerByLatLon(marker,latlon);
      
      The addTool() function, also a part of the Flash API, is used to add a new PanTool() object to the map. This makes the map draggable. The final part of the function makes the with the map_container ID, which surrounds the map as well as the link used to close the map, visible by changing its display style to block, instead of hidden, which was the default as declared by your changes to stylesheet.css: //show map_container document.getElementById(‘map_container’).style.display = “block”;
      
      Likewise, the hide_map() function sets map_container’s display to none, hiding it: function hide_map() { //hide map_container document.getElementById(‘map_container’).style.display = “none”; }
      
      That’s essentially how this works. If you have further questions about the Yahoo! Maps API you can read its full documentation at http://developer.yahoo.com/maps/flash/V3/flashReference.html. To learn more about how the JS-Flash API works specifically, you might want to check out http://developer .yahoo.com/maps/flash/jsGettingStarted.html as well.
      
      329
      
      21_097762 ch14.qxp
      
      12/7/06
      
      9:27 PM
      
      Page 330
      
      Part IV: Mashups Applied: A Research Project Hub There’s a lot more you can do with the Yahoo! Maps Beta API. It’s an extremely powerful tool and getting more sophisticated all the time. Feel free to experiment.
      
      Summar y There are dozens of web applications out there that all serve very specific and unique functions, and many of them have (or are starting to have) their own APIs or other methods of integrating them with your own software. The way you integrated Google Calendar and Yahoo! Maps Beta with the rally coordination project are just two examples of what might be possible when it comes to mashing up multiple web services together, with or without del.icio.us. However, del.icio.us is extremely mashable, especially due to the flexibility of its tagging system. If you need to ever link a del.icio.us bookmark with something else, consider what tags can offer to help solve that problem. For example, if you need to link an ID in a contacts database with a del.icio.us bookmark, just make up your own id tag, like dbid=1434. There are no standards on how del.icio.us bookmarks should be tagged, and for the mashup developer, this is a good thing. Both of these web services were, at least the time of this writing, in the beta stage of development. As a mashup developer, you should never be afraid of the beta. In fact, you should consider it the golden age of mashup development, at least in terms of the software’s lifespan. The sooner you get in there and start experimenting, the better. Your completed projects will be more impressive, unique, and immediately useful, and in turn you’ll be helping out the developers of the web application a great deal by testing and using their API. Being a mashup developer is always about experimentation. Mix things together and see what comes out. True, it might be a lot of stuff without much use, but sometimes it might just work out to be something special.
      
      Exercises These exercises will help you explore ways to expand on what you’ve done with Google Calendar and Yahoo! Maps Beta in this chapter.
      
      330
      
      1.
      
      You may want to simplify the display of the events from Google Calendar further and show a simple agenda without any of the user interface features that embedding the calendar provides. Name a method other than the Google Calendar API that you can use to add data from Google Calendar to the rally home page.
      
      2.
      
      Describe what you might do to implement an Add To Calendar link for bookmarks that when clicked would add an event to the user’s own Google Calendar derived from a date and time saved with the bookmark via the Rally Poster extension, much like the way you saved location data via geotagging.
      
      3.
      
      Take a look at the Yahoo! Maps Flash API Reference and see if you can find out how to change the map that appears on the rally project home page to a map that uses satellite photography instead of the default graphics. (Remember, you can browse to the reference at http://developer .yahoo.com/maps/flash/V3/flashReference.html.)
      
      22_097762 ch15.qxp
      
      12/7/06
      
      9:27 PM
      
      Page 331
      
      15 Managing Incoming Links del.icio.us isn’t only about storing bookmarks processing tags. Another large part of the del.icio.us functionality lies in its social aspects. As you well know by now, when you save a bookmark to del.icio.us, by default it is posted for the world to see. The bookmark becomes a part of the shared knowledge and dialog about the bookmark on the del.icio.us. Everyone can learn about when you’ve saved it, and what you have to say about it, whether through the bookmark’s extended description field or tags. del.icio.us expands on this idea by connecting you with other users through this information, enabling you to not only bookmark your own interests and ideas, but discover new, similar ones as well, all from the aggregation of what you personally know about the web world. How might you utilize these social features on the motorcycle rally project homepage? One thing that might be useful is to add the ability for absolutely anyone, not just project coordinators, to suggest bookmarks and references. After all, your rally attendants might have something to say about what they would like to see at the next motorcycle rally. Because anyone with a del.icio.us account can send a link to another del.icio.us account using the for: special tag, you already have a method of delivery for these bookmarks. Just get the word out that anyone with a del.icio.us account can make suggestions about what they want to see at the rally by tagging them for your del.icio.us account and hopefully the links should start flooding in. Remember, you can see what other del.icio.us users are sending you by browsing to the http:// del.icio.us/for/yourname URL. Figure 15-1 shows what the Links For You page looks like. Note the convenient Save This link, which lets you quickly save the bookmark to your own del.icio.us account (the link changes to Saved after you click it). The Links For You page for an account is private. You must be logged in to view the links that other people have tagged for you.
      
      22_097762 ch15.qxp
      
      12/7/06
      
      9:27 PM
      
      Page 332
      
      Part IV: Mashups Applied: A Research Project Hub
      
      Figure 15-1
      
      One of the ideas behind the rally coordination page so far has been the way it lets outsiders interact with your private del.icio.us account in a restricted way. The final element you are going to add to the rally project coordination page is a way for you and other project coordinators to aggregate these incoming links and pick-and-choose which you want add to the project, all without any interaction with your own private del.icio.us account. You’re also going to make it so that you and your users can take these links and, when saving them to the project, ensure that they are tagged properly using your enforced category system, as well as possibly adding the special geocoding tags you experimented with in the last chapter.
      
      Try It Out
      
      Creating an Incoming Links Page
      
      This incoming links management interface will probably be best suited for a separate page. So, you’ll create a link on the rally2007 index.php page that will take users to this new interface.
      
      1.
      
      Open index.php in your editor and next to the Add a Bookmark link, add the following bold lines:
      
      The horizontal bar is a pipe character that visually separates the two functions. Typically, it’s typed by pressing Shift + Backslash (\).
      
      332
      
      22_097762 ch15.qxp
      
      12/7/06
      
      9:27 PM
      
      Page 333
      
      Chapter 15: Managing Incoming Links Manage Incoming Links | Add a Bookmark
      
      2.
      
      Create a new file in the rally2007 directory called manage_incoming.php. Begin at the top of the page with new PHP code block as well as a couple of constants related to the main RSS feed and default tag for the project, just like with the index.php home page:
      
      
      
      7.
      
      Now you’ll start some basic XHTML markup. To continue the look and feel of the project into this page, bring in the style sheet you created in Chapter 13 and place it between the tags:
      
      Rally 2007 - Incoming Links
      
      8.
      
      Keeping with the simple interface standards thus far, add a heading, some introductory text (replacing YOURNAME with the name of your del.icio.us account), and a element similar to the category select form in index.php that contains a link back to the project home page:
      
      Rally 2007 - Incoming Links

      This page contains links suggested by people outside the project team. To save the link to the main database, click the “Save to Project” link. Outsiders can send links to this page by posting bookmarks to del.icio.us and tagging them with for:YOURNAME.

      « Back to the Project Homepage
      
      9.
      
      Add the following code, which will iterate through the private bookmark feed and show all new incoming links that haven’t already been saved to the project:
      
      
      
      
      334
      
      22_097762 ch15.qxp
      
      12/7/06
      
      9:27 PM
      
      Page 335
      
      Chapter 15: Managing Incoming Links ”> ’, ‘’, ‘width=700,height=400,menubar=0,toolbar=0,scrollbars=1, location=0,status=1,resizable=1’);”>Save to Project
      
      
      10.
      
      Close your XHTML and tags:
      
      
      
      11.
      
      Before you can properly test this interface, you’ll need another del.icio.us account to tag some bookmarks for you. If you can, get a friend to do it. Have him or her take a few bookmarks, whether new or existing ones, and tag them for:YOURNAME. If you can’t get a friend to do it, you can do it yourself with the same del.icio.us account you are sending links to.
      
      12.
      
      Browse to the manage_incoming.php page, either by going to it directly or by clicking the link you added to index.php. You should then see something like Figure 15-3, with each link tagged for you listed on the page.
      
      If you click the Save to Project button, the posting pop-up window appears — the same one used by the Firefox extension you made as well as the Add a Bookmark link on the project home page — with the URL and Title fields already filled out. If any bookmarks in the private “links for you” feed are already in the project, this page is designed so that they do not show up here. If a bookmark does already exist in your del.icio.us account, but is just not tagged to be a part of the project, it will still appear here. If you or any coordinator initiates the Save To Project link on the bookmark, the existing bookmark’s information will simply be overwritten at your del.icio.us with the revised title, description, and tags.
      
      335
      
      22_097762 ch15.qxp
      
      12/7/06
      
      9:27 PM
      
      Page 336
      
      Part IV: Mashups Applied: A Research Project Hub
      
      Figure 15-3
      
      How It Works Beyond its unique URL and a few minor content formatting differences, the “links for you” RSS feed is exactly like any other del.icio.us feed and can be processed the same way. In addition to fetching and processing the for: feed, this script also processes the project’s overall tag, compares the two, and then displays any new bookmarks. Then, it’s just a matter of using the save_popup.php interface to save the bookmark to the project. The items from the project’s RSS feed are fetched and then iterated through as follows: //also fetch all of the existing bookmarks $rss2 = fetch_rss(BASE_TAG_FEED_URL.DEFAULT_TAG); $existing_bookmark_items = $rss2->items; //give the $existing_bookmarks array each URL in $existing_bookmarks_feed //to be checked against the incoming bookmarks later $existing_bookmarks = array(); foreach($existing_bookmark_items as $existing_bookmark) $existing_bookmarks[] = $existing_bookmark[‘link’];
      
      This places each bookmark’s URL in the $existing_bookmarks array. Later in the code, down where the list items are generated for the unordered list, each URL in the for: feed (provided via the attribute) is checked against this array to ensure that the bookmark hasn’t already been added to the project: ... the rest of the code ...
      
      Because there is a likelihood that there will be no new links in the feed, the $i variable, which is primarily meant to determine the row colors for each list item, also gives an indicator of how many bookmarks were displayed. If, in the end, none were shown, a message saying that no new incoming links exist is printed. ... the rest of the code ...
      
      When a new incoming link does not already exist in the project, it is shown along with its extended description. In addition, the Save to Project link appears, which when clicked triggers nearly the same JavaScript code as Add a Bookmark on the home page, with the exception that the incoming bookmark’s URL and title are included as query strings (shown in bold): ”> ’, ‘’, ‘width=700,height=400,menubar=0,toolbar=0,scrollbars=1, location=0,status=1,resizable=1’);”>Save to Project
      
      337
      
      22_097762 ch15.qxp
      
      12/7/06
      
      9:27 PM
      
      Page 338
      
      Part IV: Mashups Applied: A Research Project Hub This automatically sets the URL and Title field in the save_popup.php form. Then, it’s just a matter of selecting the category for the reference and adding any additional metadata, and the save_popup.php script takes over, saving the link to the project.
      
      Summar y More and more frequently, blogs and other websites encourage their readers to exchange links with them via del.icio.us. del.icio.us is an infinitely more ideal way to process, review, and even publish interesting links than the usual e-mail or instant message exchanges. Ultimately, as the web becomes more viral and the processing of information becomes more instant and available, using something like del.icio.us to help spread ideas, as well as to track conversation, develops into an extremely pertinent and interesting way to use and explore the web and share what you’ve found. The final part of this project drew upon this method of exchange to help collect bookmarks from an outside source and then properly add them to the project. All it took was further aggregation of the RSS feed provided by del.icio.us. After you got the data you needed from it, you then directed the data towards the standardized posting form you made during the Firefox extension development phase of this project to tag the bookmark properly and then save it as a resource using the del.icio.us API. You also purposefully designed the page to skip bookmarks already in the project. The end result is a page from which anyone can manage any incoming links from non-project members while remaining within the organizational constraints of the motorcycle rally planning project. This is just one of the ways that you can use the social features of del.icio.us to enhance your project. It’s easy to just use del.icio.us as a way to store information, but you also want to remember that there’s a whole world out there doing the same thing.
      
      Exercises Here are some exercises that will expand your knowledge of how you can add social features to your mashups.
      
      338
      
      1.
      
      Aside from using the special for: tag, can you think of another way that you could collect and aggregate bookmarks from project outsiders at del.icio.us? What would be some of the advantages and disadvantages of each?
      
      2.
      
      When you click the Save to Project link, the posting pop-up appears with the URL and Title fields already containing whatever the bookmark contributor assigned to them. What changes would you need to make to save_popup.php and manage_incoming.php to bring over the bookmark description as well?
      
      23_097762 pt05.qxp
      
      12/7/06
      
      7:22 PM
      
      Page 339
      
      Part V
      
      Looking Forward with del.icio.us Chapter 16: New and Different Directions
      
      23_097762 pt05.qxp
      
      12/7/06
      
      7:22 PM
      
      Page 340
      
      24_097762 ch16.qxp
      
      12/7/06
      
      9:28 PM
      
      Page 341
      
      16 New and Different Directions In this book, you’ve learned a great deal about many of the techniques and ideas behind the del.icio.us mashup, as well as a few potential directions a del.icio.us-driven mashup project can head. You may have a few questions about what others have done with del.icio.us. What are some of the more extreme examples of what’s capable with the del.icio.us API, feeds, and social data? Where have other mashup developers taken their ideas about del.icio.us? This chapter will help to answer some of those questions. Unfortunately, it’s impossible to list all of the incredible work developers have done with del.icio.us. One of the best ways of discovering other del.icio.us-related projects is via del.icio.us itself and the del.icio.us tag (http:// del.icio.us/tag/del.icio.us). If it involves del.icio.us, you can bet it will be on del.icio.us. Put the RSS feed for the del.icio.us tag in your feed reader now. You won’t regret it. In addition to pointing out some of the best works by other del.icio.us developers, this chapter offers a look at what the future for del.icio.us might hold, both in terms of the service as a whole and what you may be interested in as a developer. del.icio.us is still young and there’s still a lot of work to do, as well as a lot of mashups to make.
      
      Desktop, Web, and Mobile Clients One of the most useful and impressive categories of del.icio.us mashups involves incorporating the del.icio.us functionality as a whole with some other medium, such as a computer operating system or mobile device. A few mashup developers have done an amazing job at accomplishing this task. Because the del.icio.us API makes available almost every major function del.icio.us provides, including the ability to add a bookmark, tag it, delete it, fetch it by tag, and so forth, these developers have been able to create complete del.icio.us clients that work in their own unique ways on their own unique platforms. For example, Mac OS X users will definitely want to check out Cocoalicious. Cocoalicious is a free, open-source del.icio.us client for Mac OS X written in Mac OS X’s native Cocoa programming
      
      24_097762 ch16.qxp
      
      12/7/06
      
      9:28 PM
      
      Page 342
      
      Part V: Looking Forward with del.icio.us environment. It gives del.icio.us a look and feel similar to iTunes and other Mac OS X applications. If you want to take a look, you can download it from www.scifihifi.com/cocoalicious/. For Windows users, Deliwin is a notable del.icio.us client that presents all of your del.icio.us bookmarks as a hierarchical menu in the Window task bar, making them easy to access. The menu is derived from the tags you’ve chosen to assign to your bookmarks. You can download Deliwin from www.bafio.it/ projects/deliwin/. You can even interact with del.icio.us via your mobile phone. Mobilicio.us is a simplified, web-based interpretation of del.icio.us specifically meant for mobile web browser. You can learn more about Mobilicio.us at http://mobilicio.us/www/index.php. At the extreme end of Mobilicio.us is del.icio.us Director, an AJAX-powered, advanced web-based user interface for del.icio.us. del.icio.us Director is a whole new take on how to see and interact with your bookmarks. At this time, del.icio.us Director only supports newer versions of Firefox and Internet Explorer. You can log in to it at http://johnvey.com/features/deliciousdirector/. These are only a handful of the many notable del.icio.us client interfaces. Together, they illustrate the far end of the capabilities of the del.icio.us API. Your own projects may only draw upon a few particular aspects of del.icio.us and its API. Still, you may find it enlightening to know what is ultimately possible given the openness and availability of del.icio.us and its functions.
      
      New Perspectives on del.icio.us Data Some tools made with del.icio.us have nothing to do with the manipulation of bookmarks. Many people find the social and historical data that del.icio.us provides one of the most interesting aspects of del.icio.us. Some excellent work has been done in an attempt to aggregate, visualize, and reorganize this data into a way that gives a new perspective on del.icio.us and its users. One such project is del.icio.us Discover. Developed in March 2006, del.icio.us Discover was an attempt at visually mapping the connections between people and bookmarks in the del.icio.us network. The results were some visualizations that were both fascinating and beautiful. Check out this project at www.mandalabrot.net/delicious/. Another excellent and interactive take on del.icio.us social relationships is the del.icio.us Network Explorer tool. This web-based program is powered by the del.icio.us JSON feeds and Java, and when run, it presents you with an interactive web page that shows your del.icio.us network and the connections therein. Feel free to give it a try with your own del.icio.us account at www.twoantennas.com/ projects/delicious-network-explorer/. There are also many del.icio.us mashup projects out there that involve deriving trend-spotting and tracking link popularity data in the del.icio.us community bookmarks. One such project is del.icio.us Pioneers, which gathers the most popular bookmarks on del.icio.us and then pulls from them which del.icio.us users started the trend. You can check it out at http://del.mailliw.com/. If you’re interested in trend-mining del.icio.us, you will also want to check out populicio.us at http://populicio.us/. It determines what the most popular new bookmarks at del.icio.us are. It
      
      even has an RSS feed for its data, so you can make sure you never miss the latest and greatest del.icio.us links.
      
      342
      
      24_097762 ch16.qxp
      
      12/7/06
      
      9:28 PM
      
      Page 343
      
      Chapter 16: New and Different Directions And for something fun, check out tagman at www.apogee-web-consulting.com/cgibin/tagman_delicious.pl. It’s a game of hangman played with the tags used by del.icio.us users. There are many other projects that allow you to see and interpret del.icio.us data in a whole new way. Exploring them may help you understand just how complex and information-filled the del.icio.us bookmarks really are. As del.icio.us begins to grow and make more of itself available for projects like these, you are guaranteed to learn much more not just about how del.icio.us works, but also a lot about the minds behind the web and web users as a whole.
      
      Effective Mashups There have been many creative and useful del.icio.us mashups developed. Many of them draw upon del.icio.us as a data source and combine it with similar tools to create “information overload” pages that present a mish-mash of interesting links, images, and resources pertaining to a particular topic or idea. One such project is Diggdot.us, which combines the topical link-sharing site Digg.com (www.digg.com), the technology website Slashdot (www.slashdot.org), and del.icio.us to produce a combined feed of interesting technology news and links. Diggdot.us tracks the links you’ve seen before and the ones you haven’t, and keeps data on which sources are the most prolific, popular, or interesting. You can even sign up for an individual account on Diggdot.us and customize the page to your liking. You can find Diggdot.us at http://diggdot.us/. Another excellent approach to this idea is mashfot, which combines data from Flickr, del.icio.us, and a dozen other news, link, and image sources to create an information-rich webpage that’s strictly about photography. It’s presented extremely well and definitely worth a look. You can find it at www.mashfot.com. Like mashfot, some of the best del.icio.us mashups are targeted towards a specific interest or function rather than a broad set of users. An example of this is Thumbware’s del.icio.us and Salesforce.com mashup, which you can demo at http://bookmark.thumbware.com/. In case you’re not familiar with Salesforce.com, it’s a tool for business sales teams to track and monitor potential clients, partners, and leads. Thumbware’s mashup links together the web references tracked in Salesforce.com with del.icio.us, using special del.icio.us tags as the metadata that links them, like what you did with Yahoo! Maps Beta in the last chapter. It’s a simple hack, but it demonstrates how bringing del.icio.us into your daily life, along with a little mashup development knowledge, can make your dayto-day tasks easier and more productive.
      
      The Future of del.icio.us It’s hard to know what Joshua Schachter and his team have in store for the future of del.icio.us, but it’s probably safe to make some predictions. You can bet that much of the driving force behind future del.icio.us development will involve further improving the use, efficiency, and pertinence of del.icio.us data. The wealth of information about who has bookmarked what and when is one of its greatest assets, and del.icio.us will surely try and take this into new directions. In terms of what’s useful to you as a web developer, this will undoubtedly include more RSS and JSON feeds, as well as perhaps entirely new methods for accessing del.icio.us data. In fact, during the course of writing this book, several new JSON feeds were added, and that’s only the beginning.
      
      343
      
      24_097762 ch16.qxp
      
      12/7/06
      
      9:28 PM
      
      Page 344
      
      Part V: Looking Forward with del.icio.us It’s quite likely that del.icio.us will focus much of its efforts on improving its search feature. This will hopefully include opening up the search feature to the del.icio.us API. It’s also possible that one day del.icio.us search will be integrated with Yahoo!’s own search engine. Perhaps the most trusted resources for a particular search on del.icio.us will show up alongside an average Yahoo! search, allowing users to find what they’re looking for not only based off of Yahoo!’s spider-created directory, but also derived from the massive, socially-constructed database of trusted resources determined by the del.icio.us community. The potential for this kind of mashup is immense and may change how people search the web forever. It’s also very likely that the del.icio.us team will expand on the tagging architecture and metaphor. You will be able to manipulate, organize, and tag your bookmarks more effectively. In addition, it’s probable that new filetype and special system tags will be added. You may even one day be able to tag resources beyond just bookmarks. Imagine being able to organize the files on your own personal computer in a del.icio.us-like fashion. Finally, it’s a pretty safe bet that the networking features in del.icio.us will be further improved. You will probably be able to share and discover new links and interesting people more easily and in an entertaining fashion. It’s also very likely that many social features will carry over into the del.icio.us API and data feeds, allowing for new interpretations on the bookmarks that bind del.icio.us users together. The future of del.icio.us and web services like it will drive the future of the mashup. Read the del.icio.us blog, follow the del.icio.us community, and stay appraised of what happens. Every new change, tweak, or idea that happens at del.icio.us not only improves the usefulness of the service for you but also in turn contains mashup potential. When you think like a mashup developer, everything seems has the potential to come together.
      
      Summar y Before you know it, it’s likely that the mashup will make the transition from “cool trick” to usable, useful pieces of software that may potentially drive entire business ideas. del.icio.us will undoubtedly be a big part of this transformation. For now though, even if your mashup is just a fun weekend project, it’s worth doing. The mashup world is in an era of experimentation and discovery. It’s time to have fun and see what you can do. Hopefully by now you are ready to move on to your own projects and ideas. Perhaps you have an idea already bubbling in your head and you’re ready to roll with it. If you don’t, but would really like to try something, remember that some of the best del.icio.us mashups come from applying del.icio.us to your own daily life and interests. How can you integrate del.icio.us with what you love and do, and furthermore, what can you use from your new del.icio.us mashup developer’s toolbox to make it even better? Never be afraid to experiment. Mashups demand creativity and a unique perspective on the web. The possibilities are endless, and they all start right at your keyboard. Good luck and happy mashing.
      
      344
      
      25_097762 appa.qxp
      
      12/7/06
      
      9:28 PM
      
      Page 345
      
      A Exercise Answers Chapter 1 1. A. 2.
      
      Find the URL for all bookmarks tagged with art on del.icio.us.
      
      A.
      
      There’s no single answer for this question, but some example tags might include realestate, apartments, homes, and perhaps the city you are looking in, such as Denver. In addition, some more specific tags might be useful here, such as apartments2006, neighborhood name, capitolhill, or even the price of rent for each listing, rent1500. That way, you can filter your bookmarks based on price and location.
      
      3.
      
      Did you know there is an entire art scene devoted to videogame art? On my del.icio.us page, find the URL for all bookmarks I’ve tagged with both art and gaming. My del.icio.us username is negatendo.
      
      A.
      
      http://del.icio.us/negatendo/art+gaming
      
      http://del.icio.us/tag/art
      
      List some tags that you might use if you are collecting links to interesting apartment listings in your area.
      
      Chapter 2 1.
      
      If you’re adding RSS feeds to a feed reader and are a del.icio.us user, the three RSS feeds you absolutely must subscribe to are your network, your inbox, and the “links for you” (that is, your for: bookmarks, introduced in Chapter 1). Find the URLs for these three RSS feeds. (Note that there is a trick to finding the for: RSS feed.)
      
      A.
      
      The URLs are as follows: ❑
      
      Your network: http://del.icio.us/rss/network/yourname
      
      ❑
      
      Your inbox: http://del.icio.us/rss/inbox/YOURNAME
      
      ❑
      
      Your for links: http://del.icio.us/rss/for/yourname?private= PRIVATEKEY
      
      25_097762 appa.qxp
      
      12/7/06
      
      9:28 PM
      
      Page 346
      
      Appendix A: Exercise Answers A special key needs to be in the query strings for the RSS feed’s URL: (PRIVATEKEY). You will need to find the RSS feed on the “links for you” page to see what the final URL is. Look for the orange RSS button. The purpose of this key is to prevent anyone else from subscribing to the bookmarks meant especially for you.
      
      2.
      
      Earlier in this chapter, you made a call to the del.icio.us API to fetch the last five bookmarks saved to your account. What is the URL for the API call to fetch the last 100 bookmarks saved to your account?
      
      A. 3.
      
      https://api.del.icio.us/v1/posts/recent?&count=100
      
      A.
      
      This chapter showed you how to directly subscribe to the php tag in your feed reader. You can also add the php tag, as well as other tags, to your inbox. Make sure you have subscribed to your inbox in your feed reader, and then find out how to add the php and art tags to your inbox. Then, note how bookmarks posted to those tags appear in your feed reader. You can edit the tags that appear in your inbox at http://del.icio.us/settings/ YOURNAME/inbox. By entering the php and art tags, you will then subscribe to those tags. If you are following your inbox in your feed reader, all new postings under those tags will appear in your inbox. You can restrict your inbox contents to certain tags posted only by certain users.
      
      Chapter 3 1. A. 2. A. 3.
      
      What would the API call be to fetch the last 30 posts tagged with music?
      
      A.
      
      One way to do this would be to first have your program check to see if the user has any posts filed under temporary with the /posts/get method:
      
      https://api.del.icio.us/v1/posts/recent?&tag=music&count=30
      
      What would be the API call to get all bookmarks tagged with music? https://api.del.icio.us/v1/posts/get?&tag=music
      
      List the API calls that might be needed to write a program that routinely removes all bookmarks a user has tagged with temporary, but only if the bookmark has no other tags.
      
      https://api.del.icio.us/v1/posts/get?&tag=temporary
      
      If data is returned, look at the tag attribute inside each element to see if there are any other tags associated with each post:
      
      If temporary is the only tag, grab the URL from the href attribute and call the delete method to remove the post: https://api.del.icio.us/v1/posts/delete?&url= http://slashdot.org/articles/05/12/09/1954200.shtml
      
      4.
      
      346
      
      If you needed to get a daily digest of all bookmarks posted by a certain user under the tag restaurants, could you get away with only using an RSS feed to gather your data? If so, what is the feed URL?
      
      25_097762 appa.qxp
      
      12/7/06
      
      9:28 PM
      
      Page 347
      
      Appendix A: Exercise Answers A.
      
      Yes, you could use an RSS feed to get a daily digest of all bookmarks tagged as restaurants by a particular user. Just get the tag feed using the following code, which will get the negatendo bookmarked restaurants:
      
      http://del.icio.us/rss/negatendo/resturants
      
      Chapter 4 1.
      
      Create a Flickr REST API call that fetches the last 100 public favorites photos (photos on Flickr that a user has specially marked as their favorite) for a user. Use flickr.favorites .getPublicList as the method, EXAMPLEAPIKEY as the API key, and EXAMPLEUSERID as the user id.
      
      A.
      
      www.flickr.com/services/rest/?method= flickr.favorites.getPublicList&user _id=EXAMPLEUSERID&api_key=EXAMPLEAPIKEY
      
      2.
      
      Change the example geocoded RSS in this chapter’s discussion of Yahoo! Maps Beta to show the map at city level. For help, consult the Yahoo! Maps Simple API Reference Manual (http:// developer.yahoo.com/maps/simple/V1/reference.html) and look for the ymaps: ZoomLevel element.
      
      A.
      
      Add the following code in bold (notice that the ymaps:ZoomLevel element appears inside the element but not the element):
      
      4 Congress Park http://www.myserver.com Free public tennis courts. 39.73 -104.96
      
      3.
      
      In the Google Search API discussion, there is an example SOAP request that performs a search for munny gallery. Change this SOAP request to be a search for atomic books.
      
      A.
      
      Change the following SOAP request code line shown in bold:
      
      atomic books APIKEY 0 10
      
      347
      
      25_097762 appa.qxp
      
      12/7/06
      
      9:28 PM
      
      Page 348
      
      Appendix A: Exercise Answers true false latin1 latin1
      
      Chapter 5 1.
      
      If you created a subfolder in your htdocs directory called my_mashup_project with an index.php PHP page inside of it, where would you go in your web browser to view this page?
      
      A.
      
      Either of these URLs would work:
      
      http://localhost/my_mashup_project/ http://localhost/my_mashup_project/index.php
      
      Additionally, if you are on Mac OS X and have made your htdocs directory your Sites folder, the following would work as well (with username replaced with your Mac OS X username): http://localhost/~username/my_mashup_project/ http://localhost/~username/my_mashup_project/index.php
      
      2.
      
      In example5-1.php, you wrote some basic PHP and MySQL code to output the current date and then the date 100 days from now. What would be the MySQL query needed to calculate the date 100 days before the given PHP date?
      
      A.
      
      All you need to do is alter the value for the $query variable to contain a modified version of the original MySQL query using the DATE_SUB function (instead of the DATE_ADD function):
      
      $query = “SELECT DATE_SUB(‘$php_date’,interval 100 day)”;
      
      3.
      
      Like all good blogs, your new WordPress blog has an RSS feed. It has several, in fact. What are the URLs for your WordPress blog’s Entries and Comments RSS feeds?
      
      A.
      
      With the default WordPress template, you can find links to the Entries and Comments RSS feeds at the bottom of the page. They’re probably something like the following:
      
      http://localhost/wordpress/?feed=rss2 http://localhost/wordpress/?feed=comments-rss2
      
      You could technically point your feed reader to these feeds and immediately begin reading your weblog through your feed reader. However, if your feed reader is web-based, like Google Reader, Google won’t be able to see your development machine on the Internet so it’s unlikely it would work.
      
      348
      
      25_097762 appa.qxp
      
      12/7/06
      
      9:28 PM
      
      Page 349
      
      Appendix A: Exercise Answers Chapter 6 1.
      
      In example6-1.html, you developed a XHTML page that kept track of the number of times a user pressed a button, and you used JavaScript and the DOM architecture to display this number on the page. Add a JavaScript function to this page called reset_count() that resets the button press count and restores the original 0 value for the num_presses_span . In addition, create a new button that the user can press to call this function.
      
      A.
      
      Your changes to example6-1.html for this exercise should be similar to the following shaded lines:
      
      Javascript and DOM Testing var num_presses = 0; function press_me() { num_presses++; //var num_presses_span = document.getElementById(‘num_presses_span’); //num_presses_span.innerHTML = num_presses; document.getElementById(‘num_presses_span’).innerHTML = num_presses; } function reset_count() { num_presses = 0; document.getElementById(‘num_presses_span’).innerHTML = num_presses; } Number of presses: 0
      
      2.
      
      Outline the steps required to add a title field to the example web-based contacts database you created in the example6-5.php script. Don’t forget to describe what you would need to do on the MySQL, PHP, and HTML fronts. Just give a general overview of what would have to be done — you don’t have to be specific.
      
      A.
      
      To add a title field to the web-based contacts database, you would need to do the following: 1.
      
      Alter the contacts MySQL table, adding a new column called title.
      
      2.
      
      Change both the new_contact and edit_contact SQL query statements in the PHP code to account for the presence of $_POST[‘title’].
      
      3.
      
      Change the Contact List table to have an additional column and input elements for title.
      
      4.
      
      Add to the Add a New Contact form an additional element for the title.
      
      349
      
      25_097762 appa.qxp
      
      12/7/06
      
      9:28 PM
      
      Page 350
      
      Appendix A: Exercise Answers 3.
      
      A.
      
      You’ve worked with many third-party PHP libraries in this chapter, each of them capable of performing very specific functions. Would the following hypothetical projects use the SAJAX, Snoopy, or Magpie RSS library? ❑
      
      A project that combines multiple RSS feeds and displays their content on a website
      
      ❑
      
      A project where the 10 latest database records entered are shown on the page automatically every 30 seconds
      
      ❑
      
      A project that issues the del.icio.us API command necessary to rename a specific tag
      
      The first project would use Magpie RSS to process data from the RSS feeds; the second would use SAJAX to automatically fetch the requested rows from a MySQL database; and the third project would use Snoopy to make the REST call to del.icio.us that renames a tag.
      
      Chapter 7 1.
      
      In delicious_summary.html, where you used the JavaScript DOM API to output the JSON data, alter the code to add an additional paragraph (

      ) node listing all of the tags for each bookmark displayed.
      
      A.
      
      Something like what’s in the following shaded lines would work to add a list of tags under each bookmark (remember that the t variable contains the tags in del.icio.us JSON data):
      
      for (var i=0, post; post = Delicious.posts[i]; i++) { var li = document.createElement(‘li’); var a = document.createElement(‘a’); a.setAttribute(‘href’, post.u); a.appendChild(document.createTextNode(post.d)); li.appendChild(a); //include tags var tagp = document.createElement(‘p’); tagp.appendChild(document.createTextNode(post.t)); tagp.appendChild(tagp); //include the notes field if it exists if (post.n) { var p = document.createElement(‘p’); p.appendChild(document.createTextNode(post.n)); li.appendChild(p); } ul.appendChild(li); }
      
      350
      
      2.
      
      If you wanted to give the delicious_summary2 project to a friend so they could create their own summary page, they would need to do a few things to get it up and running on their web server (in addition to installing the delicious_summary2 folder and its contents). What steps would they need to follow to bring their own summary page into existence?
      
      A.
      
      Your friend would need to do the following: 1.
      
      Create the delicious_summary2 database and all its tables including the linkroll table, the tagroll table, and the tag_linkroll table.
      
      2.
      
      Set DELICIOUS_USERNAME and DELICIOUS_PASSWORD to their own del.icio.us username and password in the index.php file.
      
      25_097762 appa.qxp
      
      12/7/06
      
      9:28 PM
      
      Page 351
      
      Appendix A: Exercise Answers 3.
      
      Configure the MySQL-related constants in index.php, including MYSQL_HOST, MYSQL_DATABASE, MYSQL_USERNAME and MYSQL_PASSWORD.
      
      They might also have to configure Snoopy’s curl_path and temp_dir.
      
      3.
      
      In the linkroll area, how would you add a bookmark link that other del.icio.us users could copy to their own del.icio.us?
      
      A.
      
      All you would have to do is create a link called “save to my del.icio.us” (or something similar) that provides the URL to post and the title of the bookmark as a query string to http://del.icio.us/post URL. For example, in terms of the linkroll, adding code similar to this in the loop that iterates through $posts would probably work:
      
      echo “ (save to my del.icio.us)”;
      
      When the “save to my del.icio.us” link is clicked, anyone with a del.icio.us account will automatically be taken to a posting interface on del.icio.us where they can enter a title and save the URL as one of their own bookmarks.
      
      Chapter 8 1.
      
      In the automatically posted links provided by the autoposter.php script you wrote, it might be helpful to provide tags used with each bookmark. As an extra challenge, try to modify the code to make each tag into a link pointing to the appropriate del.icio.us tag page in your del.icio.us bookmarks.
      
      A.
      
      In the portion of code in autoposter.php that iterates through each post, outputting it as a list item, changing the code to resemble something like this would work (note the use of the split() function to divide the space-separated tag list into an array in order to make a link for each tag):
      
      foreach ($posts as $post) { $post_content .= “

      • ”.$post[‘attributes’][‘DESCRIPTION’].”
      ”; if (isset($post[‘attributes’][‘EXTENDED’])) $post_content .= “

      ”.$post[‘attributes’][‘EXTENDED’].”

      ”; if (isset($post[‘attributes’][‘TAG’])) { $tag_array = split(‘ ‘,$post[‘attributes’][‘TAG’]); $post_content .= “

      Tags: “; foreach ($tag_array as $tag) { $post_content .= “$tag “; } $post_content .= “

      ”; } }
      
      351
      
      25_097762 appa.qxp
      
      12/7/06
      
      9:28 PM
      
      Page 352
      
      Appendix A: Exercise Answers 2.
      
      Instead of just including links to the del.icio.us tag pages matching your post categories, it’s possible to also fetch and display a selection of actual bookmarks from your own del.icio.us related to your blog posts. Describe how you might go about expanding on the del.icio.us Category Links Plugin.
      
      A.
      
      One way to go about including a selection of actual links for each WordPress category would be via a process of fetching and caching matching links for each category, and then displaying them in the post. Each time the post loads, the cache of links will be fetched or an API call performed, just like with the delicious_summary2 project. You can keep the cache in the WordPress database by making your own table for this purpose, or in a separate database. For each WordPress category in each post, an API call like the following would suffice for this, where $category represents each WordPress category:
      
      /posts/get?&tag=$category
      
      You would have to develop a method to cache the API response, because every time the post would be displayed it would make not one but potentially several API calls. With a good caching mechanism and plug-in that regularly checks for links for each post based on a post’s category and adds the links to the post, you could easily design a system that lists links related to each post right there in your blog.
      
      3.
      
      The del.icio.us Play Tagger code could have easily been integrated into the classic-mashup theme instead of installed as a WordPress plug-in. What would be a disadvantage of using a theme to do this? Would there be any advantages? If the del.icio.us Play Tagger was implemented purely in a WordPress theme it would not be portable between themes, for one. If you switched your theme, the Play Tagger would be gone. There aren’t any real advantages to integrating it into the theme over making it a plug-in. It might be easier to add to a theme but the advantages the WordPress plug-in architecture provides, especially in terms of transporting functionality between themes and enabling/disabling it at will from the WordPress administration back-end, are much better suited for something like the del.icio.us Play Tagger.
      
      Chapter 9 1.
      
      In the first project in this chapter, you used GM_addStyle() to add to the CSS markup at del.icio.us. Of course, there are lots of ways to change the style sheet for a particular website, and you don’t necessarily need Greasemonkey to do it. For example, many browsers support user-specified style sheets. Try to make the del.icio.us Mashups Skin user script unique by not only having it change the page styling but also making the search box on the del.icio.us front page bigger.
      
      A.
      
      Adding something like the following to the del.icio.us mashups skin User Script would work. This code checks for the existence of the search form via its id, searchform, and then takes the second form element, which happens to be the search text field, and sets its size attribute to 30:
      
      if (document.getElementById(‘searchform’)) document.getElementById(‘searchform’).elements[1].size = 30;
      
      2.
      
      352
      
      You probably recall that tagging something with the special for: tag will send a bookmark to a del.icio.us user by copying the bookmark to their own inbox. For example, tagging something with for:negatendo will place that bookmark in my own del.icio.us inbox. Write a
      
      25_097762 appa.qxp
      
      12/7/06
      
      9:28 PM
      
      Page 353
      
      Appendix A: Exercise Answers Greasemonkey user script that automatically tags all bookmarks you save with for:username, where username is a user you want to send interesting links to, essentially CC-ing them on each bookmark you save, like with e-mail.
      
      A.
      
      To automatically send all your bookmarks to someone, you just need to write a script to add to the value of the tags form field the appropriate for: tag. Something like this would work:
      
      if (document.getElementById(‘tags’)) { document.getElementById(‘tags’).value = document.getElementById(‘tags’).value + “ for:negatendo”; }
      
      3.
      
      What would a call from Greasemonkey to the del.icio.us API look like? (Don’t worry about handling the data returned. If you like, just wrap it in an alert() function to test whether the response comes back.) Just try to come up with the basic code that fits the standards for interacting with the del.icio.us API.
      
      A.
      
      To make a call to the del.icio.us API from Greasemonkey, you need to design a GM_xmlhttpRequest() that sends the appropriate WWW-Authenticate and User-Agent headers. Something like the following would work, where username and password are variables pre-populated with the user’s del.icio.us username and password:
      
      GM_xmlhttpRequest({ method:”GET”, url:”https://api.del.icio.us/v1/posts/get?”, headers:{ “User-Agent”:”greasemonkey”, “Accept”:”application/atom+xml,application/xml,text/xml”, “Authorization”:”Basic “+ btoa(username + “:” + password) }, onload:function(details) { alert(details.responseText); } });
      
      Forming the User-Agent header is easy enough, but there is a trick to sending authentication information. Take a look at this line: “Authorization”:”Basic “+ btoa(username + “:” + password)
      
      To log in to the del.icio.us API with Greasemonkey, you needed to form an Authorization header using what’s called the Basic authentication scheme. This authentication scheme requires that the username and password you wish to provide be in a certain format. As quoted from HTTP Authentication: Basic and Digest Access Authentication (www.ietf.org/rfc/rfc2617.txt), the definitive RFCs (Request For Comments) reference on web authentication (RFC2617): “To
      
      receive authorization, the client sends the userid and password, separated by a single colon (“:”) character, within a base64 [7] encoded string in the credentials.” Base64 is simply a way of encoding data into a line of ASCII characters. Fortunately, modern implementations of JavaScript have a function that will return the Base64 value for whatever string you give it, which is btoa() in this case.
      
      353
      
      25_097762 appa.qxp
      
      12/7/06
      
      9:28 PM
      
      Page 354
      
      Appendix A: Exercise Answers Just because a username and password are encoded in Base64 doesn’t mean it’s secure! It’s a common misunderstanding that Base64 encoded usernames and passwords in authenticated web requests cannot be intercepted and decoded. Base64 is just a way of bringing together data in a portable form — not a way of encrypting it. del.icio.us uses SSL connections to its API, and that’s the “real” way in which data sent to and retrieved from the del.icio.us API is kept secure.
      
      Chapter 10 1.
      
      In the freshtags project, each link retrieved from each tag feed is saved to the MySQL database based on the presence of the bookmark as filed under that tag. This could still produce duplicate items in the regenerated feed if you are following several different feeds for related tags. How would you fix this project so that no matter what the tag, a URL is never shown twice in any feed that freshtags produces?
      
      A.
      
      To do this you simply alter the bookmarks table query to search only on the link column and not both link and tag, like so:
      
      $bookmarks_select_query = “select count(*) from bookmarks where link LIKE ‘“.mysql_real_escape_string($item[‘link’]).”’;
      
      2.
      
      One thing that might be nice to include in the slideshow mashup project is a link to the del.icio.us page for whoever posted the image being shown to del.icio.us. To do this, you would need to figure out who posted the image and what the URL to their del.icio.us page would be from the RSS data returned by Magpie. How would you access this data from the $item array and format it for the page?
      
      A.
      
      The $item[‘dc’][‘creator’] variable provides the del.icio.us username for whomever saved the item to del.icio.us. Since the URL scheme for each user’s page on del.icio.us consists of the main del.icio.us URL followed by the username, you could easily set-up this link like so:
      
      $creator_link = “http://del.icio.us/”.$item[‘dc’][‘creator’];
      
      Then it would just be a matter of giving the $creator_link for each item to JavaScript and presenting it on the page.
      
      3.
      
      If you wanted to use the jukebox project to export a new PLS file every day, how could you go about appending the date exported to the filename when the file is created by the script to make organizing these files easier?
      
      A.
      
      A modification of the Content-Disposition argument to header() would do the trick. Try something like this to append the current date to the filename:
      
      header(“Content-Disposition: attachment; filename=\””.date(‘Y-m-d’).”jukebox.pls\””);
      
      Chapter 11 1.
      
      354
      
      The first autobookmarking script you made, the one that automatically posts HotJobs listings to your del.icio.us, might work better if the job search qualities were provided as command line arguments instead of being hard-coded in the script code. How would you reprogram the script to enable you to set the search country, state, city, category, and keyword via the command line?
      
      25_097762 appa.qxp
      
      12/7/06
      
      9:28 PM
      
      Page 355
      
      Appendix A: Exercise Answers A.
      
      All it would take is setting the value of each of the variables to their position in the $argv array. For example, changing the variable setup to look like this:
      
      //enter a - (dash) for unused elements $country = $argv[1]; $state = $argv[2]; $city = $argv[3]; $category = $argv[4]; $keywords = $argv[5];
      
      would enable you to specify what to search on via the command line, like so: php -v hotjobs.php USA CA “San Jose” MIS “PHP developer”
      
      A call like this one would search for PHP developer jobs in San Jose, California.
      
      2.
      
      It is possible to include with your request to flickr.favorites.getList an additional parameter that will return the date each photo was uploaded. What would the parameter look like that assign $api_sig in the flickr.php autobookmarker script and the REST URL to give to Snoopy?
      
      A.
      
      The API signature formation code would need to be changed to look like this:
      
      //calculate $api_sig for flickr.favorites.getList $api_sig = md5(SHARED_SECRET.”api_key”.API_KEY.”auth_token”.FULL_TOKEN.”methodflickr.favorites .getListextrasdate_upload”);
      
      And the REST URL to look like this: $snoopy->fetch(“http://www.flickr.com/services/rest/?method=flickr.favorites .getList&api_key=”.API_KEY.”&auth_token=”.FULL_TOKEN.”&api_sig=”.$api_sig.”&extras= date_upload”);
      
      3.
      
      What’s another technology you could use besides a bookmarklet to point to your Amazon S3 cache files for your bookmarks, perhaps one that provides a link to the cache URL directly inside of del.icio.us?
      
      A.
      
      You could conceivably write a Greasemonkey user script to create links alongside each bookmark listed at your del.icio.us that link to the get_s3_cache.php script, providing to it the link URL as a query string. If you’re up for a challenge, try writing it.
      
      Chapter 12 1.
      
      The Rally Poster extension allows its users to select only one category for each bookmark saved. Of course, because del.icio.us allows you to add many tags to a bookmark, it would make a lot of sense to let rally coordinators choose more than one category at a time. What would be some ways to address this while keeping the possible choices as limited as possible?
      
      A.
      
      Instead of using a drop-down mechanism, you could design the extension so that collaborators could select multiple categories using check boxes instead. To implement this, you could change the HTML markup in save_popup.php to look like this:
      
      
      
      355
      
      25_097762 appa.qxp
      
      12/7/06
      
      9:28 PM
      
      Page 356
      
      Appendix A: Exercise Answers Category: Other
      
      When assembling the &tag argument for the del.icio.us API call, you can then just iterate through the $_POST[‘categories’] array, adding each value to the argument as a separate tag: //tags - consists of the default tag and whatever categories were selected $selected_category_tags = ‘’; foreach ($_POST[‘categories’] as $this_category_tag) $selected_category_tags = “ “.$this_category_tag; $arguments .= “&tags=”.urlencode(DEFAULT_TAG.” “.$selected_category_tags);
      
      2.
      
      Say you wanted to add French language (language code fr) support to the Rally Poster extension. What files and directories would you need to add, and what changes would you need to make to do this?
      
      A.
      
      To do this, you would need to make several changes to the extension, as follows: 1.
      
      Create a new directory in the locale directory of the extension called fr. Inside it, create rallyposter.dtd and rallyposter.properties with French equivalents of each localized string inside of them.
      
      2.
      
      Add to the chrome manifest (chrome.manifest) an additional locale chrome provider mention that points to the new localization files, like so:
      
      locale
      
      rallyposter
      
      3.
      
      356
      
      fr
      
      locale/fr/
      
      Write a new version or send to save_popup.php some indication of locale which will change its own text to be in French as well.
      
      3.
      
      Say you have 50 or so event coordinators using your Rally Poster extension. After the rally ends, how are you going to stop people from continuing to post resources to your del.icio.us? Or, what changes would you need to make to start collecting resources for next year’s rally?
      
      A.
      
      Because the save_popup.php file presumably exists on your own web server and you can always change it, you should be able to either disable that interface (perhaps having it only show a “Thanks for your help! See you next year!” message when summoned), or better yet, you can change the DEFAULT_TAG constant’s value to rally2008 and start up right away with gathering web references and resources for the next upcoming motorcycle rally.
      
      25_097762 appa.qxp
      
      12/7/06
      
      9:28 PM
      
      Page 357
      
      Appendix A: Exercise Answers Chapter 13 1.
      
      If you wanted to allow users to apply more than just one category to a bookmark, such as assigning both the Vendors and Services categories to a single reference, describe how you would have to change the rally home page interface.
      
      A.
      
      First, you would need to change the category select form to allow the selection of multiple tags. One way to do this would be to create check boxes for each category, along with a Submit button to execute the form. Additionally, you would need to have each bookmark list its categories below the bookmark description. Part of the work that would need to be done for this is changing the get_ category() function to return all of the categories instead of just one.
      
      2.
      
      Continuing with the previous question, what would the RSS feed URL have to look like in order to provide data for bookmarks tagged with multiple categories?
      
      A.
      
      All you would need to do is design the home page to further cluster the URL with additional tags, each separated by a plus (+) symbol. For example, to return all bookmarks related to the project categorized as both a Vendor and Service, this would be the feed URL you would need to have parsed:
      
      http://del.icio.us/rss/YOURNAME/rally2007+Vendors+Services
      
      3.
      
      Aside from using the API or RSS feeds, what’s another method by which you can fetch a project’s bookmarks from del.icio.us?
      
      A.
      
      The JSON feeds Keep in mind they’re another great resource to use in situations like this. Just like the RSS feeds, the del.icio.us JSON feeds can provide data based off of tag clusters. You could even use them to build a version of this page that doesn’t require PHP and use JavaScript instead to aggregate, organize, and display your data.
      
      Chapter 14 1.
      
      You may want to simplify the display of the events from Google Calendar further and show a simple agenda without any of the user interface features that embedding the calendar provides. Name a method other than the Google Calendar API that you can use to add data from Google Calendar to the rally home page.
      
      A.
      
      Every Google Calendar also has an RSS feed. Even private calendars have a private RSS feed. You can simply fetch and process this feed with Magpie and PHP to display a more dumbdowned version of the calendar agenda.
      
      2.
      
      Describe what you might do to implement an Add To Calendar link for bookmarks that, when clicked, would add an event to the user’s own Google Calendar derived from a date and time saved with the bookmark via the Rally Poster extension, much like the way you saved location data via geotagging.
      
      A.
      
      To implement an Add To Calendar ] link for bookmarks, you would need to design a method to input, store, and then send date and time data to Google Calendar. To do this, you would first alter the save_popup.php page to allow the optional input of a date and time. Then, just like
      
      357
      
      25_097762 appa.qxp
      
      12/7/06
      
      9:28 PM
      
      Page 358
      
      Appendix A: Exercise Answers with geotagging, you would want it to convert the data that was inputted into the form into some sort of tagging scheme. Something like date=00:00:00 and time=00:00:00 would work. Then, as with the Show Map link, you design a system to check for the existence of these special tags and, if they are there, implement a link that would direct the user to a script or page that would translate the date and time tags into the proper request needed for the Google Calendar API. Note that the Google Calendar API has an authentication scheme that needs to securely identify the user whose calendar you wish to manipulate and have them grant your application permission to change their data, but it would certainly be possible, primarily once again thanks to the flexibility of del.icio.us tags.
      
      3.
      
      Take a look at the Yahoo! Maps Flash API Reference and see if you can find out how to change the map that appears on the rally project home page to a map that uses satellite photography instead of the default graphics.
      
      A.
      
      The secret is to set an optional fifth parameter to the creation of the Map() object in the show_map() JavaScript function. By setting this parameter to MapViews.SATELLITE, a satellite photo map will be shown instead:
      
      var map = new Map(“map”, “YOURAPPLICATIONID”, latlon, 3, MapViews.SATELLITE);
      
      You can also set this parameter to MapViews.HYBRID, which will combine the regular and satellite views.
      
      Chapter 15 1.
      
      Aside from using the special for: tag, can you think of another way that you could collect and aggregate bookmarks from project outsiders at del.icio.us? What would be some of the advantages and disadvantages of each?
      
      A.
      
      Instead of tagging links for: your account, you could simply suggest that outsiders tag their bookmarks with the designated project tag instead, such as rally2007. Then, you could fetch the del.icio.us tag feed and compare it to the references already in the project. The tag feed for everyone’s bookmarks tagged with rally2007 would be http://del.icio.us/rss/tag/ rally2007. This would be advantageous if you wanted to make public the other bookmarks being submitted by del.icio.us users, as everyone else would get to see them to, as compared to the private Links For You” page. Additionally, it might be better to suggest that del.icio.us users tag bookmarks this way rather than tag them for you if you want to put a time limit on how long rally participants can submit resources. After you’ve gathered enough, you can just ignore the feed, unlike with your for: links, which will continue to be given links until you ask people to stop. Ultimately, it’s a decision between making the bookmarks people send you public or private. If others have strictly followed the projects in this book there should be a few dozen rally2007 bookmarks on del.icio.us as is. Take a look for yourself and see. Perhaps you may want to add these people to your network and follow their links, as you already know you have something in common with them — they’re all interested in del.icio.us mashups!
      
      2.
      
      358
      
      When you click the Save to Project link, the posting pop-up appears with the URL and Title fields already containing whatever the bookmark contributor assigned to them. What changes would you need to make to save_popup.php and manage_incoming.php to bring over the bookmark description as well?
      
      25_097762 appa.qxp
      
      12/7/06
      
      9:28 PM
      
      Page 359
      
      Appendix A: Exercise Answers A.
      
      Two simple changes could make this happen. First, you would want to alter save_popup.php to display the contents of an additional query string; maybe description in the Notes field if it exists. Note the text in bold:
      
      Notes:
      
      Then, add the description value for the link as a part of the window.open() command in manage_incoming.php: ”> &description=’, ‘’, ‘width=700,height=400,menubar=0,toolbar=0,scrollbars=1, location=0,status=1,resizable=1’);”>Save to Project
      
      359
      
      25_097762 appa.qxp
      
      12/7/06
      
      9:28 PM
      
      Page 360
      
      26_097762 appb.qxp
      
      12/7/06
      
      9:28 PM
      
      Page 361
      
      B Sympathy for the APIEnabled Web Services API-enabled web services try to make the data and features they provide as accessible to possible to developers, and this is all done with some amount of trust. It’s certainly possible that developers may, and sometimes do, abuse a web-service through its API. In some cases this has been done with full intent of harming the web service and/or its users, and other times it has been done unintentionally by developers who don’t consider the potential dangers of what they were making. Although del.icio.us and other services have set up a great deal of protection to prevent this from happening, such as throttling or even banning the user at fault, often the damage has already been done. Even if your intentions are good, it pays to be careful. It’s worth reviewing some of the methods you used in the projects thus far that were not only effective ways to program a mashup, but also meant to treat the del.icio.us API with respect and caution. When you develop your mashups, using these best practices should be first and foremost on your mind. Remember that access to a web API is considered to be a privilege and not a right. If some day sites like del.icio.us decide that hosting an API is just too dangerous or not worth it because of a few inconsiderate developers, everyone suffers.
      
      Minimize Your API Calls If you’re going to make a call to a web API then make the most of it. Get all the data you need with as few calls as possible and don’t go beyond that. Not only will this probably make your software more efficient, but it will also be kinder to the APIs you are using. For example, in the delicious_summary2 mashup in Chapter 7, you could have just fetched and cached the posts for every tag that appeared in your tag cloud ahead of time, along with the formation of the tag cloud itself. That way, your software would have appeared to run much faster when users selected a tag because the MySQL database would already have cached the most recent posts for that tag. However, while this seems like a good idea, it’s not. Designing your
      
      26_097762 appb.qxp
      
      12/7/06
      
      9:28 PM
      
      Page 362
      
      Appendix B: Sympathy for the API-Enabled Web Services project this way could potentially mean hundreds of hits to the del.icio.us API every time the page is initially browsed to by your user (depending on the cache status of each tag and how many tags you have). Since it’s unlikely your users would have clicked every single tag in your tag cloud in the first place, it’s a little silly to download all the posts for each tag at once anyway. When you design your mashups, try to predict the best times to make API calls and which calls to make, and make them as minimal as possible. It’s better that your own software does the work than the web service.
      
      Cache Your Data One great way to minimize your API calls beyond using them at the right time is to cache your data. Even if your web application lags one hour behind the current data you might get from a service such as del.icio.us, this is potentially saving both your web application and del.icio.us a great deal of strain. Caching is especially important for high-traffic mashups. Say you wrote a mashup that hit the del.icio.us API every page load and did not use caching. Although it’s just you developing and testing it initially, it may not seem like a big deal, but what if one day your mashup becomes the hot new thing? Up until that point it was just silently chugging away unnoticed by del.icio.us, but then suddenly both it and del.icio.us are ground to a halt due to the popularity of your mashup. Caching in these situations is essential. If your mashup uses regularly downloaded data in any way, shape, or form from any kind of Internetbased data source, whether that is the del.icio.us API, an RSS feed, an XML-RPC server, or anything else, caching that data locally and only occasionally spooling for new data should be one of your foremost considerations during your design of your mashup.
      
      Handle Status Errors With systems like web-based APIs, as with any kind of Internet communication, there’s always a chance something might go wrong between your own web server and the API service. An Internet connection may be down momentarily, a server or router might be undergoing maintenance, or a REST URL could change without notice. In cases like these, it is essential that your mashup is designed to not only catch and interpret such errors but also handle them in an elegant and respectful manner. Fortunately, most web-based APIs return HTTP status codes if something is going wrong. In Chapter 7, you simply designed the delicious_summary_2 project to cancel making its call to the del.icio.us API and revert to cache if anything but an OK status code was returned. This is a good idea. It also might have been a good idea to go further and perhaps have the programmed the page to e-mail you if something went wrong, or inform your user of the error so they would know why they weren’t receiving the latest data as well. You can read all about HTTP status codes and their meanings at www.w3.org/Protocols/rfc2616/rfc2616-sec10.html. In addition, a lot of the libraries and extended tools you’ve used prior to this chapter, like Snoopy, have built-in timeouts that will halt their execution if something is taking too long. It’s never a good idea to write anything that will infinitely try to communicate with another resource, especially if this resource is on the Internet. This will deplete time and bandwidth and make your software useless.
      
      362
      
      26_097762 appb.qxp
      
      12/7/06
      
      9:28 PM
      
      Page 363
      
      Appendix B: Sympathy for the API-Enabled Web Services The worst mistake you can make is to design a mashup that ignores any such errors or problem and just continues to blindly do its thing. This is never a good idea.
      
      Communicate The del.icio.us team members are some pretty busy people. Even though they can’t be expected to reply to every e-mail or check out every mashup done with their service, you can safely assume they are watching what’s going on very closely. If you haven’t done so yet, be sure and join the del.icio.us Yahoo! discussion group at http://groups .yahoo.com/group/ydn-delicious/. Feel free to use it whenever you have a new mashup project to announce or a question or concern about development. Both the del.icio.us team and many other del.icio.us fans, users, and mashup developers like myself read and respond to the group daily. If you’ve got something great then let the world know. Announce your mashup on your blog, make the code available for others to see, and get it out there. Not only will you be praised for your good work, but you will probably get valuable feedback from like-minded individuals on how to improve your mashup or your code. Perhaps you will even make a few friends down the line. (And, not only that, but once in a rare while, a mashup becomes a feature in del.icio.us.) Mashups are in essence a collaborative idea, and your mashup development process should be no different.
      
      Summar y Some parts of the mashup development process begin long before you write a single line of code. Good mashup developers are careful, respectful, and smart in the design of their software. It is important that you be of the same mindset and come up with intelligent ideas on how to minimize your calls to webservice APIs or RSS feeds, cache your data, handle errors, and be a part of the del.icio.us development community.
      
      363
      
      26_097762 appb.qxp
      
      12/7/06
      
      9:28 PM
      
      Page 364
      
      12/7/06
      
      7:24 PM
      
      Page 365
      
      Index
      
      27_097762 bindex.qxp
      
      Index
      
      SYMBOLS * (asterisk) wildcard character, 119 % (percentage sign), 306 + (plus) symbol, 5, 35, 39 ; (semicolon), 87
      
      A about:config page, 267–268 access key (Amazon API), 45 action hooks, 176 Adblock, Firefox extension, 50–51 Add a Bookmark link, 307–308 addresses, Calendar, 313–314 Adobe Flash file, 322 AJAX (Asynchronous JavaScript and XML) method, 113 Alexa, 45 all bookmarks by user, returning, 33 Amazon Alexa search program, 45 API key, 45 caching pages with S3 bucket, creating, 250–252 bucket, how it works, 252–253
      
      caching web documents, 253–258 Google cached version, 248 PHP modules, 249–250 redirecting to S3 cache, 258–260 Amazon Web Services (AWS) described, 45–46 ItemSearch response, 46 REST calls, 45 S3, signing up for, 249 signing up for, 71 Apache Server on Mac OS X, 60–62 using PHP to fetch current date and MySQL to calculate second date, 64–65 on Windows, 57–59 API (Application Programming Interface) bundles methods described, 36 /tags/bundles/all, 37 /tags/bundles/delete, 37–38 /tags/bundles/set, 37 calls, minimizing, 361–362 del.icio.us subsystem, 23–24 described, 18–21
      
      27_097762 bindex.qxp
      
      12/7/06
      
      7:24 PM
      
      Page 366
      
      API (Application Programming Interface) (continued) API (Application Programming Interface) (continued) Greasemonkey, fetching remote data with, 193 key Amazon, 45 eBay, 46 Flickr, 42, 239 Google, 49 language-specific libraries, 39 methods documentation, 29 posts methods /posts/add, 34–35 /posts/all, 33 /posts/date, 33–34 /posts/delete, 35 /posts/get, 30–32 /posts/recent, 32–33 /posts/updatemethod, 30, 38–39 protocols REST architectural style, 24 REST call and response, 25–27 rules, 28–29 WWW-authenticate and other headers, 27–28 RSS versus, 40 SOAP, 48–49 tags methods described, 36 /tags/get, 35–36 /tags/rename, 36 web services API calls, minimizing, 361–362 caching data, 362 communication, 363 status errors, handling, 362–363 apiloader library, Yahoo!, 323 application IDs, Flickr, 42 Application Programming Interface. See API arithmetic operator, 305–306 asterisk (*) wildcard character, 119 Asynchronous JavaScript and XML (AJAX) method, 113
      
      366
      
      auction house, eBay online API key, 46 Autobookmarker mechanics, 235–239 writing, 232–235 described, 46–48 REST calls token, 47–48 signing up for, 71 Auth Token, eBay, 46, 47 autoposter, WordPress blogger, 166–172 AWS (Amazon Web Services) described, 45–46 ItemSearch response, 46 REST calls, 45 S3, signing up for, 249 signing up for, 71
      
      B background color, CSS, 305 base styles, class attributes, 129–130 base tag feed, 202 BBEdit, 56 Beginning Web Programming with HTML, XHTML, and CSS (Duckett), 74 blogging, WordPress described, 49–50 discoveries, sharing daily autoposter, 166–172 job thingy, 166 Play Tagger for MP3 links (plug-in) mechanics, 183 writing, 181–182 popularity, tracking, 174–175 posting from your blog, 173–174 posting to, 108–112 projects list, 165 publishing and content management, 70–71 relevant bookmarks, combining (plug-in) hooks, 175 mechanics of plug-in, 179–181 writing plug-in, 175–179
      
      12/7/06
      
      7:24 PM
      
      Page 367
      
      columns, MySQL setting up, 67–68 using, 69–70 XML response, 171–172 Bloglines described, 15 feeds, collecting, 18 online feed reader, 14 setting up, 16–17 blogs, 12 body declaration, CSS, 304 bookmarklet, 6–7, 9–10 bookmarks del.icio.us API, adding with, 19 JSON format, fetching, 112 organizing bookmarklets, 6–7, 9–10 del.icio.us, advantages of, 3–4 socializing with other del.icio.us users, 7–8 top-level folders, 4–6 portable list (linkroll) JSON remix, 121–123 PHP, creating, 135–139 PHP, displaying, 142–146 selectable tag, applying, 152–158 table, retrieving rows from, 139–140 relevant, combining hooks, 175 mechanics of plug-in, 179–181 writing plug-in, 175–179 returning matching, 30–32 saving new, 34–35 toolbar, adding bookmarklet to, 6–7 updating, 34–35 border, CSS, 305 brackets, PHP, 64 browser. See also Firefox web browser bookmarks toolbar, adding bookmarklet to, 6–7 session cookie, 25 bucket, Amazon creating, 250–252 how it works, 252–253
      
      bundles methods, API described, 36 /tags/bundles/all, 37 /tags/bundles/delete, 37–38 /tags/bundles/set, 37
      
      C cache Amazon S3, 253–258 API-enabled web services, 362 Magpie RSS, 104 PHP, 140 Calendar, Google how it works, 317 implementing, 312–316 calls API, 361–362 reasonable time between, 29, 107 REST AWS, 45 eBay token, 47–48 Yahoo! Flickr, 43 Yahoo! geocoding API, 321–322 Yahoo! Search, 44 Cascading Style Sheets. See CSS Categories, adding, 178 channel, RSS. See RSS format feed character data handler, 101 chrome files, 267 chrome providers, 273–274 chrome URL, 275 class attributes base styles, overriding, 129–130 CSS, defining, 126–129 uses, 129 client side, JavaScript, 74 closing connection, PHP page, 89–90, 96 Cocoalicious, 341–342 code block, PHP, 64 columns, MySQL, 85
      
      367
      
      Index
      
      27_097762 bindex.qxp
      
      27_097762 bindex.qxp
      
      12/7/06
      
      7:24 PM
      
      Page 368
      
      command-line scripting, PHP data storage and transfer command-line scripting, PHP data storage and transfer, 117–118 content management, WordPress weblog, 70–71 cookie, 25 Crimson Editor, 56 crontabs, PHP data storage and transfer, 117–118 CSS (Cascading Style Sheets) class attributes, defining, 126–129 described, 74 how it works, 304–307 implementing style sheet, 299–304 JSON formatting remix, 126–130 skinning del.icio.us, 186–190 as web development technologies, 73–74 cURL system tool, 104–105
      
      D data array structures, displaying, 100 JSON remix, 124–126 MySQL types, 85 data storage and transfer, PHP AJAX method, 113 command-line scripting and crontabs, 117–118 Firefox extensions, 119 Greasemonkey, 118–119 JSON, 112–113 Magpie RSS cache, 104 downloading, 101–102 item object, iterating through, 104 RSS feed, handling, 103 MySQL adding, viewing, and editing database records, 88–89 closing database connection, 89–90 database, 85 database, creating, 86–87
      
      368
      
      editing and deleting existing records, 91–92, 94 form data, handling incoming (if statement), 92, 93–94 populating database, 87–88 querying database, 88 schema and columns, 85 tables, 85 REST cURL system tool, 104–105 danger of using script, 107 Snoopy, downloading, 105–106 XML parsing code, 106–107 SAJAX, 113–117 XML Parser character data handler, 101 data array structures, displaying, 100 element handlers, assigning, 99–100 file handle, opening, 100 generic XML file, creating, 96–97 PHP parsing script, writing, 97–99 process_end() handler, 101 process_start() handler, 100 XML-RPC described, 108 posting to WordPress, 108–112 database adding, viewing, and editing records, 88–89 cache, 140 MySQL described, 86–87 WordPress blog storage, 67–68 PHP data storage and transfer described, 85 populating, 87–88 querying, 88 database server, MySQL freshtags feed, 200–201 on Mac OS X, 62–64 PHP data storage and transfer adding, viewing, and editing database records, 88–89 database, 85
      
      12/7/06
      
      7:24 PM
      
      Page 369
      
      editor, MySQL database schema populating database, 87–88 querying database, 88 schema and columns, 85 tables, 85 selectable link tagroll, 152–158 on Windows, 60 date and time stamp, 30 dates bookmarks saved, 33–34 deleting existing records, MySQL, 91–92 del.icio.us and Greasemonkey user scripts described, 185–186 fetching remote data, 193–196 style sheet, replacing with new skin, 186–190 user interface, 190–192 del.icio.us and WordPress blogging discoveries, sharing daily autoposter, 166–172 job thingy, 166 Play Tagger for MP3 links (plug-in) mechanics, 183 writing, 181–182 popularity, tracking, 174–175 posting from your blog, 173–174 projects list, 165 relevant bookmarks, combining (plug-in) hooks, 175 mechanics of plug-in, 179–181 writing plug-in, 175–179 del.icio.us Director, 342 del.icio.us hotlist, 9 del.icio.us Java API, 39 del.icio.us mashup desktop, 158–160 JSON remix CSS formatting, 126–130 data handling, 124–126 linkrolls and tagrolls, 121–123 MySQL selectable link tagroll, 152–158 PHP cache database, 140 creating linkroll, 135–139
      
      displaying linkroll and tagroll, 142–146 do_api_call() to accept two arguments, 131–132 library, standardizing, 132–133 outputting as part of HTML markup, 147–152 retrieving rows from linkroll table, 139–140 selectable tag linkroll, applying, 152–158 status, checking, 133–135, 140 tagroll, generating, 141–142 del.icio.us PHP API, 39 Deliwin client, 342 desktop, Firefox extension, 159–160 Developers Program, eBay, 46 DHTML, ul and li elements, overriding, 130 Diggdot.us, 343 Discover, 342 do_api_call() to accept two arguments, 131–132 Document Object Model (DOM), 74–80 Document Type Definition (DTD) file, 277 documentation, API methods, 29 DOM (Document Object Model), 74–80 domain name, del.icio.us explained, 4 DTD (Document Type Definition) file, 277 Duckett, Jon (Beginning Web Programming with HTML, XHTML, and CSS), 74
      
      E eBay online auction house API key, 46 Autobookmarker mechanics, 235–239 writing, 232–235 described, 46–48 REST calls token, 47–48 signing up for, 71 editing MySQL records, 91–92 editor, MySQL database schema, 86–88
      
      369
      
      Index
      
      27_097762 bindex.qxp
      
      27_097762 bindex.qxp
      
      12/7/06
      
      7:24 PM
      
      Page 370
      
      element element handlers, assigning, 99–100 RSS container, 12 embedded PHP code, 64 embedded syntax highlighting, 55 errors, handling, 29 escaped or encoded URI element, 35 Expat C library, 96 Extensible HyperText Markup Language. See XHTML Extensible Markup Language. See XML Extension Wizard web interface, 268–272
      
      F favelet, 6–7, 9–10 favorites del.icio.us API, adding with, 19 JSON format, fetching, 112 organizing bookmarklets, 6–7, 9–10 del.icio.us, advantages of, 3–4 socializing with other del.icio.us users, 7–8 top-level folders, 4–6 portable list (linkroll) JSON remix, 121–123 PHP, creating, 135–139 PHP, displaying, 142–146 selectable tag, applying, 152–158 table, retrieving rows from, 139–140 relevant, combining hooks, 175 mechanics of plug-in, 179–181 writing plug-in, 175–179 returning matching, 30–32 saving new, 34–35 toolbar, adding bookmarklet to, 6–7 updating, 34–35 feed reader, 11 FeedDemon, 15 file handle, 100 filter hooks, 176
      
      370
      
      Firefox plug-in described, 265–266 extension, starting about:config page, 267–268 chrome providers, 273–274 DTD file, 277 Extension Wizard web interface, 268–272 shell scripts, 272–273 XUL, 274–277 Rally Poster extension completing, 284–288 deploying, 288–289 Rally Poster user interface creating, 278–282 how it works, 282–284 Firefox web browser del.icio.us extension, 159–160 described, 19 example del.icio.us response, fetching, 20–21 extensions, 50–51, 119 Flash API, Yahoo!, 327–330 Flickr photo-sharing service API key, 42, 239 autobookmarking scripts authentication scheme, 244 how it works, 245–247 writing, 239–244 described, 41–44 signing up for, 71 XML file, sending by geocoded RSS, 43–44 form data, MySQL, 92 freshtags feed cleaning up, 204 Magpie, 201–202 mechanics, 207–211 PHP, 201–202
      
      G geocoded RSS, 43–44 geotagging creating, 318–319 how it works, 321–322
      
      12/7/06
      
      7:24 PM
      
      Page 371
      
      ItemSearch response, AWS Globally Unique Identifier (GUID), 273 GNU Emacs editor, 56 Google API key, 49 Bloglines online feed reader, 14 SOAP, 48–49 Google Calendar how it works, 317 implementing, 312–316 Google Reader described, 15 freshtags feed, 206 Google Search API, 48–49 Greasemonkey PHP data storage and transfer, 118–119 reasons to use, 51 remote data, fetching, 193 user scripts described, 185–186 fetching remote data, 193–196 style sheet, replacing with new skin, 186–190 user interface, 190–192 GUID (Globally Unique Identifier), 273
      
      H headers HTTP, 195 web browser, 28 Hello World dialog box calling, 75–76 number of times pressed, incrementing, 76–80 History link, 175 home page layout creating, 292–296 described, 291–299 how it works, 296–299 quick posting form, 307–308 styles, adding how it works, 304–307 implementing style sheet, 299–304
      
      hooks, 175 HotJobs job listing service (Yahoo!), 228–232 hotlist, 9 HTML (HyperText Markup Language). See also XHTML form, 51 headers, including JSON data, 112 image feed slideshow, media tag remix, 218–220 language, 26 outputting as part of, 147–152 Rally Poster user interface creating, 278–282 how it works, 282–284 source, viewing, 218 as web development technologies, 73–74 HTTP (HyperText Transfer Protocol) described, 25–26 headers, 195 request, 27–28 hypermedia, 25–26 HyperText Markup Language. See HTML
      
      I id attributes, CSS, 126–129 id set, row, 88 if control statement, PHP, 84 if statement, 92 image feed slideshow, media tag remix HTML markup, 218–220 HTML source, viewing, 218 JavaScript, 217–218 need for, 211–212 PHP code block, 216–217 processing, 212–216 incoming links managing, 332–338 XHTML page, 334 insert query, MySQL, 91 item elements, AWS, 46 item object, Magpie RSS iteration, 104 ItemSearch response, AWS, 46
      
      371
      
      Index
      
      27_097762 bindex.qxp
      
      27_097762 bindex.qxp
      
      12/7/06
      
      7:24 PM
      
      Page 372
      
      JavaScript
      
      J JavaScript. See also bookmarklet client side, 74 Greasemonkey user script, 186 image feed slideshow, media tag remix, 217–218 new document implementation, 74–76 Rally Poster user interface, 285, 287–288 job thingy, 166 JSON (JavaScript Object Notation) CSS formatting, 126–130 data handling, 124–126 described, 112–113 linkrolls and tagrolls, 121–123
      
      K key, API Amazon, 45 eBay, 46 Google, 49 keywords, 5
      
      L language-specific API libraries, 39 li element, overriding, 130 library apiloader, Yahoo!, 323 Expat C, 96 PHP, 132–133 linkroll JSON remix, 121–123 PHP creating, 135–139 displaying, 142–146 selectable tag, applying, 152–158 table, retrieving rows from, 139–140 links footer, creating latest, 193–195 mashup software and, 29 Links For You, 336–338
      
      372
      
      list items, CSS, 305 local web-development environment tools Apache on Mac OS X, 60–62 using PHP to fetch current date and MySQL to calculate second date, 64–65 on Windows, 57–59 described, 56–57 MySQL on Mac OS X, 62–64 on Windows, 60
      
      M Mac OS X Apache, 60–62 client, 341–342 Cocoalicious, 341–342 editors, 56 MySQL, 62–64 Pear application and extension registry, 249–250 Magpie freshtags feed, 201–202 home page for rally project, 292 HotJobs autobookmarker, 229–232 image feed slideshow, media tag remix, 212–220 Magpie RSS cache, 104 downloading, 101–102 item object, iterating through, 104 RSS feed, handling, 103 map geotagging API, how it works, 321–322 Random Videos, embedded, 42–43 showing, 322–327 Yahoo! Maps JS-Flash API, 327–330 Maps BetaYahoo! (Yahoo!) described, 42 signing up for, 71
      
      12/7/06
      
      7:24 PM
      
      Page 373
      
      photo-sharing service, Flickr Maps JS-Flash API (Yahoo!), 327–330 mashups, del.icio.us as pioneer, 11 media tag remix slideshow HTML markup, 218–220 HTML source, viewing, 218 JavaScript, 217–218 need for, 211–212 PHP code block, 216–217 processing, 212–216 metadata described, 5 section, JavaScript, 119 methods API documentation, 29 example del.icio.us response, fetching, 20–21 Microsoft Windows Apache Server, 57–59 client, 342 Deliwin client, 342 editors, 56 MySQL Database Server, 60 mobile phone, 342 Mobilicio.us, 342 modulus operator, 305, 306 MP3 jukebox, media tag remix, 220–225 MP3 links, Play Tagger for mechanics, 183 writing, 181–182 MySQL database server freshtags feed, 200–201 on Mac OS X, 62–64 PHP data storage and transfer adding, viewing, and editing database records, 88–89 database, 85 populating database, 87–88 querying database, 88 schema and columns, 85 tables, 85 selectable link tagroll, 152–158 on Windows, 60
      
      N Net::Delicious for Perl, 39 NetNewsWire, 15 Network Explorer tool, 342 network users, identifying, 8 new bookmark, saving, 34–35 new document, JavaScript implementation on, 74–76 news aggregator, 11 Notepad++ text editor, 56 number of times pressed, incrementing, 76–80
      
      O opening connection, PHP page, 93 operations, 26 OS X (Mac) Apache, 60–62 client, 341–342 Cocoalicious, 341–342 editors, 56 MySQL, 62–64 Pear application and extension registry, 249–250
      
      P parsing functions, 96 password MySQL, 63 web browser, catching request for, 28 Pear application and extension registry, 249–250 percentage calculation, PHP, 306–307 percentage sign(%), 306 permission settings, Apache web server, 59 photo-sharing service, Flickr API key, 42, 239 autobookmarking scripts authentication scheme, 244 how it works, 245–247 writing, 239–244
      
      373
      
      Index
      
      27_097762 bindex.qxp
      
      27_097762 bindex.qxp
      
      12/7/06
      
      7:24 PM
      
      Page 374
      
      photo-sharing service, Flickr (continued) photo-sharing service, Flickr (continued) described, 41–44 signing up for, 71 XML file, sending by geocoded RSS, 43–44 PHP Amazon, caching pages with S3, 249–250 binary, 117 cache database, 140 creating linkroll, 135–139 displaying linkroll and tagroll, 142–146 do_api_call() to accept two arguments, 131–132 freshtags feed, 201–202 home page for rally project, 292–293 image feed slideshow, media tag remix, 216–217 library, standardizing, 132–133 outputting as part of HTML markup, 147–152 page for adding, viewing, and editing MySQL records, 88–89 close connection, 89, 96 parsing script, writing, 97–99 Pear application and extension registry, 249 percentage calculation, 306–307 retrieving rows from linkroll table, 139–140 selectable tag linkroll, applying, 152–158 status, checking, 133–135, 140 syntax highlighting tool, 55 tagroll, generating, 141–142 version, 57 WordPress blog information, 167 with XHTML, 80–84 PHP data storage and transfer AJAX method, 113 command-line scripting and crontabs, 117–118 Firefox extensions, 119 Greasemonkey, 118–119 JSON, 112–113 Magpie RSS cache, 104 downloading, 101–102
      
      374
      
      item object, iterating through, 104 RSS feed, handling, 103 MySQL adding, viewing, and editing database records, 88–89 closing database connection, 89–90 database, 85 database, creating, 86–87 editing and deleting existing records, 91–92, 94 form data, handling incoming (if statement), 92, 93–94 populating database, 87–88 querying database, 88 schema and columns, 85 tables, 85 REST cURL system tool, 104–105 danger of using script, 107 Snoopy, downloading, 105–106 XML parsing code, 106–107 SAJAX, 113–117 XML Parser character data handler, 101 data array structures, displaying, 100 element handlers, assigning, 99–100 file handle, opening, 100 generic XML file, creating, 96–97 PHP parsing script, writing, 97–99 process_end() handler, 101 process_start() handler, 100 XML-RPC described, 108 posting to WordPress, 108–112 PhpDelicious, 39 phpMyAdmin, 65–67 Play Tagger for MP3 links (plug-in) mechanics, 183 writing, 181–182 plug-ins bookmarks, combining relevant hooks, 175
      
      12/7/06
      
      7:24 PM
      
      Page 375
      
      references, collecting mechanics of plug-in, 179–181 writing plug-in, 175–179 described, 265–266 extension, starting about:config page, 267–268 chrome providers, 273–274 DTD file, 277 Extension Wizard web interface, 268–272 shell scripts, 272–273 XUL, 274–277 mechanics, 179–181, 183 Play Tagger for MP3 links mechanics, 183 writing, 181–182 Rally Poster extension completing, 284–288 deploying, 288–289 Rally Poster user interface creating, 278–282 how it works, 282–284 relevant bookmarks, combining, 175 writing, 175–179, 181–182 plus (+) symbol, 5, 35, 39 popularity, tracking, 7, 174–175 posts methods, API /posts/all, 33 /posts/date, 33–34 /posts/recent, 32–33 /posts/updatemethod, 30, 38–39 posts, most recent made by user, 32–33 press_me() function Hello World dialog box, calling, 75–76 num_presses variable, incrementing, 76–80 private bookmarks, changing interface, 191–192 process_end() handler, 101 process_start() handler, 100 production key, eBay, 46 property files, 275 protocols, API REST architectural style, 24 REST call and response, 25–27
      
      rules, 28–29 WWW-authenticate and other headers, 27–28 publishing WordPress weblog, 70–71
      
      Q query, MySQL, 65 quick posting form, 307–308
      
      R Rally Poster extension completing, 284–288 deploying, 288–289 user interface creating, 278–282 how it works, 282–284 Random Videos, embedded maps with video, 42–43 readers, RSS feeds, 13–18, 206 Really Simple Syndication format feed. See RSS format feed reasonable time between calls, 29, 107 record, MySQL creating, 87 PHP page for adding, viewing, and editing close connection, 89–90, 96 creating, 88–89 editing and deleting existing records, 91–92, 94 form data, handling incoming, 92, 93–94 insert query, 91 opening connection, 93 returned data, displaying, 90, 95 XHTML form for adding entries, 90, 95 pulling from database, 88 return, 65 recurring links, reducing, 199–200 redirecting to S3 cache, 258–260 references, collecting. See Firefox plug-in
      
      375
      
      Index
      
      27_097762 bindex.qxp
      
      27_097762 bindex.qxp
      
      12/7/06
      
      7:24 PM
      
      Page 376
      
      relevant bookmarks, combining (plug-in) relevant bookmarks, combining (plug-in) hooks, 175 mechanics of plug-in, 179–181 writing plug-in, 175–179 reloading more recent version, 25 remote data, Greasemonkey, 193 renaming tags, 36 representation of page, 25 request header, web browser, 28 request mechanics, web page, 25 resources, 26 REST (Representational State Transfer) architectural style, 24 calls AWS, 45 eBay token, 47–48 Yahoo! Flickr, 43 Yahoo! geocoding API, 321–322 Yahoo! Search, 44 cURL system tool, 104–105 danger of using script, 107 defined, 25 eBay Autobookmarker mechanics, 235–239 writing, 232–235 protocols, 25–27 Snoopy, downloading, 105–106 XML parsing code, 106–107 Result, Yahoo! Search, 44-45 returned data, displaying, 90, 95 rows of data, 65 MySQL creating, 87 described, 85 retrieving from linkroll table, 139–140 RSS (Really Simple Syndication) format feed aggregator, 11 API versus, 40 cleaning up freshtags feed code, 200–207 freshtags feed mechanics, 207–211 recurring links, reducing, 199–200
      
      376
      
      described, 11–12, 13, 199 home page, choice for, 296–298 HotJobs autobookmarker, 229–232 image feed slideshow, media tag remix HTML markup, 218–220 HTML source, viewing, 218 JavaScript, 217–218 need, 211–212 PHP code block, 216–217 processing, 212–216 Links For You, 336–338 Magpie RSS, 103 MP3 jukebox, media tag remix, 220–225 readers, 13–18 sample, 12–13 rules, API, 28–29
      
      S S3, AWS, 249 SAJAX (Simple AJAX toolkit) described, 113–117 selectable link tagroll, 152, 154, 158 Salesforce.com, 343 Sandbox, eBay, 46–47 Save to My del.icio.us link, 173–174 Schachter, Joshua (del.icio.us creator), 4, 343–344 schema, MySQL, 85 script, REST, 107 scripting. See also bookmarklet client side, 74 Greasemonkey user script, 186 image feed slideshow, media tag remix, 217–218 new document implementation, 74–76 Rally Poster user interface, 285, 287–288 Search API, Google, 48–49 Search API (Yahoo!), 44–45 search program, Amazon Alexa, 45 SearchResultItem response, eBay, 48 secret access key (Amazon account), 45 select statement, 88
      
      12/7/06
      
      7:24 PM
      
      Page 377
      
      status semicolon (;), 87 servers Apache on Mac OS X, 60–62 using PHP to fetch current date and MySQL to calculate second date, 64–65 on Windows, 57–59 MySQL database freshtags feed, 200–201 on Mac OS X, 62–64 PHP data storage and transfer, 85–89 selectable link tagroll, 152–158 on Windows, 60 services, web Amazon, caching pages with S3 bucket, creating, 250–252 bucket, how it works, 252–253 caching web documents, 253–258 Google cached version, 248 PHP modules, 249–250 redirecting to S3 cache, 258–260 eBay autobookmarking scripts how it works, 235–239 reasons for, 228 writing, 232–235 Flickr autobookmarking scripts authentication scheme, 244 how it works, 245–247 reasons for, 228 writing, 239–244 Google Calendar how it works, 317 implementing, 312–316 HotJobs autobookmarking script, 228–232 map geotagging, 318–319 geotagging API, how it works, 321–322 need for, 317 showing, 322–327 Yahoo! Maps JS-Flash API, 327–330 session cookie, 25 shell scripts, 272–273
      
      Simple AJAX toolkit (SAJAX) described, 113–117 selectable link tagroll, 152, 154, 158 Simple Object Access Protocol (SOAP), 48–49 skin appearance mode, 186 slideshow, image feed HTML markup, 218–220 HTML source, viewing, 218 JavaScript, 217–218 need for, 211–212 PHP code block, 216–217 processing, 212–216 Smultron editor, 56 Snoopy, downloading, 105–106 SOAP (Simple Object Access Protocol), 48–49 social network, bookmarks, 3 socializing with other del.icio.us users, 7–8 software, notifying del.icio.us API of use of, 29 software, WordPress blogging discoveries, sharing daily autoposter, 166–172 job thingy, 166 Play Tagger for MP3 links (plug-in) mechanics, 183 writing, 181–182 popularity, tracking, 174–175 posting from your blog, 173–174 projects list, 165 relevant bookmarks, combining (plug-in) hooks, 175 mechanics of plug-in, 179–181 writing plug-in, 175–179 source code editor, 55–56 sqrt() function, PHP, 80–82 square root calculation form, 82–84 SAJAX, 113–117 state, page, 25 stateless messaging protocol, 25 status errors, handling, 362–363 PHP, checking, 133–135, 140
      
      377
      
      Index
      
      27_097762 bindex.qxp
      
      27_097762 bindex.qxp
      
      12/7/06
      
      7:24 PM
      
      Page 378
      
      storage, PHP data storage, PHP data AJAX method, 113 command-line scripting and crontabs, 117–118 Firefox extensions, 119 Greasemonkey, 118–119 JSON, 112–113 Magpie RSS cache, 104 downloading, 101–102 item object, iterating through, 104 RSS feed, handling, 103 MySQL adding, viewing, and editing database records, 88–89 closing database connection, 89–90 database, 85 database, creating, 86–87 editing and deleting existing records, 91–92, 94 form data, handling incoming (if statement), 92, 93–94 populating database, 87–88 querying database, 88 schema and columns, 85 tables, 85 REST cURL system tool, 104–105 danger of using script, 107 Snoopy, downloading, 105–106 XML parsing code, 106–107 SAJAX, 113–117 XML Parser character data handler, 101 data array structures, displaying, 100 element handlers, assigning, 99–100 file handle, opening, 100 generic XML file, creating, 96–97 PHP parsing script, writing, 97–99 process_end() handler, 101 process_start() handler, 100
      
      378
      
      XML-RPC described, 108 posting to WordPress, 108–112 styles. See CSS syndicated content. See RSS
      
      T tables, MySQL creating, 86–87 described, 85 PHP data storage and transfer, 85 tag bundles all user’s, returning, 37 creating or changing, 37 described, 36 permanently removing, 37–38 tag clouds, 36 tagroll JSON remix, 121–123 MySQL selectable link, 152–158 PHP, displaying, 142–146 PHP, generating, 141–142 SAJAX selectable link, 152, 154, 158 tags, 5–6 tags methods, API described, 36 /tags/get, 35–36 /tags/rename, 36 TextWrangler 2 editor, 56 theme, WordPress, 69–70 throttling del.icio.us account, 29 toolbar, bookmarks, 6–7 tools accounts and API keys, 71 local web-development environment Apache on Mac OS X, 60–62 Apache Server on Windows, 57–59 Apache, using PHP to fetch current date and MySQL to calculate second date, 64–65 described, 56–57
      
      12/7/06
      
      7:24 PM
      
      Page 379
      
      User-Agent header MySQL Database Server on Windows, 60 MySQL on Mac OS X, 62–64 phpMyAdmin, installing, 65–67 source code editor, 55–56 WordPress weblog publishing and content management, 70–71 setting up, 67–68 using, 69–70 top-level folders, 4–6 transfer, PHP data AJAX method, 113 command-line scripting and crontabs, 117–118 Firefox extensions, 119 Greasemonkey, 118–119 JSON, 112–113 Magpie RSS cache, 104 downloading, 101–102 item object, iterating through, 104 RSS feed, handling, 103 MySQL adding, viewing, and editing database records, 88–89 closing database connection, 89–90 database, 85 database, creating, 86–87 editing and deleting existing records, 91–92, 94 form data, handling incoming (if statement), 92, 93–94 populating database, 87–88 querying database, 88 schema and columns, 85 tables, 85 REST cURL system tool, 104–105 danger of using script, 107 Snoopy, downloading, 105–106 XML parsing code, 106–107 SAJAX, 113–117
      
      XML Parser character data handler, 101 data array structures, displaying, 100 element handlers, assigning, 99–100 file handle, opening, 100 generic XML file, creating, 96–97 PHP parsing script, writing, 97–99 process_end() handler, 101 process_start() handler, 100 XML-RPC described, 108 posting to WordPress, 108–112
      
      U ul element, overriding, 130 UltraEdit editor, 56 UNIX crontabs task scheduling, 117–118 editors, 56 Firefox plug-in, 272 web server, 57 updating bookmark, 34–35 URI (Uniform Resource Indicator) described, 26 escaped or encoded element, 35 URL (Uniform Resource Locator) base tag feed, 202 described, 5, 26 script, running based on, 119 user’s saved, querying, 31 user interface del.icio.us and Greasemonkey user scripts, 190–192 Rally Poster, completing, 285–288 user scripts, Greasemonkey described, 185–186 fetching remote data, 193–196 style sheet, replacing with new skin, 186–190 user interface, 190–192 user, tags used by, 35–36 User-Agent header, 28
      
      379
      
      Index
      
      27_097762 bindex.qxp
      
      27_097762 bindex.qxp
      
      12/7/06
      
      7:24 PM
      
      Page 380
      
      users users network, identifying, 8 saved URL, querying, 31 tag bundles, returning, 37
      
      W Web 2.0, 3 web advertisements, blocking, 50–51 web browser JavaScript and, 74 password, catching request for, 28 request header, 28 web development technologies described, 73–74 JavaScript and Document Object Model API, 74–80 PHP with XHTML, 80–84 web page information, saving in bookmarklet, 7 request mechanics, 25 web services Amazon, caching pages with S3 bucket, creating, 250–252 bucket, how it works, 252–253 caching web documents, 253–258 Google cached version, 248 PHP modules, 249–250 redirecting to S3 cache, 258–260 eBay autobookmarking scripts how it works, 235–239 reasons for, 228 writing, 232–235 Flickr autobookmarking scripts authentication scheme, 244 how it works, 245–247 reasons for, 228 writing, 239–244 Google Calendar how it works, 317 implementing, 312–316 HotJobs autobookmarking script, 228–232
      
      380
      
      map geotagging, 318–319 geotagging API, how it works, 321–322 need for, 317 showing, 322–327 Yahoo! Maps JS-Flash API, 327–330 web-development environment tools Apache on Mac OS X, 60–62 using PHP to fetch current date and MySQL to calculate second date, 64–65 on Windows, 57–59 described, 56–57 MySQL on Mac OS X, 62–64 on Windows, 60 wildcard character, 119 Windows (Microsoft) Apache Server, 57–59 client, 342 Deliwin client, 342 editors, 56 MySQL Database Server, 60 Windows Notepad, 56 WordPress blogging described, 49–50 discoveries, sharing daily autoposter, 166–172 job thingy, 166 Play Tagger for MP3 links (plug-in) mechanics, 183 writing, 181–182 popularity, tracking, 174–175 posting from your blog, 173–174 posting to, 108–112 projects list, 165 publishing and content management, 70–71 relevant bookmarks, combining (plug-in) hooks, 175 mechanics of plug-in, 179–181 writing plug-in, 175–179 setting up, 67–68
      
      12/7/06
      
      7:24 PM
      
      Page 381
      
      Yahoo! Search API using, 69–70 XML response, 171–172 WWW-authenticate and other headers, 27–28
      
      X XHTML (Extensible HyperText Markup Language) described, 74 form for adding entries, 90, 95 incoming links page, 334 new document, JavaScript implementation on, 74–76 PHP with, 80–84 syntax highlighting tool, 55 as web development technologies, 73–74 XML (Extensible Markup Language). See also XHTML Flickr, sending by geocoded RSS, 43–44 freshtags feed, cleaning up, 204 Google Calendar, 314 parsing code, 106–107 response eBay, 48 WordPress, 171–172 SOAP, Google, 48–49 XML Parser, 96–97 XML feed. See RSS format feed XML Parser character data handler, 101 data array structures, displaying, 100
      
      element handlers, assigning, 99–100 file handle, opening, 100 generic XML file, creating, 96–97 PHP parsing script, writing, 97–99 process_end() handler, 101 process_start() handler, 100 XML-formatted User Interface Language (XUL) described, 266 Firefox plug-in, 274–277 XML-RPC described, 108 posting to WordPress, 108–112 XUL (XML-formatted User Interface Language) described, 266 Firefox plug-in, 274–277
      
      Y Yahoo!. See also del.icio.us mashup; Flickr photo-sharing service discussion group, 363 geocoding API, 321–322 Yahoo! HotJobs job listing service, 228–232 Yahoo! Maps BetaYahoo! described, 42 signing up for, 71 Yahoo! Maps JS-Flash API, 327–330 Yahoo! Search API, 44–45
      
      381
      
      Index
      
      27_097762 bindex.qxp
      
      29_097762 bob2.qxp
      
      12/7/06
      
      7:24 PM
      
      Page 384
      
      Programmer to Programmer TM BROWSE BOOKS
      
      P2P FORUM
      
      FREE NEWSLETTER
      
      ABOUT WROX
      
      Get more Wrox
      
      at Wrox.com! Special Deals
      
      Free Chapter Excerpts
      
      Take advantage of special offers every month
      
      Be the first to preview chapters from the latest Wrox publications
      
      Unlimited Access. . .
      
      Forums, Forums, Forums
      
      . . . to over 70 of our books in the Wrox Reference Library (see more details on-line)
      
      Take an active role in online discussions with fellow programmers
      
      Meet Wrox Authors! Read running commentaries from authors on their programming experiences and whatever else they want to talk about
      
      Browse Books .NET SQL Server Java
      
      XML Visual Basic C#/ C++
      
      Join the community! Sign-up for our free monthly newsletter at newsletter.wrox.com
      
      28_097762 bob1.qxp
      
      12/7/06
      
      7:24 PM
      
      Page 383