Nonsense

Update 1/7/2010: I originally posted on a self-hosted Wordpress blog. I've moved onto Posterous, as you can see, so references to my about page don't really work anymore. I've gone ahead and left the content alone, however, since it may someday prove useful to someone.

Ever since I set this blog up to carve out my own little piece of electronic real estate to be used for my own (occasionally devious) purposes, I’ve had an “About” page set up, which is all well and good except the only thing it ever led to was a blank page. Not exactly the most flattering way to represent yourself, huh?

Parallel to all this, I signed up for a Friendfeed somewhere along the way. If you’re not aware, Friendfeed essentially works as a place centralize whatever it is you’re doing on the web. You plug your account names for any/all of a laundry list of web services, social networks, etc. and what you get is essentially your own little stream of personal content: What you shared from Google Reader, what restaurant you raved about on Yelp, what picture you just uploaded to Flickr and who you just got into a pissing contest with over on Twitter. It’s all there.

Like everything else on the web these days, Friendfeed itself functions as a social network of sorts and it’s malleable enough within it’s confines to foster conversations. Unfortunately, I think it’s also kind of ugly and as superficial as that sounds, I don’t generally use Friendfeed’s site for anything particularly social.

In any case, this isn’t about slagging on Friendfeed because what interests me is the widgets that let you easily pull your content out of Friendfeed for display anywhere. This is right in line with my original use for Friendfeed: It fed a ll the things I wanted to share into Facebook for my friends to see. That was accomplished with a Friendfeed app, however, so it was pretty much plug, play and forget.

This got me thinking about my barren About page. It occurred to me that I never really got around to sliding anything in there because there’s never really been a compelling reason. Personal blogging is already very much about carving your ego into the internet. After all, I’m not selling anything, nor am I providing any particular kind of service other than to perhaps occasionally entertain the odd passerby who stops to read a bit. I guess I could say that this blog was originally intended as a way for me to urge myself to write, but a quick glance at my post counts would pretty much render that argument moot.

In that vein, an About me page seems pretty ridiculous. I don’t really need to put my resume up here because this site isn’t something I’ve ever intended to use to market myself. It just is and it’s totally, utterly random.

So Friendfeed, huh? I’m already feeding everything into Facebook, why not here? Why not use that as an About page? Seems kind of logical, especially given the lack of such logic in my actual use of this blog. It took a little hunting around to figure out precisely how to do this, but here’s what I came up with.

First thing you’ll want to do is create a Wordpress template file that’ll contain the gist of your code. I pulled this straight from Clever Doll, who has has the steps outlined perfectly. I’d highly suggest grabbing the first part of your lifestream set up there, which'll leave you with something like this:

Yuck.

The issue I ran into once I had Friendfeed plugged into my Stream page was the actual appearance. The default look for Friendfeed just doesn’t jive with my theme here and there’s not a lot you can do with the Friendfeed widget to lay it out to your liking. Friendfeed does give you a whole mess of classes to play with in CSS, but if you’re a CSS newb like me, this is where the whole process breaks down and frustration starts to set in. Specifically, I wanted to achieve the following:

• Get rid of that ugly blue border.
• Make the background transparent so the white of the FF widget doesn’t clash with the off-white of my theme.
• Get rid of those link colors. I guess it’s good practice to make your links stand out, but I feel like it distracts from any text and looks garish in comparison to the surrounding site. Besides, the service icons imply linkage, why over do it?
• Let overflow text from the comment area wrap around to the next line, rather than simply disappear under the sidebar off to the right.
• Match text colors and fonts to the rest of my site.

Basically, that five-bullet list is all about one thing: Making Friendfeed itself invisible. Sorry, FF, you know I love ya.

Anyway, I tried to sort out the CSS on my own according to Friendfeed’s advice, but I simply couldn’t get things to look the way I needed them to. None of my changes seem to make a difference, which I’m sure is my fault. Like I said, my CSS skills are weak. I know how to edit other people’s work into something that fits with what I want, but composing my own style is out for me at my current skill level.

Using Firebug, I figured out that the FF widget was pulling its own default CSS file, which would normally overwrite any changes you made that didn’t include “!important,” which would force an override. The best part about this was that I could simply copy and paste the full CSS straight from Friendfeed into my own stylesheet and use that as a template to alter the exact things I wanted to alter. You can find the widget CSS on Friendfeed here.

Okay, so I have my list of things I'd like to accomplish, so let's get cracking. Like I said, I just took the original FF CSS, but the places where I made my changes are marked "!important" and that's what I'll comment on. I'll just stick to the parts I changed, so follow along and don't be too scared to dive in elsewhere! Commentary on each section to follow.

