My Random Walk

Posterous Sidebar Flair Hack

featured   hack   posterous   technology  

Update 1: I've hacked together a Posterous Sidebar Flair Hack Builder Tool here.

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 example here.

Update 1: I've hacked together a Posterous Sidebar Flair Builder based on this post 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.xml

parameters for "method" = "delicious"
"feedurl" = path of delicious feed, i.e., http://del.icio.us/feeds/json/RuizMartin/martinruiz

parameter 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:)

<div class="sidebar-block"></div>
<div class="sidebar-block"></div>


Update 1: I've hacked together a Posterous Sidebar Flair Builder based on this post here.

42 comments

Jan 25, 2010
Marco Polletin liked this post.
Jan 25, 2010
Marco Polletin said...
thanks for the Posterous tweak tip, you have a nice theme anyway!
Jan 25, 2010
Martin Ruiz said...
Thanks Marco.
Apr 19, 2010
Matías Abad said...
NICE
Jul 18, 2010
Thanks for the tip.
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!
Oct 10, 2010
Martin Ruiz said...
Update... I've been getting a few hits per day about this so I've hacked together a Posterous Sidebar Flair Hack Builder Tool at http://files.martinruiz.com/files/posterous_sidebar_builder.html

Hopefully a few hours well spent. Enjoy:)

Oct 11, 2010
Ingenious! Totally admire this kind of creative solutions! Kudos, big time!
Oct 18, 2010
cyno phagie said...
beautiful baby. even though old mcwhatshisname beat you to most of the iFrame stuff with all his self-hosted widgets, you are the genius in my book for stackin' em up and creating an unbelievably easy builder. now work on trying to incorporate some of the finer points of Facebook integration with fan pages and fan apps (at least until Posterous comes through as recently hinted) and i'll name my blog after you
Oct 18, 2010
cyno phagie liked this post.
Nov 17, 2010
We Are Social said...
Excellent work Martin - especially when we're are so limited without use of JS.

However, tried your Builder but can't link to external CSS-file, which makes the sidebar widget useless, as it adapts another stylesheet?
The link was valid and not https or anything....

Thx!
Mads Fuhr // www.playgrounds.dk

Nov 17, 2010
Martin Ruiz said...
@mads fuhr --- I deployed a quick bug fix... let me know if it's still a problem.
Nov 18, 2010
We Are Social said...
@Martin - beautiful. With a few tweaks it is now working. Yehaaaa!
Jan 23, 2011
Bart van Maarseveen liked this post.
Jan 25, 2011
appfreak said...
This was really useful, thanks a lot for taking the time. I really hope the Posterous team does something about most recent/popular sort of thing
Jan 26, 2011
Captain Wingnut said...
I used your "Recent Posts" sidebar widget on my Posterous site, perfectedchaos.posterous.com, and it works wonderfully! Thanks for the clear and easy-to-follow directions. Excellent work on this, it is exactly what I was looking for to complete my new Posterous theme, "Starry Night."

It would be really cool if the iframe and underlying content could resize in height dynamically instead of having a fixed size, to allow for a more fluid sidebar layout, especially when the widget is being used at the bottom of the sidebar, as on my site.

Jan 27, 2011
Martin Ruiz said...
I love your theme.  I'll look into dynamically resizing the iframe.  I recall it being a little tricky.  Hopefully it doesn't require javascript outside the iframe.
Feb 18, 2011
Jonahlyn Gilstrap liked this post.
Apr 10, 2011
Rahul R said...
Hi
I tried to use your hack in my new posterous blog.But the rss feed that I inserted isn't coming in the sidebar.What am I missing here?Please have a look at it and reply.
http://rahulr92.posterous.com/
I am a bit new to posterous.
Thanks in advance
Rahul
Apr 10, 2011
Rahul R said...
Sorry It was my mistake.I have fixed it.
Anyway thanks for the splendid work.
Thanks
Rahul
Apr 27, 2011
Is it possible to remove the ""Recent posts" from the RSS-widget? Or at least change the language of the title?
Apr 28, 2011
May 04, 2011
@Yniim said...
Thanks !!! Very helpful!!! (I know nothing about programming)
May 10, 2011
John Jensen said...
Thanks Martin, works well on my site.
Jun 11, 2011
Anish Kothari said...
Thanks Martin!
Jun 23, 2011
Gerry Kirk said...
Great tool, am using it for recent posts. I also want to build a table of contents on my Posterous site, but it seems to be hitting a limit on number of links it will show. I have just over 100 posts I want to build links to, but only about 60 are getting built.
Jul 21, 2011
Thanks !!! Very nice!
Jul 23, 2011
kripssmart liked this post.
Jul 26, 2011
Helen Yung liked this post.
Jul 31, 2011
Philip Campbell liked this post.
Jul 31, 2011
Philip Campbell said...
it's great. i'd love to have images as well on the left side if possible for my rss feed (if it could extract the images) btw, i tried with my cname site and it did'nt work so i had to take it off my rss feed. my site - http://blog.me.dm - thanks! :)
Aug 23, 2011
Bonnie Gibbons said...
Nice tool, but if you click a link within a tweet, it opens inside the little iframe.
Sep 03, 2011
Limbs Andthings said...
hi martin, can you think of any reason posterous would have disabled the Posterous RSS portion of the widget? it stopped working on all my sites about a week ago. http://whatgetsmehot.posterous.com
thanks
Sep 04, 2011
Martin Ruiz said...
Broke for me too... I've made a small tweak. let me know if it works for you now.
Sep 04, 2011
Limbs Andthings said...
perfect. can you tell us what you did in case it has anything to do with why my facebook connect broke too? like was it an https thing?
Sep 05, 2011
Martin Ruiz said...
It appears that posterous api is now case-sensitive with hostnames. In my case, "MartinRuiz" stopped working, but "martinruiz" works just fine... so I'm simply converting to lower-case behind the scenes.
Oct 10, 2011
FTF said...
Hi. Thanks a lot for this. I'm not even remotely techie. How do I make the flair look like the rest of my page? Right now, it's just text on a white background.
Oct 22, 2011
Super! Thanks.
Nov 01, 2011
Joe Ross liked this post.
Nov 13, 2011
Yankee Grandma said...
very nice thanks
Dec 31, 2011
Paul Carmody liked this post.
Jan 03, 2012
Sk said...
Hi Martin... Many thanks for the great tool. A quick question, can we allow transparency to the frame so that the frame can allow to use the site background color ?

Leave a comment...

Clicky