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 add your drawing board online theme and 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.