FFCustom1.css: The background-color property will affect the, well, background color of your new lifestream. I made mine transparent so the background color as defined elsewhere would stick.

FFCustom2.css: Here I changed the font-family to match my theme. Adjust for yourself according to your current stylesheet. I also changed the font size of the majority of the FF text to match the body text in my regular blog posts. Finally, get rid of that nasty blue border by changing the default border property to 0px or none.

FFCustom3.css: Again, just wanted to match up the style, this time for links and visited links. Altered the color to match links from the blog, then changed text-decoration to none to remove the underline. Unlike in a larger body of text, the link is really the thing here. Underlining it seems extraneous. Still, might continue to play with this one.

I left a lot of the code from there on out untouched, at least until FFCustom4.css. This was a big one for me. If you look at the screenshot above, you'll see that the end of the comment below the top couple Friendfeed posts just trails off towards the end. Adding the white-space: normal property should get your comments flowing better.

I left everything else alone in my implementation. The above changes got me to where I need to be. I know that a lot of the other CSS is pretty extraneous if you chose to not include the Friendfeed logo and various other things in your original widget setup. You also probably don't need to include any of the properties that you don't change, since those are going to come from the default FF stylesheet anyway. Just be sure you mark anything you do change as !important. This is key!

Check out my results and feel free to copy them or do your own thing. Drop me a comment with a link to your own lifestream if this helps you out some!

Update 1/7/2010: This post is probably showing its by now. I haven't fooled around too much with Tumblr as of late, but I do know that there are some easier ways to get those Disqus comments built in. I'm just keeping this around 'cause, well, I liked it once.

Some of you may have noticed a link to my tumblelog over in the sidebar here. Whether or not you've clicked through to it, I suggest checking it out.

Of course, you're probably asking yourself, "What's a tumblelog?" Well, I'll let Wikipedia take this one away:

A tumblelog (or tlog or tumblog) is a variation of a blog that favors short-form, mixed-media posts over the longer editorial posts frequently associated with blogging.

There's an absolutely incredible tumblelog service called Tumblr that really lets you dig right into running and maintaining a tumblelog. It's free and very customizable and extremely easy to post to. Anyone intimidated by the idea of running a blog should at the very least look into setting something up on Tumblr. It's very basic and, given the simplicity with which you can post, very ideal for stream of consciousness style blogging. See a cool video and want to share it? You can do that in seconds and without dealing with a lot of goofy code if that's not your thing.

I've actually been flirting with the idea of being done with Wordpress altogether. [Note from 2010: It was a long courtship, but I've done it!] I don't really like playing with code all that much, and as easy as it is to use Wordpress, it still needs a little more hand holding than I sometimes want to give it. Tumblr has struck me as the ideal platform to switch over to with one exception: There is no built in comment system, which is a total dealbreaker.

I was quite happy to discover that the comment community site Disqus has instructions on integrating with Tumblr. I tried some time ago to integrate Disqus into this site, but gave up after I hit a few kinks here and there. I figured I'd try it out with Tumblr instead this time around, and I'm pretty pleased with the results. If you click over you'll see a comment count link in the right sidebar.

The thing is, this didn't go quite as smoothly as I'd hoped. Your mileage may vary quite a bit based on which Tumblr theme you're using, but I figured I'd share my experiences integrating Disqus into my chosen theme, Liquid Typo.

According to Disqus's intallation instructions, you've got two snippets of code: One that creates the comment count link and one that creates the actual comment box you write into. These need to get placed in very specific locations, but the provided instructions don't really work for every theme. The idea is that the comment count link goes before the </div> {/block:Posts} part of the HTML and the comment box code goes after. I tried these instructions as written on the Liquid Typo theme and it kind of came out a mess.

After playing around with it a bit, I figured out the best way to code this is to use the comment count link code within the div for each "block" type. You see, Tumblr has various types of content that it will format accordingly depending on how you want your content to appear. What this means it that when you post a photo, the site will reflect that an optimize the layout of that photo for ideal presentation. Same thing if you're sharing a quote or a video clip or whatever. In the Liquid Typo theme, each "block" has a separate div for a sidebar on the right hand side with meta information about the post. I figured this was an ideal location for the comment counts. All I had to do at this point was sort out the precise location to stick the Disqus code, which ended up looking like this (using the photo block as an example):

The commented out code is what I added from Disqus. Inserted here, the comment count link will appear below the permalink for the type of content it is ("Photo" in this case). Just repeat for each post type block ("Regular," "Photo," "Quote," "Link," "Conversation," "Audio," and "Video").

All that remains is to add the second, longer code snippet from Disqus. Happily, there's no extra tweaking needed here. Just copy and paste the code right where it suggests, after {/block:Posts}. Should work like a charm!