About FriendFeed and FriendFeedBadge – present your FriendFeed in your own web site
Ok, so some of you must think I’m slightly retarded in regards to discovering new internet services. The thing is, though, that I usually test a lot of them as soon as they surface, then wait to see if they become popular, and if yes, hops on the train as everyone else. This time around, the turn has come to FriendFeed and the FriendFeedBadge.
What it is
FriendFeed is basically a service for collecting the content from all the other services you use online. You specify what you want to share from desired services – be it Flickr, Twitter, Tumblr, blog posts etc – and then have it all presented in the same view (web version) or feed view.
Follow me!
For anyone interesting in what I write, tweet and pictures I publish, I’d recommend following me on FriendFeed (just create an account, if you don’t already have one). The upside is that you only need one place to keep track of, as opposed to Flickr feed, Twitter feed and so on.
Another upside is, from what I’ve seen so far at least, tremendously good performance. It updates your services instantly, and it’s built by a number of really talented people, where most of them have a background in creating some of Google’s super-popular services.
Introducing the FriendFeedBadge
Like many others, I felt the need to publish the last items in my FriendFeed here in my own web site, to give people a broader feel of who I am, and at the same time offering them to find out more. I took a look at the official ways to embed FriendFeed, but immediately realized that their scripts were just in line with all other crappy document.write
badges you’ve seen all over the web.
On top of that, their code made a number of superfluous HTTp requests, getting a lot more content than I was interested in for a simple badge, so I set out to create FriendFeedBadge.
How FriendFeedBadge works
FriendFeedBadge is a basic badge script, which uses the excellent FriendFeed API to get my feed data as JSON. That way, I can create an accessible fallback for non-script visitors, avoid delaying the loading of my entire web site with a document.write
script, and instead use JSON to retrieve my feed data. As soon as the rest of the page is loaded, it gets the JSON and traverses it to create a nice little badge (which currently resides in the column to the right of this post).
FriendFeedBadge settings
There are a number of settings to make sure your badge suit your needs. You can:
- Control for what user you want to present the feed (naturally).
- Number of items to show.
- HTML element to insert the badge code into.
- Size of images.
- Whether to get each service’s icon from the FriendFeed web site or not. An option is to have those icons on your own web server, and instead use CSS classes to apply them (each list item will get a class with the service name to hook into).
- How long to wait for JSON data, before canceling the request, hence just presenting your fallback.
This is how the settings look like:
var settings = {
userName : "robertnyman", // Your Friendfeed user name
itemsToShow : 5, // Number of Friendfreed items to retrieve
itemToAddBadgeTo : "friendfeed-badge", // Id of HTML element to put badge code into
imageSize : 100, // Suggested values: 75, 100, 250, 400 or 500
showServiceIcons : true, // Apply icons for each service from Friendfeed. Each list item get a service class name, for custom CSS styling
timeToWait : 2000 // Milliseconds, 1000 = 1 second
};
Some suggested CSS to get you started as well:
.friendfeed {
width: 150px;
}
.friendfeed li {
margin-bottom: 1em;
padding-left: 25px;
}
.friendfeed img {
display: block;
margin-bottom: 0.5em;
}
.friendfeed .friendfeed-post-date{
display: block;
font-size: 0.9em;
margin-top: 0.25em;
}
Download FriendFeedBadge
If you’ve ever felt the need to present your FriendFeed banner in your web site, in an unobtrusive and suitable technical way, go download FriendFeedBadge now! I mean, hell, I use it! π
If you would like a more elaborate means to republish your feed content, consider FeedSweep (http://www.FeedSweep.com). It too “republishes” any feed (or feeds) you like and allows for mixing of feeds, filtering and customized look and feel.
Where I have to put the CSS code? I mean… I have to put the code inside the CSS of my blog or I have to create a new CSS?
Thanks
Hi! This is great. Thanks. Is there a way to get rid of the quotation marks around each post?
All the best.
cc
mak,
You need to put whatever CSS code you want in to your web page.
Corti,
Thanks!
Not by default, but you can alter that in the JavaScript file if you want to.
[…] really like Robert Nyman’s Friendfeed Badge, and I might switch to that one later, but for now I am in a hurry so I will use this one. […]
Super Informationen verpackt in einem tollen Design.
spasibo vchera kak raz dumal nad dannoj temoj.
Is it okay if I quickly mention that we are looking to find extra webdesign?