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:
onSuccess : function(text,json)
{
try
{
}
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:
="1.0"="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;
}
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
- 19th January, 2010: Initial post