kadyellebee

XFN (XHTML Friends Network) is a new way of notating the people you reference on your pages or blog entries. There are a variety of values for referencing human relationships through the links on your site.

Personal comments about implementation:
I personally have a lot of online friends, for sure, but I’ve only met only one person on my blogroll, rina-doll . And I do have a few friends who "work" with me that I can reference (on the MT forums ). And a few friends who live here in the PacificNW, I feel like they are neighbors to me, even through that’s a bit broad. So my number of notations may be smaller than the average person. One thing I thought of that I don’t see how to do - I have some family that I talk about regularly, but they don’t have a site. I was thinking that maybe using some sort of similar notation, I could reference them. Hmmm... I’ll be thinking about that.

In Matt’s comments, msquadrat pointed out "But how do you keep your link releations up to date?" My solution? The people who I regularly mention are people who I have macros programmed into my blog for. That’s how MT can be used to an advantage with this system. I edited the macro tags to add relationships. So if something changes, its as simple as updating the macro module where I store all of these quick links.

I took the macros which looked like this:

<MTMacroDefine name="zuly" string=":zuly:">

<a href="http://www.zulyzu.com/" target="_blank">Zuly</a>

</MTMacroDefine>

and changed them to this:

<MTMacroDefine name="zuly" string=":zuly:">
<a href="http://www.zulyzu.com/" target="_blank" rel="friend">Zuly</a>
</MTMacroDefine>

Then rebuilt. Now any reference to :zuly: in all previous and future posts will mention that Zuly is a friend.

To enhance my blogrolls, I edited the relevant links, adding rel="friend" (and so on) as an Extra Link Attribute on the Edit Link page of blogrolling’s member pages.

Finally, I used CSS to differentiate between the people marked Friend and the other external links. I was already marking external links with an icon (for browsers that support it), so it was just a matter of adding detection in my stylesheet for the rel="friend" notation. I created some new images for the links, as well, since I was getting bored of the original one I colored from Web-graphics.

• External links use this icon:


• External links to friend sites use this icon:

Here’s the CSS, both the original 2 selectors and now the new one for friends:

.blogbody a[href^="http:"] {

background: transparent    ¶

url('http://kadyellebee.com/icon/outlink.gif') 100% 50% no-repeat;

padding-right: 8px;

}

.blogbody a[href^="http://kadyellebee.com"] {

background: inherit;

padding-right: 0px;

}

/* Friend relation for XFN */

.blogbody a[rel^="friend"] {

  background: transparent    ¶

url('http://kadyellebee.com/icon/outlove.gif') 100% 50% no-repeat;

  padding-right: 8px;

}

So far, that’s what I’ve implemented. I have a feeling that this idea is going to grow, though, and that may encourage me to add more things to work with it.