How to embed your FriendFeed discussions on your website
- Update: This unpublished feature has since become very well documented and I’ve also changed my website from the way I describe it below, but this should still be useful information.
I have been spending more and more time on FriendFeed, to the point that I’ve centered my entire personal website around my FriendFeed stream. The homepage of my site makes use of an unpublished feature that allows me to embed my main FriendFeed page on my own website. You can find directions for doing this at http://friendfeed.com/embed. I took this one step farther by customizing the javascript query string and CSS to produce a format that works better on my site.
However, I also wanted a sidebar widget that only displays my FriendFeed discussions (likes and comments), similar to the widgets that Twitter offers. Through the following alchemy I was able to achieve this goal:
- From within FriendFeed I found the URL for the Atom feed of my discussions – http://friendfeed.com/acheslow/discussion?format=atom
- Because this feed uses relative URIs for the HREFs and images I had to transform the XML into absolute URIs so the images and links would not be broken (I’ve posted this as a bug to FF). To do this I fired up Yahoo Pipes and created a simple regex transformation that replaced the item.content and item.description objects from href=”/ to href=”http://friendfeed.com/ and from src=”/ to src=”http://friendfeed.com/
- I could have used the output of this pipe directly but prefer the formatting that Feedburner provides with its BuzzBoost feature, so I took the RSS-formatted output of my Yahoo Pipe and burned it using Feedburner.
- Finally, using BuzzBoost I generated the javascript code to re-create the feed as HTML and embedded this script on my website using a WordPress text widget.
You can see the results on the right-hand side of this website under “Recent Discussions”.
[...] Alan Cheslow – How to embed your FriendFeed discussions on your website However, I also wanted a sidebar widget that only displays my FriendFeed discussions (likes and comments), similar to the widgets that Twitter offers. Through the following alchemy I was able to achieve this goal: 1. From within FriendFeed I found the URL for the Atom feed of my discussions – http://friendfeed.com/acheslow/discussion?format=atom 2. Because this feed uses relative URIs for the HREFs and images I had to transform the XML into absolute URIs so the images and links would not be broken (I??ve posted this as a bug to FF). To do this I fired up Yahoo Pipes and created a simple regex transformation that replaced the item.content and item.description objects from href=??/ to href=??http://friendfeed.com/ and from src=??/ to src=??http://friendfeed.com/ 3. I could have used the output of this pipe directly but prefer the formatting that Feedburner provides with its BuzzBoost feature, so I took the RSS-formatted output of my Yahoo Pipe and burned it using Feedburner. 4. Finally, using BuzzBoost I generated the javascript code to re-create the feed as HTML and embedded this script on my website using a WordPress text widget. You can see the results on the right-hand side of this website under ??Recent Discussions??. tech web SHARETHIS.addEntry( { title: “Alan Cheslow – How to embed your FriendFeed discussions on your website”, url: “http://turquoise.tm.land.to/?p=328″ } ); [...]