Embedding FriendFeed like we do here on building43

June 17, 2009 | building43

Michelle McGinnis

We’ve received a lot of questions on how to embed the FriendFeed widget as we have it here on building43, and of course we’re happy to share.

Before we get down to it, though, a big shout-out and thanks to Paul Buchheit and the team over at FriendFeed for their willingness to let us roll out a brand-new FriendFeed capability: user generated stylesheets for an embedded FriendFeed panel.

Embed a Styled FriendFeed in Three Easy Steps

  1. Construct your FriendFeed embed link and test it out.
    On building43, we’re not using the “widget” that’s available via http://friendfeed.com/embed/widget. That’s great for some purposes, but we wanted more interactivity than the widget provides.

    The embed link we’re using is structured

    http://friendfeed.com/USERNAME/embed

    where USERNAME can be either your username, or the group username. (Unfortunately it can’t be a search string—though that would be *very* cool, nudge nudge wink wink.)

    Here’s the raw embed link for building43:
    http://friendfeed.com/building43/embed

  2. Add your own stylesheet.
    This is the excellent new feature FriendFeed provided for us and asked us to share. Simply append the link you constructed above with
    ?css=http://yoursitename.com/your-friendfeed-stylesheet.css

    and FriendFeed will find your stylesheet and apply it. There is one important caveat, however: your stylesheet will be cached on the FriendFeed server, so every time you make a change you will need to change the name of the stylesheet. You can do this by adding ?v=1, ?v=2, ?v=3 etc to the end of the link.

    Here’s the building43 stylesheet-appended embed link:

    http://friendfeed.com/building43/embed?css=http://building43.com/wp-content/themes/b43-thematic/friendfeed-styles.css%3fv=18

    Note that to be on the safe side, we’ve url-encoded the second question mark (?) to %3f.

  3. Embed your link in an iframe inside an object tag.
    We originally found this code over on Layne Heiny’s site and adapted it for our use. Why use both iframe and object? One guess. Yes, our old friend Internet Explorer. IE will render the iframe and not the object; other browsers will (correctly) render the object and ignore the iframe.

    Here’s the code we use in the sidebar of building43:

    1
    2
    3
    
    <object type="application/xhtml+xml" data="http://friendfeed.com/building43/embed?css=http://building43.com/wp-content/themes/b43-thematic/friendfeed-styles.css%3fv=18" style="width:320px;height:1400px;padding:0;margin:0;" id="ffobject">
         <iframe src="http://friendfeed.com/building43/embed?css=http://building43.com/wp-content/themes/b43-thematic/friendfeed-styles.css%3fv=18" frameborder="0" width="320" height="1400"></iframe>
    </object>

Stuff we still want to do.

Like all ongoing projects, there are a lot of things we wanted to do that didn’t make it onto the site for launch. We didn’t figure out how to get our own icons replacing the FriendFeed icons. We didn’t attempt to mess with the profile pics or get fancy with the input box. And we’re sure there are many improvements we didn’t think of that could make the FriendFeed interaction on building43 even better.

We’re eager to hear your suggestions, not only for FriendFeed but for other types of site content and interactivity. Either post them in the comments here, shoot an email over to contribute – at – building43 dot com, or join the building43 converstation on FriendFeed.


Michelle McGinnis owns Friendly Web Consulting, specializing in the fantastic free publishing platform WordPress. She developed building43 using the WordPress theme framework Thematic, but any code-wackiness is entirely hers (and she welcomes suggestions on how to fix any issues you find).

Prior to starting Friendly, Michelle served as Interactive Product Director at nFusion, a high-tech integrated marketing agency in Austin, TX. While at nFusion she worked on web strategy, design and development projects for Toshiba, Nokia and 20th Century Fox among many others. You can find her on FriendFeed or Twitter @mcgirl2008.

This post was tagged:
 

{ 2 comments }

Guess October 15, 2009 at 11:35 am

Good article!

qin September 29, 2009 at 12:58 pm

<p> Frozen winter is coming,do you like to buy ugg to preventing cold and keeping warm.As a pursuer for the most stylish ,is there any ugg boots you have in mind?I think you have no excuse anymore if you don’t have a pair of <a href=”http://www.realugg.com/ugg-bailey-button-c-52.html“><strong>UGG Bailey Button Boots</strong></a>.The <a href=”http://www.realugg.com/ugg-bailey-button-c-52.html“><strong>Bailey Button UGG</strong></a> can be worn as a <A href=”http://www.realugg.com/ugg-classic-short-c-28.html?zenid=ae999140b41bfc67c4fd4f9ec46cb39e“><STRONG>UGG classic short Boots </STRONG></A> or  <A href=”http://www.realugg.com/ugg-classic-mini-c-33.html?zenid=ae999140b41bfc67c4fd4f9ec46cb39e“><STRONG> UGG classic   mini Boots </STRONG></A>. Hottest pop style.If you like the<a href=”http://www.realugg.com/ugg-tall-boots-c-30.html“><strong> UGG tall boots</strong></a>,www.realugg.com can provide high quality of <a href=”http://www.realugg.com/ugg-tall-boots-c-30.html“><strong>Ugg Tall Boots</strong></a> in low price,Are you straitened for  <a href=”http://www.realugg.com/3-pairs-ugg-boots-insoles-p-2147.html“><strong>Ugg Boots Insoles</strong></a>,don’t worry ,we have the best <a href=”http://www.realugg.com/3-pairs-ugg-boots-insoles-p-2147.html“><strong>Ugg Boots Insoles</strong></a> on sale ,many of which are hand made by craftspeople.RealUGG,Inc came up with some new-styles-<a href=”http://www.realugg.com/ugg-lo-pro-button-c-57.html“><strong> Ugg Lo Pro Button , </strong></a>   <a href=”http://www.realugg.com/ugg-womens-rainier-c-53.html“><strong>Ugg Women’s Rainier</strong></a>, We offer a wide range of UGG Boots in different color and styles.  Browse the website, we are sure you will find <a href=”http://www.realugg.com/“><strong>Real UGG</strong></a>  to tempt you! </p>

Comments on this entry are closed.

{ 3 trackbacks }