Posterous Sidebar Flair Hack
Notice the two pieces of "flair" in my posterous sidebar, "recent posts" and "flickr photos". Perhaps you've tried to embed some javascript in your custom posterous theme and found out that they simply don't allow it. That's probably a good thing. You can get crazy and buggy with this stuff. However, without javascript support, typical blog sidebar widgets won't work.
But... I googled some suggestions and customized them for my needs. Basically, some javascript in an iframe and you can build yourself a nice, safe sidebar widget. This is sort of how Google Gadgets on iGoogle work. I think I might eventually lose the flair, but in the meantime, I'll share how it's put together. My widget supports showing posterous posts, tweets, rss feeds, delicious feeds, and flickr photos.I built the "recent posts" widget using my posterous rss feed. The two iframes I embedded in my theme are<div class="sidebar-block">
<iframe marginheight="0" marginwidth="0" src="http://files.martinruiz.com/files/
martinruiz-posterous-sidebar-widget.htm?method=rss& feedurl=http://martinruiz.posterous.com/rss.xml
frameborder="0"
style="border:0;height:525px;width:290px;">
</iframe>
</div>
<div class="sidebar-block">
<iframe marginheight="0" marginwidth="0"
src="http://files.martinruiz.com/files/
martinruiz-posterous-sidebar-widget.htm?method=flickr&
username=martinruiz&user=8335702%40N03&
count=3&layout=v&size=m"
frameborder="0"
style="border:0;height:600px;width:290px;">
</iframe>
</div>
Checkout more here.
You need to set the width and length of the iframe to fit your theme's sidebar. It might require a little trial-and-error to get it right.
About the Parameters"method" parameter can be set to "posterous", "twitter", "rss", "delicious", or "flickr".
"css" parameter can be set to the path of your CSS file. Otherwise it uses defaults that I like:)
"style" parameter can be set to "posterous" --- this uses "posterous" default theme
"header" parameter can be set to the Header text for the widget, i.e., "Recent Posts"
"count" parameter is the number of items to display
parameters for "method" = "posterous"
"hostname" = sub-domain of posterous blog, i.e., martinruiz for martinruiz.posterous.com
"tag" = tag, i.e., "technology"
parameters for "method" = "twitter"
"username" = twitter username, i.e., martinruiz
parameters for "method" = "rss"
"feedurl" = path of rss feed, i.e., http://martinruiz.posterous.com/rss.xmlparameters for "method" = "delicious"
"feedurl" = path of delicious feed, i.e., http://del.icio.us/feeds/json/RuizMartin/martinruizparameter for "method" = "flickr"
"username" = flickr user name, i.e., "martinruiz"
"user" = flickr user id, i.e., "8335702@N03" --- note replace "@" with "%40"
"layout" = "v" for vertical, "h" for horizontal --- default is "h"
"size" = "s" for small, "m" for medium, "t" for thumbnail, "b" for big --- default is "m" Give me a heads up if you use it, so I can look out for you:)
"feedurl" = path of rss feed, i.e., http://martinruiz.posterous.com/rss.xmlparameters for "method" = "delicious"
"feedurl" = path of delicious feed, i.e., http://del.icio.us/feeds/json/RuizMartin/martinruizparameter for "method" = "flickr"
"username" = flickr user name, i.e., "martinruiz"
"user" = flickr user id, i.e., "8335702@N03" --- note replace "@" with "%40"
"layout" = "v" for vertical, "h" for horizontal --- default is "h"
"size" = "s" for small, "m" for medium, "t" for thumbnail, "b" for big --- default is "m" Give me a heads up if you use it, so I can look out for you:)
5 comments
Jan 25, 2010
Marco Polletin said...
thanks for the Posterous tweak tip, you have a nice theme anyway!
Jul 20, 2010
Mirek Martincik said...
thanks so much for the recent posts hack. i can't believe posterous doesn't natively support widgets like that!
