Javascript Sidebars

2004-08-20

I saw this post about how to put part of your moblog on a side bar on your front page using PHP. Getting PHP to run can be trouble for some or your ISP might not support it. I also saw this link on how to get it to work using some MT plugin. That's of course an MT specific solution and it has the disadvantage that the bar doesn't update automatically.

Well, here's a way to get it to both update automatically and not require PHP or any plugs.

That is to have your blog generate a javascript page generator page for you (that's a mouth full) and then put a short javascript link on your main page. This is how blogrolling.com works for example.

In your moblog make a new index template and set the output file to "mobar.js"

Set the Template Body to something like this

mymobar('Moblog'+<br /><MTEntries lastn=\"3\"><br />\"<$MTEntryTitle encode_js=\"1\"$>\"+<br />\"Posted: <$MTEntryDate encode_js=\"1\"$>\"+<br />\"<$MTEntryBody encode_js=\"1\"$>\"+<br />\"<a href=\\\"<$MTEntryPermalink$>\\\" target=_blank name=\\\"comments\\\">Comments</a> | <a href=\\\"<$MTBlogURL$>\\\" target=_blank>View all</a>\"+<br /></MTEntries><br />'') ;<br /><br />function mymobar( s ) {<br />  document.write( s );<br />}

rebuild

Now go to your main blog and edit the template for your front page. In the spot you want your mobar to appear put in this line

<script language="javascript" type="text/javascript" src="http://yourblock.com/moblog/mobar.js"></script>

Now, if you didn't make any typos and you fixed (http://yourblog.com/moblog/mobar.js") to point to the mobar.js on your site you should have a live mobar on your blog.

If you want to modify it, the important parts are that each line in your template that generates text needs to have quotes around it and it needs to end with a + sign. In top of that you need to add encode_js="1" to tell movabletype to adjust anything it outputs to work with Javascript. And on top of that you need to make sure any quotes you use are escaped with a backslash \ , like for example the links HTML in the example above. If you make a mistake the browsers will not display anything where you expected your sidebar to appear and you'll get a javascript error. It can be a pain to debug if you are not used to alll that but once you get it correct it should work fine.

This method will work with almost any blogging system. It will even work across servers. For example it's what I use to get the headlines from game-science.com to appear on the tokyopia.com front page on the right bar. The game−science people put in a template to generate a javascript file that outputs their headlines and then I just put the one line javascript on our site to use their headlines.

The only issue is the browser viewing the page must support Javascript but half the stuff on the web requires javascript now−a−days so I suspect that's not a big problem.

Comments
Souryuutoukyokudou
fallen beauties