Using Friendfeed as a Lifestream within WordPress
I spent days (literally) looking for a good lifestreaming plugin for WordPress to showcase some of the exploits that I have my hand in on a daily basis (videos, twitter, pictures, etc). The ones I found had certain features that I liked, but none of them really LOOKED (format-wise) how I wanted it to.
Enter Friendfeed. They have a slick looking widget/badge you can embed on a site to display the items that are broadcast to your Friendfeed. BUT, in the initial code, you can’t make it do everything you want.
With some fun hacking, I’ve got the FriendFeed widget doing what I want. So, if you want a great, easy way to show your lifestream, here’s the 4-1-1:
- Head over to FriendFeed.com. On your personal profile page, next to your pictures, there’s a link that says “Embed in a Web Page”.
- That will take to the “embed” page. There are five options (Badge, ShareLink, Feed Widget, Chiclet Widget, and Status Widget). You want “Feed Widget”.
- Clicking on that link will give you a preview and some options to choose. Here are your optimal choices:
- Feed: My Feed”
- Services: All Services (you can include only a certain service if you want to segment it, but this shows everything in order)
- Entries: Change it to 10. We’ll be hard changing this in the code, but that drops a variable in we can change.
- Show: UNCHECK all of the boxes. You want to get rid of the logo, feed, and subscribe links.
- Format: Javascript (yes, I know the other option mentions WordPress, but we’re doing things a bit differently)
- More Options / Width: Set the width of the CONTENT region (minus sidebar) you want to display this in. Typically anywhere from 400-600 pixels)
- Copy the HTML. Take it into a text editor and get ready to make some changes. This is (more than likely) what you have:
<script type=”text/javascript” src=”http://friendfeed.com/embed/widget/studionashvegas?v=2&num=10&hide_logo=1&hide_comments_likes=1&hide_subscribe=1″></script><noscript><a href=”http://friendfeed.com/studionashvegas”><img alt=”View my FriendFeed” style=”border:0;” src=”http://friendfeed.com/embed/widget/studionashvegas?v=2&num=10&hide_logo=1&hide_comments_likes=1&hide_subscribe=1&format=png”/></a></noscript>
That’s all well an good, but it’s only showing 10 entries and it looks weird. Change the “num=10” to something bigger like “num=100” Also, make sure to add a special div to your script – you want to be able to target CSS to customize it; might as well give it a canvas hook to work with! You can also delete the <noscript> section too.
- Take your page.php and make a duplicate. Rename this page “lifestream.php” and upload it to your server. In the WordPress theme editor, take everything between:
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
and
<?php endwhile; endif; ?>and delete it (those lines included). Copy your final script, which should look something like this:
<div class=”lifestream”><script type=”text/javascript” src=”http://friendfeed.com/embed/widget/studionashvegas?v=2&num=100&hide_logo=1&hide_subscribe=1&width=505″></script></div>and paste it where those php calls were. Make sure you also include the code to create a page template in WordPress:
<?php
/*
Template Name: LifeStream
*/
?>at the top of the page. Save your changes.
- Create a new WordPress page titled “Lifestream” and set the page template to “lifestream” (leave the content blank).
- Voila! Your very own friendfeed widget. But hold on, what if you want to change the css? No matter what code you put in, it doesn’t work! Never fear; there’s a guide here! A Guide to CSS’ing a FriendFeed Widget, that is.
Holy Cow! There are 28 Comments!
Trackbacks
- Lifestreaming News Roundup for November 20th | Lifestream Blog
- This Week on MA.GNOLIA « /home/kOoLiNuS
- My week on the web | bitful
- Agregando mi lifestream - Daidaros
Both comments and pings are currently closed.
by: Sean
Nice one Mitch! I've been looking for a lifestream utility as well and not really been happy with my choices. I'm currently using profilactic's feed for my lifestream (you can see it here : http://www.seanelavelle.com/lifestream/ ) but this looks more like what I really want to do. Will give it a try in a couple days and see how it works.
by: gavin
thanks mitch, i was going to use friendfeed to do the same, but haven't had the chance to update my site and tweak the code. i'll be returning to this bookmark. shalom, -gav
by: Branson Computer Repair
Thanks a lot! After reading this post,
I’ve implemented FriendFeed on my blog, as well.
The hacks you outlined worked perfectly. Thanks a lot!
by: dirty blue widgets
Great tweak on the friendfeed widget. I’m working on getting it implemented on a few of my sites now. Thanks
jason
by: Social Bookmark Service
I enjoyed this post a lot!!!
This is really awesome!
Keep up
by: Windu
Nice info, can you make this as plugin?
by: studionashvegas
Haha that’s a little over my head… anyone care to take a crack at it?
by: kalyan city
i would soon implement this on my blog too. thanks for detailed article.
by: Ryan
Good work Mitch! Making my life easier once again.
by: Aaron
Wow, I’m a moron. I followed your instructions above, uploaded the lifestream page, created the new page, Published, and had a blank page (although my theme showed up). I tried a couple different things, seeing if I could make it work somehow, still with no success. THEN(!!!), I realized I copied the script above in the how-to instead of the script from my own FriendFeed (duh…). Worked perfectly once I made that change.
Thanks for the how-to, I’ve been wanting one of these on my blog.
http://one9.us/blog/about/lifestream
by: Aaron
What can I add to my style sheet to get rid of that blue border, or is it even possible?
by: Aaron
Nevermind that last question, I figured it out by looking at your CSS.
by: Freddie Laker
Good post.
All of this withstanding the biggest problem I’m having these days is to get my clients to understand the important of social media in terms of brand building. They still think it’s some kind of novelty that teens are into. I’ve been trying to get people to understand that social media sites are having a huge influence not only in the conversations people are having about a brand, but also on the search results that are coming up.
I recently wrote a post about the tools that people are using to monitor the online space and that clients are still hung up in web analaytics to judge their brands health in the online space, but I’d like to hear your thoughts on it. E-mail me some time!
-Freddie
Digital Strategist / TakeMeToYourLeader.com
by: Jessen
Cool. Thanks for the guide! I’m trying to make a blog for my current website. Do give some comment about it.
http://www.mybaby.com.my/
by: reader
It would be nice to install and use lifestream as easy as sidebar widgets.
by: unlimited game
This is great, but now I need to learn how to design templates for this stuff.
by: Mikki
Good job Mitch!
I will use the same widget on my blog.
by: kiki
Good post.
by: GR
This is great. My only problem is I can’t seem to get rid of the white background. How do I do that?
Thanks
by: studionashvegas
GR – use this css:
That should do it.
by: GR
(hangs head in shame) CSS is way above my head. WHere do I put that code? If I put it in the main style sheet how do I make it reference the life stream only? Thanks for your help. Tomorrow I will buy CSS for Dummies
by: GR
found a css style sheet here http://robwestbrook.com/2008/10/02/adding-friendfeed-feed-to-wordpress-content/ that works perfectly
by: mike mills
This is a great tweek to the friendfeed. I had a little bit of trouble getting it to work at first, but then I found my prob. I used Dreameaver to put the code on the page and it created an extra space that threw things off.
by: PeterQ
WoW! Thats good!
Thank You!