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.
<script type="text/javascript" src="http://friendfeed.com/embed/widget/
username?v=2&
num=10&hide_logo=1&hide_comments_likes=1&hide_subscribe=1"></script><noscript><a href="http://friendfeed.com/
username"><img alt="View my FriendFeed" style="border:0;" src="http://friendfeed.com/embed/widget/robsafuto?v=2&num=10&hide_logo=1&hide_comments_likes=1&hide_subscribe=1&format=png"/></a></noscript>
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.
<script type="text/javascript" src="http://friendfeed.com/embed/widget/robsafuto?v=2&num=100&hide_logo=1&hide_comments_likes=1&hide_subscribe=1"></script>
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.
Bookmark or Share Post
