FriendFeed & Google & Maps = FriendMap!

Introduction

This tutorial was born as a little developers' guide to integrate the Google APIs with the FriendFeed APIs.

Background

First of all, you need two authorization keys, one for friendFeed (https://friendfeed.com/account/login?next=%2Fapi%2Fregister) and the other one for the google Maps (http://code.google.com/intl/it-IT/apis/maps/signup.html).

In this tutorial, I don't want to speak about the Google widget and other possible integration of these kind of tools, but I simply want to explain the main things that you need to know to create these kind of tools…

What else do you need?

Now we have the keys to use the APIs and we need to develop our application... but first we need to know the basics APIs model of FriendFeed.

FriendFeed APIs Model 

FriendFeed supports three methods of authentication: Auth, Installed Application Authentication and HTTP Basic Auth with a special password called a remote key. For us and for security reasons, the best two are the Auth and Installed Apps Authentication, but in this sample we don’t speak about the authentication process, because the more simple authentication method (HTTP) is enough to do a first test with the ff API. So you can download the basic template for HTTP authentication (http://friendfeed.com/static/html/remotelogin.html) and then implement your post/get data.

Next you need to know how to read FriendFeed posts and user data.

Simply if we want to request our FriendFeed home page, we need to invoke the “feedlist” command by:

http://friendfeed-api.com/v2/feedlist

or in JSON callback by: 

http://friendfeed-api.com/v2/feedlist?callback=yourfunction

To do this, you simply use the Google Data Request or every Request method by other JavaScript framework (jquery, mootools.. ) or moreover the basic XmlHttpRequest.

For example, in mootools:

var r = new Request.JSON(
{
    method :'get',
    url : ‘http://friendfeed-api.com/v2/feedlist’, 
	//or http://friendfeed-api.com/v2/feedlist?callback=jsonobject
    onSuccess : function(text,json) 
    {
	try 
        {
	    //work with your data..
	} 
        catch (e) 
        {
            alert(e);
        }
    }
}).send();

The response format is very simple and contains each link in your friendFeed SideBar:

• main[]{} - The main feeds at the top of everyone's sidebar, e.g., Home, My discussions, and Direct messages
• lists[]{} - The authenticated user's friend lists
• groups[]{} - The groups that show up by default in the Groups sidebar on friendfeed.com
• searches[]{} - The authenticated user's saved searches
• sections[]{} - A list representing the authenticated user's sidebar on FriendFeed. Useful for recreating the FriendFeed sidebar in your client.

Each item is an array and the single item structure is:

• name - The display name of the section, e.g., "Friends" or "Groups"
• id - "friends", "groups", or "saved-searches"
• feeds - List of feeds in the section

So for example, if you need to retrieve all the feeds into the main home, you need simply iterate the main[] and then acquire the feeds.

Now to create your feed list, you need to know the feed item structure.

Feed

• id - The feed id, e.g., "bret" or "bret/comments"
• name - Display name of the feed, e.g., "Bret Taylor"
• description? - Profile description, an HTML string
• type - One of "user", "group", or "special"
• private - true if the feed is private
• commands[]? - List of allowed commands for the authenticated user on this feed: "subscribe", "unsubscribe", "post", "dm", "admin"

And for each feed, we have a list of entries for example: body or URL, but especially our tutorial object entry: “geo”.

This entry if not available in the list can be requested by complete feed reads.

http://friendfeed-api.com/v2/feed/feed id

Now that you know the basics about the FriendFeed APIs, we need to introduce the Google maps and conclusion of our tutorial. 

The GoogleMaps Object

As you know, it is important that we have a key to use Google maps and a JavaScript object, also we know that we can send marker by direct code or by a kml file, in which if we want we can define the zoom level or other information for our marker.

I think that it is not necessary to spend more word about the Google maps API, because there are a lot of examples to test and to understand the following section of this tutorial.

Assemble the Code

Now we have a simple introduction to the need of this tutorial/developing idea.

The application draft is very simple:

The application code can use two kinds of methods, the kml overlay load or the direct GMarker making.

For example, if you want to create by server-side code the kml file, you need to respect this syntax:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.0">
    <Document>
        <name>KML FriedFeed</name>
        <description>FriendFeed markers</description>
        <Placemark>
            <name>Feed 1</name>
            <description>something read from the body entry [FF]</description>
            <Point>
                <coordinates>{acquired by the geo entry [FF]}</coordinates>
            </Point>
        </Placemark>
    </Document>
</kml>  

... and in the JavaScript Code  

var kml = new GGeoXml("http://mytestdomain.com/myresponsefeed.kml.php");
map.addOverlay(kml); 

Or if you want to iterate the array and proceed with the single creation of each marker, you need something like this:

for(var i = 0 ;i<feedList.length;i++) 
{
    var point = new GLatLng(feedList[i].geo.lat,feedList[i].geo.lng);
    var marker=new GMarker(point);
    GEvent.addListener(marker, "click", 
    function() 
    {
        marker.openInfoWindowHtml(feedList[i].body+'<br/>Link:' + feedList[i].url;
    });
    mm.addMarker(marker); 
}

Now if you want to make a sidebar into the gmap object, you need to define a custom GControl:

FeedListControl.prototype = new GControl();
FeedListControl.prototype.initialize = function(map) 
{
    feedContainer = document.createElement("div");
    feedContainer.style.overflow="auto";
    feedContainer.style.backgroundColor = "#ffffff";
    feedContainer.style.border = "1px solid black";
    feedContainer.style.height="250px";
    feedContainer.style.width="130px";
    feedContainer.style.paddingLeft="5px";
    map.getContainer().appendChild(feedContainer);
    return feedContainer;
    //define the position:
    //FeedListControl.prototype.getDefaultPosition = function() 
    //{ 
    //    return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(6, 33)); 
    //}
}

and then add the items to the control by :

feedContainer.innerHTML = my_html_feed_list;

Now if you are lucky, you can have something like this:

Points of Interest

This article is only a start-up explanation and aims to be a way to propose new ideas in which you can use the various APIs and tools available!

Happy developing. Enjoy!

JSOP Edit - fixed the formatting and the errors inside the <pre> tags.

History

• 19^th January, 2010: Initial post