some words from technology briefcase

or in other words ..“How to Create a Smart WebApplication to see Geo Infos of Ff posts”
This tutorial born as a little developers guide to integrate the Google Apis with the FriendFeed Apis.
First of all you need two authorization key, 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 this kind of tools, but I simply want to explain the main things that you need to know to create this kind of tools…
What do you need else?
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: OAuth, Installed Application Authentication and HTTP Basic Auth with a special password called a remote key.

This tutorial born as a little developers guide to integrate the Google Apis with the FriendFeed Apis.First of all you need two authorization key, 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 this kind of tools, but I simply want to explain the main things that you need to know to create this kind of tools…What do you need else?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 modelFriendFeed supports three methods of authentication: OAuth, Installed Application Authentication and HTTP Basic Auth with a special password called a remote key.
 For us and for security reason the best two are the OAuth and Installed Apps Authentication, but in this sample we don’t speak about the authentication process, because the more simply 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 contain each link in your friedFeed 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 e.g if you need to retrieve all the feed into the main home 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 expecially our tutorial object entry : “geo”.
This entry If not available into the list can be requested by a 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 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 example to test and to understand the following section of this tutorial.
Assembly the Code
Now, that we have a simple introduction to the need of this tutorial/developing idea.

 
The application code can use two kind 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 readed 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




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 samething like this:


nice developing to everybody

enjoy!