Embedding FriendFeed For Your Lifestream

Submitted by learnbythedrop on Mon, 01/19/2009 - 11:10

After the recent upgrade of my site at www.awakenedvoice.com to Drupal 6 I decided to make some improvements to the lifestream page that I had created using Simple Pie. Simple Pie is a great, free tool but there were some issues that I wanted to clean up but just didn't have the time to research, implement and test all the adjustments I wanted to make.

Favicons and Twitter

For example, I couldn't get the favicon images to show up for all of the services where I publish. So some entries had that nice little image next to them and some had nothing. I'm obsessive about stuff like that and wanted to change it. This issue wasn't necessarily the fault of the Simple Pie software, because the services in question did not have their favicon stored at the location ('mysite.com/favicon.ico') that is considered standard.

The second problem with Simple Pie was related to Twitter. There's a known issue that causes Twitter feed problems when Simple Pie tries to grab and display new items. As a result Twitter updates were showing up only sporadically on the lifestream page.

Module Options

Drupal offers a decent variety of module options to assist with creating a lifestream, including FriendFeed, Activity Stream, Feed API and the core aggregator module. All of them have their merits but required more work time than I wanted to invest in order to achieve my desired result of a lightweight, sharp looking stream of activities that wouldn't add too much overhead to the site. Since I'm a member of the FriendFeed service and had heard that their lifestream embed widget was customizable via CSS I decided to try and use that as the source of the stream.

The FriendFeed Solution

If you head over to http://friendfeed.com/embed/widget when you're logged in to that service you will see the options for creating a bit of javascript that you can eventually embed in a Drupal page or block to present to your users. If you uncheck all the options you will be left with a bit of javascipt that looks like the following.

I bolded the two areas of note in the script because you can change them to suit your needs. Instead of username you would have your FriendFeed username inserted in that spot. And you can alter the number of items displayed by changing the num=10 value to something else. I set that value to 100 and stripped out the <noscript> part which will display an image instead of the javascript if someone's browser does not support javascript. In the end I was left with the following code.

I then took that script and pasted it into a new page on my site, with an input format of Full HTML, and set the path of /lifestream. At this point there were two issues left to tackle. There was still a blue border around the items and the background did not match the text of my page. This is where I needed to add some custom css for which FriendFeed provides some guidelines.

In order to remove the blue border around the items and make the background color match the colors on my page I adjusted the border element to be zero pixels in size and set the background color to "transparent". I took the code snippet and added it to the bottom of the style.css file for my theme. That snippet is attached to this post. There are a number of lines in the snippet but I only changed the two that have "!important" added to the end of the line. Adding that bit tells FriendFeed to ignore those elements and let your elements take priority.

The Final Product

Click the image below or head over to http://awakenedvoice.com/lifestream to see the final product.

Attachment	Size	Hits	Last download
friendfeed_embed_css.txt	639 bytes	655	16 hours 54 min ago

Bookmark or Share Post

learnbythedrop's blog
3183 reads

Comments

by Arasmus (not verified) - 03/02/2009 - 19:27

Blue Border

Hmmn - I can see that on your Awakened Voice site there is no blue border but even though I set my border variable to zero I still get one. Indeed when I cut and paste your HTML code above into my site I also get a blue border. Any thoughts as to why this is? And any thoughts on how to get some control over the blue-colored hyperlinks so that one can make then fit better into a site's pre-existing palette?

by learnbythedrop - 03/02/2009 - 22:52

CSS Edits

Did you edit the CSS as per the file attached to this post? What I see on your site is that the FriendFeed CSS elements are still affecting that page. Which leads me to believe that you haven't altered the CSS for your theme as indicated in the last paragraph of the post. Or perhaps you did and just missed something. Either way, I suggest double checking the CSS for your theme and adding the snippet of code attached to this post if you have not done that already.

by khatia (not verified) - 06/06/2009 - 00:48

code

Could you please show, how exactly your code (end result) looks like? I'm not getting how you removed blue line

by learnbythedrop - 06/06/2009 - 00:57

Edit Style.css

There's a text file attached to the post that includes the exact CSS that I've used to remove the borders. That CSS would get appended to the style.css for the theme that you are using.

by Lorenzo (not verified) - 07/29/2009 - 13:06

Frustrated

I pasted the CSS code directly into my website's CSS file and I pasted the Friendfeed.com widget code into an html widget in wordpress and still the border appears, no service logos appear, and there is a bar that separates the feed's entries and it's large (I was planning on removing the hr bar entirely when I got the rest working). What am I doing wrong?

by Lorenzo (not verified) - 07/29/2009 - 13:09

Working?!

I pasted the widget you featured and the noscript removal made the logos appear? Weird. Now how can I get rid of that comment link for every entry?

by learnbythedrop - 08/03/2009 - 18:13

FriendFeed Comment Link

I haven't figured that out myself so I just left it in. That may be difficult to remove since I think FriendFeed would like to encourage people to come to their site.

by WillSloan - 08/17/2009 - 17:38

Possible Solution

Have either of you tried adding the !important rule at the end of each modification? I haven't tried this myself, but I thought it might be worth noting. Perhaps the modified style is getting overlooked because of the default style. Just a suggestion.

UPDATE: Never mind, I just took a look at the attached stylesheet and it already contains this rule. Sorry!

by WillSloan - 08/17/2009 - 18:23

I Fixed Mine...

I found a solution for my specific issue. I had to be sure to enclose the FF script in a DIV layer with a class name of "friendfeed widget" so that my stylesheet would work. You can check it out on my blog: http://willsloanonline.blogspot.com

My CSS:

.friendfeed.widget,
div.friendfeed.widget div,
div.friendfeed.widget span,
div.friendfeed.widget img,
div.friendfeed.widget table,
div.friendfeed.widget tr,
div.friendfeed.widget td {
position: relative;
background-color: transparent !important;
color: black;
padding: 0;
margin: 0;
border: 0; !important;
text-align: left;
line-height: 1.3em;
width: auto;
float: none;
color: #666666 !important;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: 10pt;
position: relative;
border: none !important;
overflow: hidden;
}

by westius (not verified) - 09/09/2009 - 23:54

Great post - thanks

This was just what I was looking for, and I've made it work pretty well with blogger - you can paste the friendfeed code in a gadget - it doesn't seem to work in an actual blog post. In the html I added (adapted from your's):

/* Friendfeed
----------------------------------------------- */

.friendfeed {
color: #222222;
font-family: Arial, sans-serif;
font-size: 10pt !important;
border: 0px !important;
overflow: hidden;
}

That got rid of the border.
Thanks very much for this, very well explained and easy to implement.
Cheers
marc

ps Awakened Voice is a great example of a personal blog!
pps my lifestream is here: http://www.mrscienceshow.com/2009/09/lifestream.html