Singpolyma - Technical Blog

Error: Blogger Disassemble

2007-02-27T10:15:00.001-05:00

Just FYI to my readers - I cannot access the Blogger posting interface. This has been a problem on and off for the last six months and seems to be a problem with my ISP. I've used a proxy to get around it in the past, but Blogger's new security features make that not work.

I can edit my template, but I can't edit my posts. I'm posting this from Flock. Flock does not support Blogger labels, and thus all I am getting are Technorati links in my post footer. Old posts that should be updated with new information cannot be. I will try to do some of that from school, but I cannot from home.

I apologise for the inconvenience.

Tags: general

FreshTaggy Goodness

2007-02-27T10:03:00.001-05:00

FreshTags' core has been without update for quite some time (and, I believe, does not even render properly on the New Blogger. My version has not fared much better (although I did upgrade it to work with the new blogger :) ). Now it is time for some improvements!

For Blogger
Full integration with the New Blogger labels system! You have to paste a small code into your sidebar, and then FreshTags will pull its data directly from your local labels! Great for new users or people who have fully migrated. Best of all, to install this takes only a few steps on the wizard. Select 'Blogger' as the data source, enter your blog URL, change any other settings you might want, and click 'Generate Code'. Copy the code presented into your sidebar and then click the generated button to instantly install the widget with your settings! (Does not work on FTP blogs.)

For Everywhere
There are now three wizards for my version of FreshTags. There is one to generate the JSON for individual widgets (hackers). There is one to generate the full code for anywhere (some knowledge necessary). Finally there is one that generates a one-click button (or instructions and a button) for the New Blogger.

For MediaWiki
That's right. Go over to BloggerHacks to see it in action. FreshTags for MediaWiki! The wizards (above) can generate the code, but it's a bit hackier to integrate with the sidebar. Check out the BloggerHacks Sidebar and Header Section to see how I did it (click the view source wiki tab for wikicode).

For WordPress
I have updated FreshTags for Wordpress (with the help of my friend, Trevor Creech) to work as a Wordpress Widget. If you don't have widgets on your Wordpress blog, don't worry! It still works the old way.

technorati tags:freshtags, blogger, wordpress, mediawiki, tagging, tags, labels

WebOS Again

2007-02-20T00:25:00.000-05:00

I wrote once before about the existing WebOS systems. I planned to follow that post up, but time did not allow. Now I will follow it up twofold.

Using
I have come to use WebOS in a broader sense than I once did, which seems to be the 'catching' way to use it these days. That is, defining WebOS to include things such as Netvibes and BoxtheWeb, Omnidrive and Box.net, Zoho and Google Docs. I have been asked by some how I find WebOS useful at all, or if it is just an interesting experiment. I will attempt here to answer that.

Online storage is amazing. Work at home, save online, work at school, save online, etc. It is far more convenient than carrying flash media everywhere I go. I have used YouOS, Google Docs, and Gmail for this, but the result is basically the same.

Online office is similarly useful. I can work on and access the same document across computers at my house, or on campus, without any real hassle. Open, edit, save. Collaboration features just make it that much more fun! SVN for documents ;)

AJD (ala BoxtheWeb or Netvibes) is something I really love. I use BoxtheWeb, being the project originator, but there are many out there. I have many feeds, but I still like to be able to glance at them all at once. See what my contacts are reading these days, access my del.icio.us, and search, all from one page. There's something to be said for that convenience.

Last but not least (and I've likely forgotten others) : YubNub. I couldn't live without it. The amount of time saved being able to type 'g singpolyma', 'tet microformats', 'hwdial singpolyma.net' is amazing. And the development stuff is fun.

As for full-scale webtop integrations. I haven't been using the full-fledged features yet. There's something there though... just not ready yet (or maybe I'm too geeky to see it past the GUI ;) ).

Standards
I mentioned in my last post the need for standards. If I could run Netvibes widgets on my BoxtheWeb page while integrating my YouOS storage, that would be very most awesome. The companies themselves seem to be organising, but it's private and they're not taking input. So, as always, the community needs to get their foot in the door before the industry runs on its course and we have many too many products and it takes years to create standards.

Drawing inspiration from the Microformats process, research into existing practices/standards should be present before suggesting something new. To aid the community in organising such research and development, I have created a wiki and a discussion group.

Perhaps not all of us are geeky enough to do the research and formal stuff for the wiki, but anyone who uses any of the products listed above, listed on the wiki, or related products, as well as those interested in Simile and related projects can contribute to the discussion on the discussion group. Anything from observations about how things work, suggestions as to how things should/could work, or even pointing out projects that may have been missed is welcome. Feedback from users as well as geeks is necessary to make this project work.

Pipes

2007-02-15T09:34:00.000-05:00

So if you read any blog besides mine (and surely you do) you've by now head of Yahoo's Pipes application. Mashups without programming, and a team that's promising more and better things to come.

One of the immediate uses to the Blogger community occurred to virtually all hackers at once. Sorting the feeds. This has never been a problem for me (I screen-scrape my feed via hAtom), but for others the fact that Blogger feeds sort by when they were updated is annoying.

Aditya suggested creating individual pipes, but I wrote a sorting pipe, as did Ramani (who beat me to blogging about it and has a nice how-to written). Ramani discovered an issue that causes this solution to be a bit buggy just yet. It has to do with ATOM being stupid and RSS 2.0 being cool (yes, that's a partisan statement and not entirely true ;) ). Basically the publishing date is not being copied from the ATOM format to the RSS format correctly. Vote on Ramani's suggestion to get this fixed. I also discovered a less critical issue with the UI that may confuse some less geeky users. Please vote on my suggestion to get that fixed.

I also wrote a pipe for mixing together Google Calendars (for those of us who track events from more than one) into a nice, sorted feed of upcoming events. The email alerts system provided by Y! is dumb though, at least for this application. I want the next 5 events emailed to me every day... likely gonna have to write my own emailer for that...

JScripts Gets Some Love

2007-01-30T16:44:00.000-05:00

JScripts, my Ning app for storing JavaScript includes, has got some upgrades! At Johan's prodding I have added the following:

Include multiple JavaScripts with just one request to save time! It even has a form!
Tack ?minify on to a script to have JScripts compress it before transfer (more time saving!)
Tack ?callback=whoever on to have whoever() called after the script has loaded

OpenID as True Single Signon

2007-01-23T18:29:00.000-05:00

OpenID is meant as a distributed single signon protocol. Unlike corporate-only systems (ie, Google Accounts) however, you have to sign on at every single site. When I sign in to Gmail I am automatically signed in to Blogger, etc.

While the inability to store 'cookies' or similar across domains makes this not 100% possible, I have a suggestion that will make it easier.

Make every page on an OpenID-enabled site accept the openid_url GET parameter. If it is there, authenticate the user using that OpenID and then redirect back to the page the GET string was passed to - minus the openid_url parameter. Thus if I click a link from one OpenID-enabled site (where I am signed in) to another, I can be signed in automatically.

A browser plugin (ie, Firefox extension, or built into the browser as may come in Firefox 3) could be used to store the last-entered value into a form with text input named openid_url (dependent on user settings of course). This value would then be added to the GET request on any URL (or pertinent URL, depending) the browser goes to. OpenID-less sites won't care, OpenID-enabled sites will automatically sign you in.

Template Conversion 'Wizard'

2007-01-22T20:50:00.000-05:00

Well, not really. 'Helper' would be a better word. You upload an old-style template to the form and it translates most tags to the new syntax. It does not force your template to be well-formed (which is required), nor does it properly do attributes with expr: It is meant as a help for converting, not an auto-converter.

Note : especially for crufty or very-much-hacked templates (like mine was) I recommend re-engineering from scratch, from a default Blogger template, or from one of my templates. It is almost easier, and better for you in the long run.

Blogger Classic to New Blogger Template Conversion Helper

Table for Converting Blogger Classic to New Blogger

2007-01-17T15:19:00.000-05:00

I have added a lot of new tags and some corrections to the table.

A few people have asked for something like this. A table of Blogger Classic template tags and their new equivalent. This is not entirely possible because it is not a 1:1 relationship, but I will do my best. This is a post for those who were somewhat literate in the old Blogger and want to upgrade. Another post to check out would be Johan's original post. Great stuff.

If you have a template tag from Blogger Classic that you don't see here, post it in a comment and I'll try to add it. This is a work in progress.

<$BlogPageTitle$>	<data:blog.pageTitle/>
<$BlogMetaData$>	<b:include data='blog' name='all-head-content'/>
<style type="text/css">	<b:skin><![CDATA[
</style>	]]></b:skin>
<$BlogURL$>	<data:blog.homepageUrl/>
<$BlogDescription$>
<Blogger>	<b:section class='posts' id='posts' showaddelement='yes' growth='vertical'> <b:widget id='PostWidget' locked='false' title='Posts' type='Blog'> <b:includable id='main'> <b:loop values='data:posts' var='post'>
</Blogger>	</b:loop> </b:includable> </b:widget> </b:section>
<$BlogItemNumber$>	<data:post.id/>
<BlogDateHeader>	<b:if cond='data:post.dateHeader'>
</BlogDateHeader>	</b:if>
<$BlogDateHeaderDate$>	<data:post.dateHeader/>
<$BlogItemPermalinkUrl$>	<data:post.url/>
<BlogItemTitle>	<b:if cond='data:post.title'>
</BlogItemTitle>	</b:if>
<$BlogItemTitle$>	<data:post.title/>
<$BlogItemBody$>	<data:post.body/>
<$BlogItemAuthorURL$>	<data:blog.homepageUrl/>
<$BlogItemAuthor$>	<data:post.author/>
<$BlogItemDateTime$>	<data:post.timestamp/>
<BlogItemCommentsEnabled>	<b:if cond='data:post.allowComments'>
</BlogItemCommentsEnabled>	</b:if>
<$BlogItemCommentCount$>	<data:post.numComments/>
<$BlogItemControl$>	<span class='control'> <b:if cond='data:post.emailPostUrl'> <span class='item-action'> <a expr:href='data:post.emailPostUrl' title='Email Post'> <span class='email-post-icon'> </span> </a> </span> </b:if> <b:include data='post' name='postQuickEdit'/> </span>
<$BlogEncoding$>	<data:blog.encoding/>
<$BlogTitle$>	<data:blog.title/>
<$BlogItemAuthorNickname$>	<data:post.author/>
<$BlogID$>
<$BlogItemUrl$>	<data:post.link/>
<ItemPage>	<b:if cond='data:blog.pageType == "item"'>
</ItemPage>	</b:if>
<MainOrArchivePage>	<b:if cond='data:blog.pageType != "item"'>
</MainOrArchivePage>	</b:if>
<MainPage>	<b:if cond='data:blog.pageType == "main"'>
</MainPage>	</b:if>
<ArchivePage>	<b:if cond='data:blog.pageType == "archive"'>
</ArchivePage>	</b:if>
<$BlogItemCreate$>	<a expr:href='data:post.addCommentUrl'>Post a Comment</a>
<BlogItemComments>	<b:loop values='data:post.comments' var='comment'>
</BlogItemComments>	</b:loop>
<$BlogCommentNumber$>	<data:comment.id/>
<$BlogCommentDateTime$>	<data:comment.timestamp/>
<$BlogCommentAuthor$>	<address style="display:inline;font-style:normal;" class="author vcard"> <b:if cond='data:comment.authorUrl != ""'> <a class="url fn" expr:href='data:comment.authorUrl'><data:comment.author/></a> <b:else/> <span class="fn"><data:comment.author/></span> </b:if> </address>
<$BlogCommentBody$>	<data:comment.body/>
<$BlogCommentDeleteIcon$>	<b:include data='comment' name='commentDeleteIcon'/>
<$BlogCommentPermalinkURL$>	#c<data:comment.id/>

For how to use this syntax inside tag attributes, please see Johan at Ecmanaut. I would actually recommend that you read that whole post.

Lightbox Comment Form Update

2007-01-16T15:05:00.000-05:00

I have updated my Lightbox Comment Form () so that it jumps down to the form when it comes up instead of making you scroll through the comments again.

New Stuff on Ning

2007-01-15T14:49:00.000-05:00

This post is to announce two previously unannounced projects of mine over on Ning. I've been working on both for some time, and both could do with some more work certainly. Both are ready to be test-driven though (at least in the fundamentals).

The smaller project is Some Blogs. Some Blogs is a reporting engine for personal blogs, sexblogs, and other less-than-public-material blogs. Inspired by splogspot, this index is NOT for splogs (that's what splogspot is for). It is for material that most people don't want to see (when I search for XOXO I want microformats articles, not 'I luv u Jodi!' :P).

The other, larger, project which benefits from the first is Littl'uns. The original concept was to be like TechMeme for smaller blogs, however the concept has evolved over time and the meme-engine is currently only an experimental 'related posts' link.

Nestled in the code for Littl'uns is BSrch, a meta blogsearch engine.

Anyway, enjoy! Report bugs! Give feedback! :D

The Bleet

2007-01-15T12:30:00.000-05:00

All geeks have their jargon, and the Blogger hacking community is no exception. One of the big words right now is 'Bleet' - the Blogger Elite. First coined by Avatar of Bloggeratto, this term is used to describe the best of the best of the Blogger hackers.

Wh!13 7h!5 m4y 83 r3m3n!53n7 0f 1337, 37c, the term seems to be gaining acceptance among non-hackers as well. Then the question becomes -- how do we keep track of who's 'in'? ;)

Well, elite coders must write elite code. I'd hazard a guess that all Bleet members must be hacking the new Blogger by now, but what else? Who and what? What do you think?

I have created a survey with only three questions: the URL of a Bleet member (in your opinion), your favourite hack by this member, and one quality you think all Bleet should have. Note to the Bleet : do not vote for yourself!

Fill out the survey

Another note to the Bleet : Check out the Blogger Hacks Wrink and add yourself to it and it to your blog. You can use any of the modes (some people dislike webrings, some dislike extra blogrolls, we have options!) What's the point? Well, right now that wrink is getting more than 500 traffic a week. This means that each week (unless my stats are broken) at least 500 people travel from one Bleet site to another using this widget. Great way for us to share our traffic with each other!

Static Pages in Blogger

2007-01-15T12:08:00.000-05:00

This is a long-standing feature/hack request from much of the Blogger community. Pages that are not posts. This hack is a little messy and not the be-all solution, but I feel it is mature enough to publish as a start.

The pages are all addressed as http://yourblog.blogspot.com/?page=pagename

As always there are multiple options for this hack, but the basic starting is the same:

Go to Google Pages (you're on the new Blogger, you have a Google Account) and create the page you want.
Click the 'View live' link from the Google Pages editor (after publishing the page)
Note the URL in the location bar / address bar, you will need it later

You will need to add this code to the <head> section of your blog first time only, subsequent pages you can skip this:


<script src='http://jscripts.ning.com/get.php?xn_auth=no&amp;amp;id=2999987' type='text/javascript'/>

In code that follows, replace the red pagename with the what you want used as pagename in the URL (See above) and the red URL.

If you want to just redirect to the other page (example) use this code:


<script type='text/javascript'>

//make sure the WidgetData object and staticpage section are defined
if(typeof(WidgetData) != 'object') WidgetData = {};
if(typeof(WidgetData['staticpage']) != 'object') WidgetData['staticpage'] = {};

WidgetData['staticpage']['pagename'] = {
'url':'URL',
'type':'redirect'
};
</script>

If you want the other page superimposed in an IFRAME (example) use this code:


<script type='text/javascript'>

//make sure the WidgetData object and staticpage section are defined
if(typeof(WidgetData) != 'object') WidgetData = {};
if(typeof(WidgetData['staticpage']) != 'object') WidgetData['staticpage'] = {};

WidgetData['staticpage']['pagename'] = {
'url':'URL',
'type':'iframe'
};
</script>

If you want the other page superimposed (example) use this code:


<script type='text/javascript'>

//make sure the WidgetData object and staticpage section are defined
if(typeof(WidgetData) != 'object') WidgetData = {};
if(typeof(WidgetData['staticpage']) != 'object') WidgetData['staticpage'] = {};

WidgetData['staticpage']['pagename'] = {
'url':'URL'
};
</script>

If you want the other page included in a DIV so that it fits better into your page (you must style the DIV so that it works well. The example simply styles it to fill the page), use this code and put a DIV in your code with an ID the same as pagename:


<script type='text/javascript'>

//make sure the WidgetData object and staticpage section are defined
if(typeof(WidgetData) != 'object') WidgetData = {};
if(typeof(WidgetData['staticpage']) != 'object') WidgetData['staticpage'] = {};

WidgetData['staticpage']['pagename'] = {
'url':'URL'
};
</script>

If you want the other page included as an IFRAME in a DIV so that it fits better into your page (you must style the DIV so that it works well. The example simply styles it to fill the page), use this code and put a DIV in your code with an ID the same as pagename:


<script type='text/javascript'>

//make sure the WidgetData object and staticpage section are defined
if(typeof(WidgetData) != 'object') WidgetData = {};
if(typeof(WidgetData['staticpage']) != 'object') WidgetData['staticpage'] = {};

WidgetData['staticpage']['pagename'] = {
'url':'URL',
'type':'iframe'
};
</script>

Microsummaries in Blogger

2007-01-15T10:18:00.000-05:00

I recently learned of the Microsummaries feature of Firefox 2.0 from Aditya.

Basically, when you bookmark a site that supports it there is an option to have Firefox automatically pull in the title of the most recent article (or similar) as the title/label on the bookmark. Like simplified Live Bookmarks. So I created a quick hack to let us generate these with Blogger. If you have marked up your blog with hAtom put this in your <head> section:


<link expr:href='"http://xoxotools.ning.com/extract_by_class.php?xn_auth=no&amp;amp;class=entry-title&amp;amp;url=" + data:blog.homepageUrl + "&amp;amp;_microsummary"' rel='microsummary' />

Otherwise use this code, which should work for 90% of new Blogger blogs:


<link expr:href='"http://xoxotools.ning.com/extract_by_class.php?xn_auth=no&amp;amp;class=post-title&amp;amp;url=" + data:blog.homepageUrl + "&amp;amp;_microsummary"' rel='microsummary' />

hAtom in the New Blogger

2007-01-13T21:36:00.000-05:00

If that Backup Tool intrigues you, or something else I've mentioned regarding hAtom, or just microformats in general, then head over to my instructions on how to markup up New Blogger templates in hAtom.

Moved to New Blogger

2007-01-12T16:33:00.000-05:00

Hello! I'm on the new Blogger! Finally! Can you see the difference? It isn't major to the eye, but man does this backend feel nice to finally work with for real!

New Tools and XOXO Blog Activity

2007-01-12T10:50:00.000-05:00

After a long period of inactivity I have revived the former XOXO Blog as XOXO - A Semantic Weblog. The following new tools have been announced:

An introductory hCard Presentation (not mine)
The hCard Profile Generator (previously announced here)
An XFN + XOXO + hCard Blogroll Generator

To use this with the new Blogger, simply paste the generated code into a new HTML widget.

The hAtom Backup Tool

Explanation on using hAtom with the New Blogger coming soon. If you use any of these templates (which include my templates) you already have hAtom support.

There is also a discussion of distributed social netoworking and a new WordPress plugin to start implementing the idea.

Tags:

Del.icio.us / Trackback Script Updated

2007-01-10T08:59:00.000-05:00

I have made some minor bug fixes to the del.icio.us, pinging, and trackback script for the new Blogger. It also now saves trackback URLs when you save a draft.

Tags:

update

New Singpolyma Templates

2007-01-09T17:01:00.000-05:00

I have added variants to my Singpolyma Templates for my new asynchronous peek-a-boo comments.

Tags:

update

Asynchronous Peek-a-boo Comments

2007-01-09T16:26:00.000-05:00

Many people have benefited from my peek-a-boo comments hack for the new Blogger. It has one serious downfall however. Loading all that extra data inline can be slow. This version of the hack is designed so that the comments are not loaded until after you click the link to display them. This fixes some minor issues and improves speed like no one's business.

Go to the layout on your BETA blog and select 'Edit HTML'.
Check the 'Expand Widget Templates' box.
Paste the following code into the <head> section of the template:
<script type="text/javascript"> //<![CDATA[ var comment_form_template = '<div class="commentelem"><div class="comment-poster">[[AUTHOR]]</div>\n' + '<div class="comment-body"><div class="innerCmntBody">[[BODY]]</div></div>\n' + '<div class="comment-timestamp"><a href="[[PERMALINK]]" title="comment permalink">[[DATE]]</a></div></div>\n'; if(typeof(thisblog_showCommentPhotos) == 'undefined') thisblog_showCommentPhotos = false; //]]> </script> <script src='http://jscripts.ning.com/get.php?xn_auth=no&amp;id=2941927' type='text/javascript'></script>
Find the code that looks something like:
<b:includable id='comments' var='post'> <div class='comments' id='comments'>
And replace that second line with:
<div class='comments' expr:id='"comments" + data:post.id'> <b:if cond='data:blog.pageType != "item"'> <div expr:id='"commentsul" + data:post.id'> </div> <script type='text/javascript'> document.getElementById('comments<data:post.id/>').style.display = 'none'; </script> </b:if>
Next, find the post-generating code. It will look start something like this:
<b:includable id='main' var='top'> 
In this section there will be a block of code that looks something like:
<b:if cond='data:blog.pageType == "item"'> <b:if cond='data:post.allowComments'> <b:include data='post' name='comments'/> </b:if> </b:if>
Replace it with this:
<b:if cond='data:post.allowComments'> <b:include data='post' name='comments'/> </b:if>
Find the post template section, which starts something like this:
<b:includable id='post' var='post'>
And then find the link to the comments area, which looks something like:
<b:if cond='data:post.allowComments'> <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a> </b:if>
And replace it with:
<b:if cond='data:blog.pageType != "item"'> <b:if cond='data:post.allowComments'> <b:loop values='data:post.feedLinks' var='f'> <a class="comments" rel="comments" expr:href='data:post.url + "#comments"' expr:onclick='"peekaboo_comments_display(&quot;" + data:f.url + "&quot;,&quot;commentsul" + data:post.id + "&quot;,thisblog_showCommentPhotos);toggleitem(&quot;comments" + data:post.id + "&quot;);return false;"'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a> </b:loop> </b:if> <b:else/> <b:if cond='data:post.allowComments'> <a class='comment-link' expr:href='data:post.url + "#comments"' expr:onclick='"toggleitem(&quot;comments" + data:post.id + "&quot;);return false;"'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a> </b:if> </b:if>
Click 'Save Template' and, if it appears, 'Confirm & Save', then view your blog.

To make my comment author photos and highlighting work with this you will need to make sure you have the latest version of that hack installed.

Peek-a-boo Widgets

2007-01-08T20:55:00.000-05:00

I now have eight variations of my original peek-a-boo widget. (See also peek-a-boo HTML and peek-a-boo scrolling.) I was then asked for yet another variant. I realised that keeping these strictly in posts is insane and disorganised. So I have added the variant (open links in new window) and created a wizard. Just follow the steps and generate the code for your widget, just the way you like it!

Peek-a-boo Widget Generator

Tags:

hCard Profile Generator

2007-01-08T20:00:00.000-05:00

What is the point of getting that profile section in your sidebar marked up as an hCard? There are a number of reasons. Your blog will be compatible with the features of the new Operator Firefox Extension. If you ping Pingerati (or you're indexed by Technorati), people will be able to find you on the hCard Search Engine. There are, obviously, other reasons as well.

What's that? Blogger doesn't output this markup by default, and you don't want to learn the codes? No problem! Use my new hCard Profile Wizard and follow the easy two-step process to include an hCard-compatible profile in your blog!

Tags:

Hacks by Others

2006-12-23T09:26:00.000-05:00

I toot my own horn too much. This blog has more recently been at least 90% my own code. My readership seems to be going up though (FeedBurner reporting over 60 as of yesterday).

Either way I think I'll spend this posts talking about some of the more recent developments in the hacker community. Some of this is new, some of it is old, it is not a comprehensive list. This is just what I thought was cool recently ;) These are in no particular order.

Stubborn Fanatic (Vivek Sanghi)

...has used the new Blogger 'if' tags (as he documented them) to create a hack that shows Google AdSense ads inside posts on item pages. My blog is ad-free. I find ads inside posts the most annoying. If I ever do ads I promise they will not interfere with the post. But at least his hack keeps them from cluttering the main page.
...colourful, colourful comments!
...fix your layout editor (you have a hacked-beyond-belief template!)
...has created a horizontal menu bar of your tags (yawn...) with drop-down lists of the most recent posts (cool!) Definately a hack to check out, even if you don't install it.

Hoctro

...has a wicked table of contents widget for your blog!
...Google AJAX using their API instead of YubNub.

Note to Hoctro : how about a way to browse your blog by date? The newest entry on the main page and then no interface for date-based archives or a prevous-post link/list. Nothing. Annoying.

Hackosphere (Ramani)

Neo template. Maxtrix-cool, fast, Web 2.0 extravaganza. And he's selling it! (You money-maker you... ;) )

PurpleMoggy

Instructions for the new Blogger for my Comment Photos and Highlighting hack.
Display related posts by tag. Kind of like FreshTags.
Premade templates that let the user switch the colour scheme.

BlogU

Nice styles for your blockquotes.

iMessengr

Nice hacks-included template

If you read here at all, you'll know I've been busy too... but you can just read that, I'm not going to make a list of links to myself ;)

Tags:

Blogger Hacks Wiki Update

2006-12-23T09:05:00.000-05:00

Tired of running from my blog to FreshBlog, to Bloggeratto, to Hoctro, to Beautiful Beta, to Hackosphere, to PurpleMoggy, to others trying to find hacks? Enter the Blogger Hacks Wiki. Launched back in June with the collaboration of many hackers and bloggers, this Wiki is meant to be the Wikipedia of Blogger Hacks. Not all of the newest hacks are there, but the general available ones should be.

Since the Blogger BETA (now the new Blogger) launch, the wiki has been stagnating just a little bit. Hacks have been rolling out at record rate from many new players. I myself have been very lax at entering all my new hacks into the Wiki. One problem was that one could not tell from the wiki if a hack was for the old or new Blogger.

No longer. The main 'View Hacks' link now points to the Wiki Category for the New Blogger, and I have added categories to all the hacks' pages based on platform. We as hackers need to start adding our hacks back into this database -- everyone will benefit, even us! (Who wants to duplicate work if there's an easy way to find out someone else already did it?) There is also a category for hacks which I was unsure what platforms they would work on. I need help going through and recategorising the pages in the Platform Unknown category.

I have also done some work on the Request Hacks page. New hack requests should now be added to the top section 'Undiscussed Requests'. After the community has posted some feedback it gets moved to under the 'Discussed Requests' heading. Requests which have been solved (ie, had hacks created for them) move to the Solved Requests page.

The Wiki benefits both hackers (easier to find our hacks, find other's hacks, and get ideas for hacks from the requests page) and the general people (find hacks so much easier!) I would really like to keep it up-to-date and maintained :)

Tags:

Peek-a-boo and Scrolling

2006-12-23T08:53:00.000-05:00

With some more inspiration from this man, and some help from this post I have created alternate versions of my peek-a-boo links lists and peek-a-boo HTML widgets. These ones, when expanded, are a 200-pixel-high box with a scrollbar. For those extra-long lists ;)

Link List (Click Title to Expand)
Note about installation : if you put this code into your template more than once at a time (for multiple lists) you must change the id='ALIST' (bold in the code) to id='BLIST' on the second list, etc. This code should go inside the section for your sidebar. Then, after saving, go to 'Page Elements' to customise its contents.


<b:widget id='ALIST' locked='false' title='List Title' type='LinkList'>
<b:includable id='main'>
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;">');
//]]>
</script>
      <b:if cond='data:title'><h2><data:title/></h2></b:if>
<script type='text/javascript'>
//<![CDATA[
document.write('<\/a>');
//]]>
</script>
      <div class='widget-content'>
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;height:200px;overflow:auto;">');
//]]>
</script>
        <ul>
            <b:loop values='data:links' var='link'>
              <li><a expr:href='data:link.target'><data:link.name/></a></li>
            </b:loop>
        </ul>
<script type='text/javascript'>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>
        <b:include name='quickedit'/>
      </div>
  </b:includable>
</b:widget>

Link List (Click [+/-] to Expand)
Note about installation : if you put this code into your template more than once at a time (for multiple lists) you must change the id='ALIST' (bold in the code) to id='BLIST' on the second list, etc. This code should go inside the section for your sidebar. Then, after saving, go to 'Page Elements' to customise its contents.


<b:widget id='ALIST' locked='false' title='List Title' type='LinkList'>
<b:includable id='main'>
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;" style="float:left;margin-right:5px;">[+/-]<\/a>');
//]]>
</script>
      <b:if cond='data:title'><h2><data:title/></h2></b:if>
      <div class='widget-content'>
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;overflow:auto;height:200px;">');
//]]>
</script>
        <ul>
            <b:loop values='data:links' var='link'>
              <li><a expr:href='data:link.target'><data:link.name/></a></li>
            </b:loop>
        </ul>
<script type='text/javascript'>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>
        <b:include name='quickedit'/>
      </div>
  </b:includable>
</b:widget>

HTML (Click Title to Expand)

HTML (Click [+/-] to Expand)

Tags:

Singpolyma Templates for new Blogger

2006-12-21T18:11:00.000-05:00

Now having translated most of my hacks to the new Blogger, it is time to unveil the templates. I myself will likely be switching soon, and my template will be based on the code here published. The features are similar to the first set, but optomised for the new Blogger.

To install one of these templates, just cut-n-paste the code into the 'Edit HTML' section of your blog and save. Confirm deletion of widgets (Yes, unfortunately, you lose you widgets. You can make them again).

Templates

Basic template - all the basic features of the original set, including peek-a-boo comments and backlinks.
Comment Form - based on basic, my lightbox comment form added in.
Comment Photos and Highlighting - based on basic, my comment photos and highlighting hack (as translated by PurpleMoggy) added in.
Basic Asynchronous - Same as basic but with asynchronous peek-a-boo comments.
Comment Form Asynchronous - Same as comment form but with asynchronous peek-a-boo comments.
Comment Photos and Highlighting Asynchronous - Same as comment photos and highlighting but with asynchronous peek-a-boo comments.

Tags:

Update : Peek-a-boo Comments

2006-12-21T17:50:00.000-05:00

I have updated my Peek-a-boo Comments for new Blogger hack to include some bug fixes, the use of an external script (for performance and readability), and comment author links.

Tags:

For New Blogger : Blogger del.icio.us categorising, pinging, and trackback helper

2006-12-21T13:48:00.000-05:00

I have made some minor bug fixes to this script, as well as made it so that it saves the trackback URLs when you save a draft.

Some time ago I married Johan's del.icio.us and pinging script with my own trackback script into one new script. That script does not work on the new version of Blogger, and the trackback feature has been glitchy for some time. Outgoing trackback is still something we need on the new version of Blogger, and the pinging services provided by this script might even be useful on other blogging services. Del.icio.us posting? Now that we have labels? Well, Freshtags, my calendar widget, and just tag management in general, will work better if you use del.icio.us. If you disagree, this part of the script is optional.

This script does not overwrite the old script. Running both simultaneously will look dumb on the Blogger Classic interface (there will be duplication), but will not break anything. If you only run on the new Blogger, please remove the old script (if you have it installed).

Install the new script

Userscripts.org entry

Tags:

Peek-a-boo HTML Widgets

2006-12-21T09:25:00.000-05:00

There was a minor styling error in this hack -- I have fixed it now :)

This hack was inspired by a comment on my peek-a-boo link lists hack. It is a one-click install hack of a special HTML widget to your blog. Edit the template and content of the widget to be whatever you want (such as JavaScript includes for external blogrolls). The widget will appear either with just a title, or with '[+/-] TITLE'. Clicking the title (or [+/-], depending on the version you choose) will display all of the HTML/JavaScript contents.

Tags:

Die index.html!

2006-12-20T17:38:00.000-05:00

It has annoyed me for some time that the default 'Home' links on the new Blogger (which I will continue to call Blogger BETA, at least for today, don't worry, I know that's officially wrong) go to /index.html. Some internal links ('View Blog' from the dashboard) do not, which is worse. Why have a URL longer than it need be? Why have multiple URLs available that people can bookmark? Doesn't that just confuse things.

This hack is very simple and fixes the problem.

Tags:

Comment Forms and Blogger BETA

2006-12-20T16:50:00.000-05:00

The old inline comment form is dead to Blogger BETA (or, should I say, the new Blogger). Deader than ever, the form now does absolutely nothing.

Have no fear -- there is good news!

Since we must use Blogger's ugly comment page in some form (because of their new security token system), I wanted to include this in our pages somehow. I thought of making it inline, but discarded this idea because it would look rather dumb (since we can't style that page) and would be displaying comments twice on the page, etc.

Enter lightbox. The following hack gives you a nice, integrated comment form that still appears somewhat separated (so visitors know you didn't create that ugliness!). Visitors can close the 'popup' without commenting, but if they comment it will close and reload the page automatically. (See a demo on my test blog, but I can't guarantee it will be there forever. My test blog is for testing and is therefore unpredictable.)

To install the hack, follow these steps:

Go to the 'Template' tab and select 'Edit HTML'.
Check the 'Expand Widget Templates' box.
Add this code right before your </head> tag (if you have my calendar hack, or any other Lightbox Gone Wild for Blogger hack, installed, this step in unnecessary):
<script src='http://jscripts.ning.com/get.php?xn_auth=no&amp;id=1093361' type='text/javascript'/> <script src='http://jscripts.ning.com/get.php?xn_auth=no&amp;id=2655847' type='text/javascript'/> <link href='http://singpolyma.googlepages.com/lightbox.css' rel='stylesheet' type='text/css'/>
Find this code:
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
and replace it with this:
<a class='lbOn' expr:href='"#comment-form-" + data:post.id'><data:postCommentMsg/></a>
If you do not use peek-a-boo comments or have a footer link pointing to the inline comments section (if you don't know, you don't) then find this code:
<b:if cond='data:post.allowComments'> <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a> </b:if>
and replace it with this:
<b:if cond='data:post.allowComments'> <a class='comment-link lbOn' expr:href='"#comment-form-" + data:post.id'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a> </b:if>
Find this code:
<b:loop values='data:posts' var='post'> <b:if cond='data:post.dateHeader'> <h2 class='date-header'><data:post.dateHeader/></h2> </b:if>
And directly after it put this code:
<script type='text/javascript'> var isLoad<data:post.id/> = 0; function checkDeactivate<data:post.id/>() { if(isLoad<data:post.id/> > 1) { //<![CDATA[ document.getElementById('lbContent').innerHTML = '<div style="text-align:center;width:100%;font-size:16pt;font-family:sans-serif;"><br /><br /><br />Reloading...</div>'; //]]> window.location.reload(); }//end if isLoad isLoad<data:post.id/>++; }//end function checkDeactivate </script> <div expr:id='"comment-form-" + data:post.id' style='display:none;'> <iframe expr:onload='"checkDeactivate" + data:post.id + "();"' expr:src='data:post.addCommentUrl + "&amp;isPopup=true#commentForm"' frameborder='0' style='border-width:0px;width:100%;height:380px;'/> <div style='text-align: right;'><a class='lbAction' href='#' rel='deactivate'><img alt='' src='http://www.ning.com/xnstatic/icn/cross.gif' style='display: inline; width: 10px; height: 10px;'/> Close</a></div> </div>
Save your template

New(?) Splog Format

2006-12-20T13:53:00.000-05:00

I discovered a new-to-me Splog format today. See these search results? See the acne scar removal articles? These Splogs are rel=nofollow linking to me with my name in order to make their SPAM show up in other's search results... that's low...

Tags:

Blogger Calendar

2006-12-19T13:46:00.000-05:00

If you don't use del.icio.us and want more posts showing up in your calendar try appending ?max-results=999 to your feed URL. So it will look like:
http://yourblog.blogspot.com/feeds/posts/full?max-results=999

So you're not satisfied with just an archive list? You've perhaps switched to BETA and even the hierarchal menu just isn't cool enough? Well, you've come to the right place.

This hack allows you to generate a calendar of your posts for people to browse inline in your blog! This hack works with either Blogger Classic or Blogger BETA and, best of all, is one of my easiest hacks to install yet!

Just go to the setup page. Enter your feed URL (do NOT use a FeedBurner feed, it tends to mess things up) and your blog title. Click generate. Follow the instructions.

Now, if you use mine (click the calendar next to the archives box in my sidebar) you'll note that I have posts in the calendar going all the way back to forever it seems. Your probably only has this month's. Well, that is just one extra hack, but there's a catch -- you have to be one of those who posts all blog entries to del.icio.us (I know, the BETA people no longer have a GM for that, I'm working on it.)

Go to the full del.icio.us feed setup page (I won't steal your password!), enter your del.icio.us username and password in the upper form. Click Go. Go back to the setup page. Enter your username (and optional anchor tag) in the lower form. Click Go. Use the contents of your address bar as your feed URL for the calendar instead of your normal feed.

A translation of this page exists. Not sure on the language of that page, but thought I'd give them a link.

Tags:

Lightbox Gone Wild for Blogger

2006-12-19T13:09:00.000-05:00

Lightbox Gone Wild is a JavaScript tool used to overlay other pages on the current page using AJAX. It looks nice and is really user-friendly. One problem : we on Blogger cannot create a static HTML page on the same domain to be included via AJAX.

So I have modified the code slightly. My version will include snippets from your local page instead. Just include these lines in your <head> section:


<script type="text/javascript" src="http://jscripts.ning.com/get.php?xn_auth=no&amp;id=1093361"></script>
<script type="text/javascript" src="http://jscripts.ning.com/get.php?xn_auth=no&amp;id=2655847"></script>
<link rel="stylesheet" type="text/css" href="http://singpolyma.googlepages.com/lightbox.css" />

Then, insert the HTML you want to be displayed in the lightbox like so:


<div id="lightbox-id" style="display:none;">
HTML HERE
</div>

Make sure you have a link similar to this in the code to be inserted so that the lightbox can be closed again:


<a href="#" class="lbAction" rel="deactivate">Close</a>

Then, insert a link to open the lightbox, like so:


<a class="lbOn" href="#lightbox-id">Open Lightbox</a>

To see an example, click the calendar icon next to the archives in my sidebar.

Not sure why I'm linking to translations today. I usually don't. They show up in the backlinks, and saying in English 'here's a translation' doesn't make loads of sense. They deserve a link though. A translation of this post.

Tags:

BloggerBubble

2006-12-19T11:52:00.000-05:00

Andrés Santos wrote a nice hack for Blogger that used Websnapr to display pop-up thumbnails of links in your blog posts. Just install one line of code and you're good to go.

Problem : It didn't work with my Blogger template.

And so I did what I often do -- hacked his hack! If his code won't work for you, insert this code just before the </head> tag in your template instead:


<script src="http://jscripts.ning.com/get.php?xn_auth=no&amp;id=2654582" type="text/javascript"></script>

This should work with most Blogger templates (write me if it won't with yours and I'll update it). Also, it will work with any hAtom-based template.

JScripts Entry

Tags:

blogger
hack

To the Confused

2006-11-29T16:40:00.000-05:00

Dear Confused Reader,

You are reading this because much of the Geekery to come out of the Singpolyma - Technical Blog confuses you. The code is far beyond your comprehension, and sometimes so are the instructions. You are the one who emails me your template to hack, instead of hacking it yourself. That's OK, and I'm willing to help, but in case you wanted to try doing a little bit more yourself....

Hoctro, another brilliant hacker, has written a sort of 101 (or is that 411?) post on hacking your blog, or at least following the instructions to do so. Complete with screenshots illustrating his points, this article will help you understand not only my writings, but those of other Blogger Hackers, forever.

Yours,

Singpolyma

Read Hoctro's Post (Blogger BETA Only)

Other template-related posts by Hoctro

Tags:

YubNub LocationBar 0.17

2006-11-29T16:14:00.000-05:00

I have updated my YubNub Firefox Extension to fix some URL resolution bugs.

Tags:

Peek-a-boo Link Lists

2006-11-29T15:56:00.000-05:00

I have fixed a bug that caused multiple instances of this hack to interact with each other and some other IE problems. I have tested it in both Firefox and IE. One extra note about installation - if you put this code into your template more than once at a time (for multiple lists) you must change the id="ALIST" (bold in the code) to id="BLIST" on the second list, etc.

I received the request for this hack via email, and since I thought it shouldn't be too hard and could prove very useful, I went at it. Plus I actually had some time today to use on this kind of thing ;) To get a link list in Blogger BETA that has a title you can click to show/hide the list, add this code to your template:

<b:widget id='ALIST' locked='false' title='List Title' type='LinkList'>
<b:includable id='main'>
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;">');
//]]>
</script>
      <b:if cond='data:title'><h2><data:title/></h2></b:if>
<script type='text/javascript'>
//<![CDATA[
document.write('<\/a>');
//]]>
</script>
      <div class='widget-content'>
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>
         <ul>
            <b:loop values='data:links' var='link'>
               <li><a expr:href='data:link.target'><data:link.name/></a></li>
            </b:loop>
         </ul>
<script type='text/javascript'>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>
         <b:include name='quickedit'/>
      </div>
   </b:includable>
</b:widget>

Then go to the 'Page Elements' area to customise the title and links in the widget.

The following code is identical except that it leaves the title of the widget alone and adds instead a little [+/-] for show/hide functionality:

<b:widget id='ALIST' locked='false' title='List Title' type='LinkList'>
<b:includable id='main'>
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;" style="float:left;margin-right:5px;">[+/-]<\/a>');
//]]>
</script>
      <b:if cond='data:title'><h2><data:title/></h2></b:if>
      <div class='widget-content'>
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>
         <ul>
            <b:loop values='data:links' var='link'>
               <li><a expr:href='data:link.target'><data:link.name/></a></li>
            </b:loop>
         </ul>
<script type='text/javascript'>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>
         <b:include name='quickedit'/>
      </div>
   </b:includable>
</b:widget>

Why is this not a one-click widget? Blogger does not yet allow us to define alternate widget types (such as link list) in one click.

Tags:

WebOS

2006-11-28T15:44:00.000-05:00

Whoever first came up with the idea of WebOS was a genius. Somehow I doubt it started with Google OS, but my own interest certainly started there.

Soon there was YubNub, the command line for the web. A flexible, open command-line system for the Internet that is practical as well as cool. A backbone kind of application while also being immediately useful to users.

Webtops started popping up, such as those provided by 30boxes and Goowy. They allow you to integrate the major services you use into one convenient location, sort of like an extension of the idea behind Google IG, BoxtheWeb, and others.

Now we have at least two genuine WebOS: YouOS and EyeOS. Both provide their own 'standard' way to code apps, with APIs etc to help in GUI and back end building. YouOS allows developers to code and share apps on the public server, as well as allowing users to install these apps. EyeOS requires you set up your own server to install apps, but allows apps to be distributed in an offline format. There are distinct pros and cons to both, and to the APIs provided by both.

WebOS is where it's at, with YubNub, YouOS, and EyeOS. Each has its own strengths and weaknesses. However, if we want to see true Web 2.0 here we must not repeat the mistake that was made with offline OS. WebOS communities/developers must work together for standards and interoperability, etc. Each will be so much better if it works with the strength of the others.

Tags:

Peek-a-boo Update

2006-11-27T08:19:00.000-05:00

My peek-a-boo comments for BETA hack has been updated to use the new native JSONP. It should run faster now and the IE bug some were reporting should be gone.

Tags:

JSON from Google

2006-11-23T16:54:00.000-05:00

JSON (and particularly JSONP) is one of the most useful data formats for hackers. For quite some time we have had to do all sorts of hackish things to transform the data available from Google services to JSON(P). No longer.

Blogger, Google Calendar, and Google Base now all support JSONP. This was announced on Blogger Buzz and is perhaps one of the greatest advances in hackability in (at least recent) Google history.

On top of this, SearchMash (a Google susiduary) now offers JSON feeds of Google's Web, Images, Blog, and Video searches. For JSONP a proxy service is required, but this still allows for getting Google's data out where we can hack with it.

One thing that this will mean very soon is an upgrade to peek-a-boo for BETA that makes use of this and will definately be faster.

Tags:

Feed Links Widget

2006-11-16T09:15:00.000-05:00

As promised, here is the revised version of my Feed Links Widget. Just click the button and follow the wizard!

Some Notes
Due to circumstances beyond my control, if Blogger changes the URL format for feeds this hack will break (and I will, of course, speed to fix it ;) ).

If you want to make it easier for others to add this hack, clicking the button below will add the button above to your sidebar.

<form method="post" action="http://beta.blogger.com/add-widget">  <input type="hidden" name="infoUrl" value="http://singpolyma-tech.blogspot.com/2006/11/feed-links-widget.html" /> <input type="hidden" name="widget.title" value="Syndication"/> <textarea name="widget.content" style="display:none;">  &lt;ul class='xoxo'&gt; &lt;li&gt;&lt;img src=&quot;http://photos1.blogger.com/blogger/6537/1341/1600/feed-icon-12x12.jpg&quot; alt=&quot;&quot; /&gt; &lt;a href=&quot;/feeds/posts/default?alt=rss&quot; rel=&quot;alternate&quot;&gt;Post Feed&lt;/a&gt;&lt;/li&gt;     &lt;li&gt;&lt;img src=&quot;http://photos1.blogger.com/blogger/6537/1341/1600/feed-icon-12x12.jpg&quot; alt=&quot;&quot; /&gt; &lt;a href=&quot;/feeds/comments/default?alt=rss&quot; rel=&quot;alternate&quot;&gt;Comment Feed&lt;/a&gt;&lt;/li&gt;  &lt;/ul&gt;</textarea>  <textarea name="widget.template" style="display:none;">  &lt;h2 class=&quot;sidebar-title&quot;&gt;&lt;data:title/&gt;&lt;/h2&gt;  &lt;data:content/&gt;  </textarea>  <input type="submit" name="go" value="Get Feed Links Widget"/></form>

Tags:

New Widget System

2006-11-16T09:06:00.000-05:00

Bloggeratto and phydeaux3 (and likely others) have blogged about a new one-click widget adding system for Blogger. This system would allow us to create widgets and then just put a button in our blog post that, when clicked, places all the correct code into the user's template. This is a huge step for ease-of-use, and could also be for prorogation (have users add a widget-adding widget to advertise instead of just linking back, etc.) I've taken my look and the system is brilliant. There is, however, one snag.

You cannot define your widget to be of any type, it is simply in the global namespace. This means that, for example, it cannot be done with my Feeds Widget. Why? Some genius in Blogger decided to put that data in the post namespace, and thus make it inaccessible to this new system.

We won't let a little thing like that spoil our fun now though will we? Brace yourselves for a hack of the mod system! Coming very soon - one click feeds widget (with comments feed link too!)

Tags:

Inline Comment Form for BETA News

2006-11-07T09:07:00.000-05:00

If there is one hack I get requests for more than any other it is this. My inline comments form on Blogger BETA. It was my first ever hack (before I had even fully moved to Blogger), and probably still my favourite as the most useful. I recently blogged somewhat optimistically about my progress, which only increased the demands. I regret to inform you that I have hit a wall. Perhaps not unsurmountable, but a huge one.

The security token scraping did not work.

I'm not entirely surprised. After all, Blogger added the security token code to prevent people from doing just what I am attempting. I cannot say that I fully understand how the whole technology works, or why my attempts to circumvent it have failed, I only know that they have. It may take help from Blogger themselves (bah!) to get this working.

For the community : to those who wish to put their heads with mine on this problem. The code for this hack on BETA, such as it is for as far as I've got, can be found at the following URLs:

http://jscripts.ning.com/get.php?xn_auth=no&id=1338954
http://singpolymaplay.ning.com/blogger/blogger_beta_comment_form.txt
http://www.ning.com/view-source.html?view=app&op=viewFile&appUrl=singpolymaplay&fileName=commentFormData.php&currentDir=%2fblogger

As a side note : installing this hack as is actually does sort of work. But it errors every time and requires that the user push the button on the inline form, and then on the other form. (Similar to what is happening here since I was forced by mega-spammers to turn on word verification...)

Tags:

YubNub LocationBar 0.16

2006-10-31T14:20:00.000-05:00

Version 0.16 of my YubNub LocationBar Firefox Extension has been released. There is now support for non-standard URLs (such as those from nic.d. Arrow-key history navigation broke some default Firefox features, so it is now Ctrl+Arrow Key. A hackish integration with Firefox auto-complete history has also been coded. Type y: before a command to have the auto-complete work (or just to force it into YubNub mode).

Tags:

Trackback Errors (Haloscan Bug?)

2006-10-28T10:31:00.000-05:00

Many users of my trackback script, including myself, have compained of odd errors. Awhile back, I upgraded the script to give better error messages. On pinging a haloscan trackback addresses (which we on Blogger mostly are) I get:

Error #11 : Problem saving. Please contact Haloscan

I have posted it in the appropriate thread of the Haloscan forums, but that seems to be a thread where we report bugs and get no reply. I have not changed the trackback code from what was previously working, and I cannot seem to find any problems with it. Nor do I find any documenation on this error.

So basically, this is a 'Googleseeding' post to see if anyone else has any bright ideas.

Tags:

Don't JUST Eat Your Dogfood

2006-10-28T09:58:00.000-05:00

Blogger (and Google in general) have been getting some bad press lately. They decided to make a counterpost on Buzz, not a bad idea. Some people are cynical about the entire post, but it has good and bad points.

They're right, Google is only a company and its employees are only human. Mistakes are made and they're very good at fixing (at least the big ones). The do eat their own dogfood and that is why bugs like this can be spotted faster.

It's also what causes the press.

If a single Blogger blog malfunctions, no one cares. Unless that single blog is the Google blog. They can't expect bloggers not to notice this. This isn't the old-style press where we wait until it's a proven, serious, do-or-die issue before printing. Bloggers write while the news is hot. If in two hours it's all fixed, that's not the point.

Are our expectations of Google and Blogger too high? Undoubtedly. We all know that as consumers, especially geeky consumers, we demand more than is possible. That's just the way things are. Users of my hacks expect far more than I can deliver, and I expect far more than Blogger can deliver. The mark of greatness is handling this well.

Their post makes some good points, and I won't disagree with them completely. We can give them some slack. However, they try to get out of responsability a little too much. EAT your dogfood, FIX the service, and BE RESPONSIBLE for what happened, even if it's no big deal. They've done their PR bit, but actions speak louder than words. It is far more powerful to say 'we did' than 'we do'. So while I sympathise with them, I must side with the great penguin:

Don't give me excuses - give me results!

Tags:

Free 'Domain Names' in the Underground

2006-10-21T15:38:00.000-05:00

Disclaimer: This article may be extremely geeky, and some links may not work unless you have specially-modified system settings.

Hoodwink'd, the self-dubbed "underground mumbler's club", is very geek. Until recently, the only way to access the main part of the site was by manually editing your hosts file (a settings file that is unknown to most users, and very hard to find for Windows users).

Recently, _why, the founder/head-hancho of Hoodwink'd, set up a DNS server that allows the registration of domain names that do not exist (such as hoodwink.d and _.singpolyma). As long as you have a simple settings change done on your system you can access all of these 'bogus' domain-names the same as normal websites, and if you're a member at Hoodwink'd you can create as many new ones as you want for free at nic.d (blog announcement, forum thread).

For more information on Hoodwink'd itself see Johan's article. To get access to Hoodwink'd and nic.d domains on Windows XP follow these steps (linux and other users, just add 72.36.180.123 as your primary DNS, you likely know how):

Open your network connections pane (Start > Connect to > Show all connections).
Right-click on the connection you use to get on the Internet (the dial-up connection for dial-up users, and the Wireless Network Connectin or Local Area Connection for broadband, usually) and select 'Properties'.
Select Internet Protocol (TCP/IP) from the list box and click the 'Properties' button.
Select the 'Use the following DNS server addresses' radio button if not already selected.
If there is anything in the first box, move it to the second, otherwise find the automatically assigned DNS address from the status window for the connection and enter that to the second box.
Enter 72.36.180.123 into the first box.

Tags:

Regarding Inline Comment Forms and Blogger BETA

2006-10-17T17:58:00.000-05:00

I have run up into a wall in translating my inline comment form hacks to Blogger BETA code. The translation is done, but the forms don't really work. Why not? The submission always produces an error. A quick analysis shows that Blogger BETA comment pages generate auth keys now to prevent non-Blogger forms from spoofing info (just what this hack tries to do). While this is a security feature, it makes this hack (as it currently is) pretty useless.

So what am I going to do? I am going to attempt the creation of an offsite PHP script to scrape the auth key out of the form code (surprised?). Based on how these systems usually work, it should fix the problem if this is then included (via JavaScript) into the comment form code. What this does mean is that the comment form will require JavaScript to fuction, and so I will probably just translate the more popular asynchronous version which does already anyway (since the purpose of keeping the other version alive was to have one that didn't require JavaScript).

If this approach is successful I will create a similar partner script to enable the inline comment forms to work with word verification, something many people have asked for in the past.

So I'm not giving up just yet, but the process may take longer than I had anticipated. To see the literally-translated hack with error messages see my BETA test blog.

Tags:

BlogID in Blogger BETA

2006-10-17T17:50:00.000-05:00

Blogger BETA seems to have no template tag (or equivalent) any more for the BlogID, which is sometimes a very useful value to have. I have hacked together the following JavaScript function which should return the BlogID of any Blogger BETA blog it is run on:


   function getBlogID() {
      var links = document.getElementsByTagName('link');
      var href = '';
      for(var i=0; i<links.length; i++) {
         if(links[i].rel == 'EditURI') {
            href = links[i].href;
            break;
         }//end if rel == EditURI
      }//end for i<links.length
      href = href.match(/blogID=([\d]+)/);
      return href[1];
   }//end function getBlogID

Tags:

Comments on Main/Archive Page (Peek-a-Boo) in Blogger BETA

2006-10-14T07:38:00.000-05:00

There was a typo in this post! I finally found it. Your templates should be able to save after applying this hack now ;)

I have released an asynchronous version of this hack.

So now that people have stopped asking me for this feature (because I said I couldn't do it) I've done it! Screen-scraping to the rescue! If you re-install this hack you'll get more manageable code in your template, bug fixes for timezone logic, and comment author links. Finally! Yay! This also improves compatibility between this hack and my comment photos hack.

You can not link to author's blogs or profiles from the main page because that data is not available in the feed Blogger provides. Some day I may dream up a way to do this -- or Blogger may start providing the information. For now, it's not happening.

Updated 2006-11-27 to work with new Native JSONP, should be faster now.

As I said back when I first released my BETA template, displaying comment data anywhere but on item pages in Blogger BETA is 'impossible'. That is what this hack overcomes. Both just plain displaying comments on main and also peek-a-boo comments are now possible (revised template coming soon ;) ).

Go to the layout on your BETA blog and select 'Edit HTML'.
Check the 'Expand Widget Templates' box.
Paste the following code into the <head> section of the template:
<script type="text/javascript"> //<![CDATA[ var comment_form_template = '<div class="commentelem"><div class="comment-poster">[[AUTHOR]]</div>\n' + '<div class="comment-body"><div class="innerCmntBody">[[BODY]]</div></div>\n' + '<div class="comment-timestamp"><a href="[[PERMALINK]]" title="comment permalink">[[DATE]]</a></div></div>\n'; //]]> </script> <script src='http://jscripts.ning.com/get.php?xn_auth=no&amp;id=2706908' type='text/javascript'></script>
Advanced users will note that the first <script> section is taken from the asynchronous comment form code, and that if that is installed (presuming I get a version working for Blogger BETA) that the code only needs to be in here once. It can be changed to fit the code of the blog itself to improve appearance, etc. Kudos to Johan Sundström for his help with the date code.
If you want peek-a-boo functionality, you will need this code in your <head> section somewhere as well:

<script type="text/javascript">
   function toggleitem(postid,linkid,newtxt,displaytype) {
      if(!displaytype) {displaytype = 'block';}
      var whichpost = document.getElementById(postid);
      if (whichpost.style.display != "none") {
         whichpost.style.display = "none";
      } else {
         whichpost.style.display = displaytype;
      }
      if(linkid) {
            var lnk = document.getElementById(linkid);
            lnk.href = "javascript:toggleitem('"+postid+"','"+linkid+"','"+lnk.innerHTML+"');";
            lnk.innerHTML = newtxt;
       }
   }//end function toggleitem
</script>
Find the place in your template where the comments are generated on item pages, it will probably look something like this:

<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>

And directly before that, insert this code:

<b:loop values='data:post.feedLinks' var='f'>
   <b:if cond='data:blog.pageType != "item"'>
      <script expr:src='data:f.url + "?alt=json-in-script&amp;callback=peekaboo_comments_display"' type='text/javascript'/>
   </b:if>
</b:loop>
If you want to use peek-a-boo functionality put, find the code a little bit before that which you just inserted that looks something like:

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>

And replace that second line with:

   <div class='comments' expr:id='"comments" + data:post.id'>
<b:if cond='data:blog.pageType != "item"'>
   <script type='text/javascript'>
      document.getElementById('comments<data:post.id/>').style.display = 'none';
   </script>
</b:if>
Next, find the post-generating code. It will look start something like this:

<b:includable id='main' var='top'>
In this section there will be a block of code that looks something like:

<b:if cond='data:blog.pageType == "item"'>
   <b:if cond='data:post.allowComments'>
      <b:include data='post' name='comments'/>
   </b:if>
</b:if>

Replace it with this:

   <b:if cond='data:post.allowComments'>
      <b:include data='post' name='comments'/>
   </b:if>
If you want to use peek-a-boo functionality you need to find the post template section, which starts something like this:

<b:includable id='post' var='post'>

And then find the link to the comments area, which looks something like:

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>

And replace it with:

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.url + "#comments"' expr:onclick='"toggleitem(&quot;comments" + data:post.id + "&quot;);return false;"'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
Click 'Save Template' and, if it appears, 'Confirm & Save', then view your blog.

Feed Links in BETA

2006-10-12T15:43:00.000-05:00

Please see the new, easier hack for this feature.

I love Blogger BETA, but there are just some things about it that annoy me. Duh. That's why I'm a hacker. One of these is that feed links are displayed at the bottom of the page instead of in my sidebar. No longer. Insert this code wherever you want the feed links to display and you'll have a feed links widget you can drag and drop in your template editor!

   <b:widget id='FeedsWidget' locked='false' title='Feeds' type='Blog'>
      <b:includable id='main'>
         <h2 class='sidebar-title'>Syndication</h2>
         <b:if cond='data:feedLinks'>
            <ul class='xoxo'>
            <b:loop values='data:feedLinks' var='f'>
               <li><img src='http://photos1.blogger.com/blogger/6537/1341/1600/feed-icon-12x12.jpg' alt='' /> <a expr:href='data:f.url + "?alt=rss"' rel='alternate'><data:f.name/> Feed</a></li>
            </b:loop>
            </ul>
         </b:if>
      </b:includable>
   </b:widget>

Coming soon for Blogger BETA: Comments on Main and Archive pages (peek-a-boo!) and a revised Singpolyma-Template.

Tags:

FreshTags as API

2006-10-08T16:52:00.000-05:00

The new FreshTags system comes with many benefits, such as the WidgetData system and also a more flexible interaction with the code itself.

Some basic example of this are the widgets one can create just using different settings. To include a feed in your sidebar you can add this code in with the other FreshTags settings data:

//feed widget
WidgetData['freshtags']['freshtags_FeedName'] = {
   'type':'posts',
   'source':'feed',
   'feedurl':'FeedURL',
   'rows':10
};

And this code wherever you want the feed headlines to display:

<div id="freshtags_FeedName"><i>Loading Feed...</i></div>

Similarly, a minor tweak to that code yeilds 'Generic FreshTags' behaviour as existed in the original FreshTags release:

//generic widget
WidgetData['freshtags']['freshtags_generic'] = {
   'type':'posts',
   'source':'feed',
   'feedurl':'http://del.icio.us/rss/tag/%tags%',
   'rows':10
};

And:

<div id="freshtags_generic"><i>Loading del.icio.us...</i></div>

Peek-a-boo headlines functionality also remains:

//Headlines Widget
WidgetData['freshtags']['BlogNameheadlines'] = {
   'type':'external',
   'source':'del.icio.us',
   'username':'del.icio.us username for blog',
   'anchor':'anchor tag for blog',
   'feedurl':'FeedURL for blog',
   'tag_list':'freshtags_tags',
   'rows':10
};

And:

<a id="BlogNamelink" href="javascript:toggleitem('BlogNameheadlines','BlogNamelink','-');freshtags_load('BlogNameheadlines');">+</a>
<a href="BlogURL">BlogName</a>
<div id="BlogNameheadlines" style="display:none;"><i>Loading...</i></div>

Note that the following must be included in the <head> section of your blog for this to work:

<script type="text/javascript">
   function toggleitem(postid,linkid,newtxt,displaytype) {
      if(!displaytype) {displaytype = 'block';}
      var whichpost = document.getElementById(postid);
      if (whichpost.style.display != "none") {
         whichpost.style.display = "none";
      } else {
         whichpost.style.display = displaytype;
      }
      if(linkid) {
         var lnk = document.getElementById(linkid);
         lnk.href = "javascript:toggleitem('"+postid+"','"+linkid+"','"+lnk.innerHTML+"');";
         lnk.innerHTML = newtxt;
      }
   }//end function toggleitem
</script>

Below is a list of easily externally accesible functions in FreshTags:

freshtags_load - called with no parameter it (re)loads all FreshTags widgets on a page. If you pass it the ID of a widget, just that widget will be (re)loaded (and associated widgets).
get_current_tags - takes three optional parameters, a space-separated string of default tags to use if none are found, an object containing a complete list of all tags avaliable for use in the format {'tag':count}, and a boolean value specifying whether or not to draw rel-tag data from the page if no tags are detected from the URL/referrer. Returns a plus-separated string of tags found or the null string ('').
main_tags_loaded - if you pass it false and teh ID of a FreshTags tag widget it will reload the widget (and associated widgets) without re-calling get_current_tags like freshtags_load does (thus enabling you to set the current tags to whatever you want).
listTags - takes the ID of a FreshTags tag widget and returns a string of the renderation to XHTML.
listTitles - takes the ID of a FreshTags posts (or external) widget and returns a string of the renderation to XHTML. An optional second parameter specifies whether to hide the widget when there's no data (false, default) or

Tags:

WidgetData

2006-09-18T19:27:00.000-05:00

WidgetData is the new settings system that makes FreshTags-Singpolyma2 tick. It is a standard way of storing data for JavaScript widgets, so that they can share data and be less likely to have namespace conflicts with each other. It is by no means set in stone, however this post will be a brief description of the system, and how it is used in FreshTags.

The basic WidgetData system is a JSON object stored in var WidgetData in the global JavaScript scope of a page with the following basic structure:

{
   'Widget-System':{
      'XHTML-block-ID':{
         //widget data
      }
   }
}

Where Widget-System is the name of the system that should render this widget (ie, 'freshtags') and XHTML-block-ID is the DOM ID of an XHTML block the widget will be rendered into (ie, 'freshtags_tags').

As Used in FreshTags
In the FreshTags WidgetData setup, there are certain standard fields on each block (all the fields here discussed are assumed to be on the JSON object at WidgetData['freshtags']['XHTML-block-id']).

type - Tells FreshTags what kind of widget this is. Currently three types are supported: tags (a tag list), posts (a list of posts, either associated with a particular tag list or not), and external (a reserved type that simply tells FreshTags not to render this widget automatically).

tag_list - posts/external widgets only, tells FreshTags that this widget is linked to the tags widget whose id is tag_list.

source - Tells FreshTags what service to pull the data from. On tags widgets the only currently legal value (and the default value) is 'del.icio.us'. On posts (and external which are to act like posts) widgets this may be 'del.icio.us' (default), 'wordpress' (pull data from a FreshTags for Wordpress enabled blog), or 'feed'. Posts/external widgets which are linked to a tags widget will default to the same source as the tags widget.

username - the username to give the service when extracting data (currently only valid on del.icio.us source). Posts/external widgets which are linked to a tags widget will default to the same username as the tags widget.

anchor - The anchor tag to use when drawing in posts.

format - The format to render widget in (such as 'drop' or 'drop-add', may also be an @-separated cust_html string, an array of the type produced by the FreshTags switch, or a function that takes the widget ID and renders it to a string which it returns).

rows - Maximum number of posts/tags to display.

feedurl - The URL to the feed for post data (to use if there is no other post data, or if source==feed)

url - posts/external widgets with source==wordpress only. The URL to the WordPress blog's main page.

prompt - Default entry in a drop-down list. Default '- Tags -' for tags, default blank for all else.

tag_url - tags widgets only, the URL to send browser to on tag selection. Blank for current page. ?tags=TAGS tacked on automatically, %tags% also replaced with tags

join_char - tags widgets only, the character to use between the tags in an intersection when replacing into %tags% for tag_url.

defs - default tags if no tags detected.

no_autocapture - default false, set to true to stop the attempt to autocapture rel=tag data on failure to detect tag from URL/refer URL.

curr_tags - the tags currently detected/selected by this widget.

all_tag_data - where the list of all tags in an account is stored in the JSON format {'TAG':'COUNT'}

tag_data - where the list of all tags in an account matching curr_tags is stored in the JSON format {'TAG':'COUNT'}

posts_data - posts/external widgets only, stores the JSON data for all posts in the widget.

Tags:

FreshTags-Singpolyma 2

2006-09-13T20:00:00.000-05:00

FreshTags is a context-based navigation system based on tags. The most current 'official' version is v0.5 as seen on FreshBlog. I have also run my own version as a contribution to the effort. With the advent of Blogger BETA, the original purpose of adding categories to Blogger is gone and now the emphasis is on the tag passing, etc. Complaints have been abundant that neither version of FreshTags would work properly on the BETA. This milestone upgrade in my version aims to both fix that problem, as well as give FreshTags the boost it needs for future growth.

The script is hosted in the same entry on JScripts, and is 100% backwards-compatible with my previous version. To use it forwards-compatably, however, requires a considerably different setup, therefore I am re-authoring the basic instructions post here, and the old one shall be 'deprecated' (with a link here). There are many customisation options and different ways things can be done for FreshTags, especially with the new system. In this post I will cover some basics. Later posts will cover more functionality, and links to those posts will be added here.

Basic Installation for 'Classic' FreshTags Functionality
To install this version of FreshTags so that it works about the same as the original FreshTags (as it runs on FreshBlog), you will need this code:

<!-- FreshTags0.5-Singpolyma2 -->
<script type="text/javascript">

   if(typeof(WidgetData) != 'object') WidgetData = {};
   if(typeof(WidgetData['freshtags']) != 'object') WidgetData['freshtags'] = {};

   //tag widget
   WidgetData['freshtags']['freshtags_tags'] = {
      'type':'tags',
      'source':'del.icio.us',
      'username':'Delicious Username',
      'anchor':'Anchor Tag (optional)',
      'format':'drop'
   };

   //posts widget
   WidgetData['freshtags']['freshtags_posts'] = {
      'type':'posts',
      'tag_list':'freshtags_tags',
      'rows':'10'
   };

</script>
<script type="text/javascript" src="http://jscripts.ning.com/get.php?xn_auth=no&amp;id=818185"></script>
<div id="freshtags_tags"><i>FreshTags Loading...</i></div>
<div id="freshtags_posts"></div>
<a href="http://ghill.customer.netspace.net.au/freshtags/" title="Categories by FreshTags"><img src=" http://ghill.customer.netspace.net.au/freshtags/freshtags-btn.png" alt="FreshTags" /></a>
<!-- /FreshTags0.5-Singpolyma2 -->

Advanced users will note that this JavaScript does not have the needed commented CDATA section for XML well-formedness. This is because of an issue with Blogger BETA. If you are on a classic blog, feel free to add it in (as I have), but since no special characters are likely to be used in this particular piece of JavaScript code, it doesn't matter much.

Replace Delicious Username with your del.icio.us username and Anchor Tag (optional) with your del.icio.us anchor tag (or blank for none). The 'format':'drop' may be set to list, flat, drop, drop-add, drop-add-async, or any other legal format string from my previous version.

To install this on a Blogger Classic blog, add the entire code into your blog template at the place where you want the tag list and post list to appear.

To install this on a Blogger BETA blog, create a new HTML/JavaScript widget, set the title to whatever you want, and place the entire code in the body, then save.

'Fake Post' functionality
To install this version so that it uses a 'fake post' to display tags, as my original did, add this line to the end of the '//tag widget' section:

WidgetData['freshtags']['freshtags_tags']['tag_url'] = '/2000/01/tags.html';

//postpage widget
WidgetData['freshtags']['freshtags_postpage'] = {
   'type':'posts',
   'tag_list':'freshtags_tags',
   'format':'list-extended'
};

My original version also used the drop-add format, so if you want to mimic that behaviour exactly you must change the format line as well.
(Note: for this to work you will have to have a post entitled Tags, dated January 1, 2000 with the code <div id="freshtags_postpage"></div>)

Labels page (BETA only)
To install this version so that it uses the Blogger BETA labels page for display, add this code to the end of the '//tag widget' section:

WidgetData['freshtags']['freshtags_tags']['tag_url'] = '/search/label/%tags%';
WidgetData['freshtags']['freshtags_tags']['join_char'] = '/';

It is important to note that, except for the sidebar, the display on this page is generated by Blogger and not by FreshTags. This breaks tag-passing a little bit. In the next minor revision I will add code to append the ?tags=TAGS to the link URL on any links that have rel="bookmark" on them (the microformats standard for permalinks).

To turn off autocapture of tags from rel=tag data on any of these, add this code to the end of the '//tag widget' section:

WidgetData['freshtags']['freshtags_tags']['no_autocapture'] = no_autocapture;

One thing you're probably wondering is if this will work with the BETA labels with no del.icio.us account. No. That may be coming, but I can't promise anything yet. Does the peek-a-boo sidebar, etc still exist? Yes, but this post is long enough, so I will write another article explaining all that soon.

Tags:

FreshRolls (Wrinks)

2006-09-09T10:54:00.000-05:00

I have added a new feature to my Wrinks app. In the spirit of FreshTags we have FreshRolls.

If you go to a wrink page (for example, the Blogger Hacks Wrink), you will note a third code option. FreshRolls are currently only available in JavaScript (no PHP yet). You can select what blog to exclude (or none), just as on the normal roll output, and whether this code is to be used in conjuction with ring code or not (more on that in a bit). The code is then a simple JavaScript include, as with standard rolls, that you place where you want the FreshRoll to appear.

FreshRolls attempt to detect tags and 'passed tags', just like FreshTags. If it finds some, it will display only those blogs which match the tag(s) found, otherwise it will normally display the entire roll. If, however, you told it you would be using it with a ring, it will not display a roll title and if no tags are detected will output none of the roll.

What is this 'combo-mode' useful for? Well, if you paste standard ring code followed directly by FreshRoll code set to 'combo-mode', if tags are detected the matching blogs will be displayed following the ring, otherwise you just see the ring. I have set it up this way in my sidebar. You can test it by appending ?tags=blogger to this page's URL and reloading.

Blogger BETA compatible : Just create a new HTML/JavaScript widget on your BETA blog and cut-n-paste in the code(s) from Wrinks.

Tags:

First Blogger BETA Template

2006-09-07T14:08:00.000-05:00

Please see my Singpolyma Templates for the New Blogger

This is the first Blogger BETA custom template based on my Singpolyma Templates. This will not be a final version because it still has some slight bugs, but I would like feedback from users before I make any changes. You can preview the new template at my BETA blog. The spirit and look of the original basic template has been ported to the new widget system, and all fonts and colours can also be edited from the new panel for that purpose. Minor known issues are:

Not even close to XHTML compliant. This is not my fault. There are significant JavaScript sections on Blogger BETA that are malformed XML and thus break any sort of compliance. I've written support, but I doubt that will do any good. We need to find a way to put serious pressure on them to correct this. The new template system is in XML, make XML-well-formed output (and perhaps even XHTML-compliant output) has never been easier, and yet so far away. The changes they would have to make are minor (like, adding commented CDATA sections around the JavaScript). I don't see a thing about it on Known Issues.
Ditto to peek-a-boo comments. This is a limitation in the BETA as far as I can see... I really hope they can be persuaded to fix this.
The pre-included blogroll is XOXO compliant, but has fewer features as the manually-created ones did (ie, no option for feed data).
No link to main comments feed (it doesn't seem to be generating, I believe this is a known BETA issue...)

The profile section supports both single and group blogs, unlike the original which assumed a single-authorship blog. I could also add previous/next links on item pages and a labels sidebar widget if people want it. Versions with my other hacks (as before) will be forthcoming.

To install this template on your blog, cut-n-paste the template from here into the 'Edit HTML' view on your BETA blog, click 'Save', and if you are asked to confirm the deletion of existing widgets click the affirmative option. Then you can add/edit widgets or change the colours!

Windows Media Streams on Ubuntu

2006-09-07T11:33:00.000-05:00

Since I did all the research on this yesterday to get it working, I figured I'd share it with the world in case someone else is having problems with it too! These instructions assume Ubuntu, but should work on pretty much any Linux system with minor modifications.

1) You must have a GStreamer player installed. Totem (the defaul GNOME movie player/media player) is what I used because it was already installed.
2) Install gstreamer0.10-plugins-bad with Synaptic
3) Go to MPlayer and download the binary codecs for Linux. Unpack the file into either the /usr/lib/win32/ directory or the /usr/lib/codecs directory (depending on your system, I put it in both to be safe).
5) Install gstreamer0.10-pitfdll with Synaptic (if available) or get it from a mirror.
4) Install gstreamer0.10-plugins-ugly with Synaptic

That should be it! You should now be able to listen to Internet radio stations in the Windows Media format.

Tags:

BETA Upgrades Progress

2006-09-06T15:22:00.000-05:00

Since the Blogger-released Widget Code Help and Johan's Post, progress on BETA conversion has been much easier. Check my BETA Blog and you'll find that I have most of the old post functionality and look done, with the following exceptions:

Feed information (often hidden) in template header. This is because Blogger BETA puts feed information for the whole blog in with the posts (that's dumb) and basically expects you to have it in the footer of ever post (even dumber). Have yet to find a way around this (besides hard-coding the links).
Peek-a-boo comments... uh... Blogger? Little help? Comment data is only accessible on item pages...
Date no longer links to archive... that data is gone (and wasn't terribly useful anyway)
I haven't got it so the colour-changer works yet, but you can't see that from my blog ;)
Minor XHTML breakage because the widget tags generate divs, and divs aren't legal inside ul tags

Improvements due to BETA:

Tags look the same, but are now drawn from the new labels field
Peek-a-boo backlinks are no longer a hack
Comment author is now properly marked up as an hCard

The sidebar will come next (widitized! although I'll leave the comments for full XOXO-compliant blogrolls for advanced users), then perhaps some new features (like next/prev links on item pages). Then work will start on comment forms, etc.

Tags:

blogger
beta

IM vs Telephone

2006-09-05T07:33:00.000-05:00

Why is it that while we all love IM systems (geeks especially loving our fair Jabber) we still use telephones? Is it that we like the voice aspect? Well, most IMs have that option. I don't even like that option. So what is it then?

You don't 'turn on' a telephone.

It's just on. So if someone is home and you call them, you will reach them. No problem. With IM you have to wait for them to be online... what a pain.

Some systems have tried to overcome this with hardware, the Skype phone being a prime example. This works well as long as people can be made to understand that they must leave their computers on ALL the time for it to work. I can't help wondering though, could this be similarly overcome directly from text-only IM software?

I think it can, but we will have to change the way many people think about IM. It seems that to many people, IM only works when a person is actively at their computer (which is mostly true at this point), so when someone is set to Away, etc, they do not initiate conversation, or even send a message. But what if the programs tried to 'call' a person the way a phone does when it rings? What if Jabber clients (or other IM programs) turned the volume up on your machine and played a really loud sound when someone initiated a chat while you were set to Away? They could then send an auto-message to the person telling them that the person they have started chatting with is away and it is trying to call them 1...2...3...4...up to a configurable number, then, please leave a message (easy to do in Jabber).

We would have to retrain ourselves to leave the computer on and signed in during all waking hours (or all hours period for Google Talk where offline messaging still doesn't work). We would have to retrain ourselves to try talking to people set to away, we would have to be willing to 'run to the computer' when it 'rang' just as we do with our phone. We wouldn't have the conveniance of cordless like we do for phones (not at first anyway), but we would save ourselves so much time and effort... and maybe finally kill 'real' telephony.

Tags:

Google Calendar Feed Cleaner

2006-08-30T17:08:00.000-05:00

Google Calendar's feeds are not the most useful in the world. They are sorted by edit date instead of when they're happening, and they're only available in ATOM.

No longer. Using the extended feed information Google tacks into their calendar feed it is possible to create a clean, sorted feed with the start date as the pubDate. Just go to the Google Calendar Feed Cleaner and enter the URL to your calendar's feed, select the format you want (XHTML for testing, RSS 2.0, or JSON(P) ), and enter the max items to be in the results (default 5). You will get a nice, clean feed of your Google Calendar data.

Tags:

YubNub LocationBar 0.15

2006-08-30T12:10:00.000-05:00

I have released version 0.15 of my YubNub LocationBar Firefox Extension. There are some minor changes to the look and feel (the location bar shows the YubNub URL and icon while processing, and the YubNub icon shows on blank pages). It also extends the local firefox keyword bookmarks to allow for switches. If switches are added to the bookmark's URL (using YubNub ${name} syntax), then the bookmark will accept switches according to normal YubNub syntax.

Update: I forgot to mention -- it also stores up to 50 commands from your command history between sessions now.

Tags:

Blogger BETA

2006-08-28T09:26:00.000-05:00

Blogger BETA has launched and with it comes many new features and challenges for us as hackers. I'm slow on the draw for this one. I was on a trip when the whole thing came down and am just now catching up. FreshBlog, as always, has the scoop extrordinaire. Much good stuff over there... I wish they had some sort of 'blogger-beta' tag for all of it (or tagged it all both blogger and beta) so I could link to the category list (hint, hint ;) ).

I'm not going to give a rundown of all the new stuff, but instead am going to give a 'so what' as relates to my stuff.

Busted Hacks
I'm going to be creating a test Blogger BETA account soon and trying to fix up hacks that don't work there. However, from what I'm hearing it seems that there is no HTML editing in the new template system, and I don't want to spend work making the old hacks work on the old template system for the new Blogger (that's a mouthful!). I'd rather wait until hacks can be implemented in their own right on the new system. More on this when something happens.

Blogger Recent Comments
Is dead. Full stop. No question there. Blogger BETA has comment feeds. I will keep the app running, however, for people who have not upgraded yet (like me!) and just for reference.

FreshTags
Both the main FreshTags and my version are far from dead. Just as FreshTags features are useful on WordPress, where there was already a category system, so they will continue to live on here on Blogger. Since it's not my baby, I won't say too much, but we are certainly discussing the best way to move forward in this area. For now, I have upgraded my version to support incoming ?labels= from other blogs, and also to use that locally (still supporting ?tags= from old FreshTags and FreshTags for WordPress). If you are on Blogger BETA and want to use FreshTags 'as is' (provided you can get the script to work...) the following code will use the proper label display page instead of the 'fake post' for post display:

<script type="text/javascript">var freshtags_tag_url = "/search";</script>

Upgrades to the Greasemonkey script should also be forthcoming.

Update
Have created a BETA test blog and I have a mixed reaction. The new templates interface is nice, and as long as they get HTML editing working for it, it should be über cool. Some of the new button graphics are uglier, and the post published page doesn't seem to have the details on it anymore (because of the dynamism), which will cause problems for the GM world... the JS/XHTML module funcitonality is nice though -- hacks will make use of that! (perhaps even FT?)

Tags:

Blogger Hacks Wrink

2006-08-09T19:18:00.000-05:00

A way to organise our microsphere, if only a little. A compendium of blogger hacks blogs. A social blogroll, which can also double as a blogring. A wrink. I've created it and put it in my sidebar, you can see it under the heading 'Blogger Hacks'. I've opted to include it in 'ring' mode, which means you get next, previous, and random links that let you navigate the list. Click the title to see the full list, or add your own blog.

If you go to the wrink page you can use the 'Add Site to Wrink' link to suggest your site for inclusion on the list. It will be help pending my approval, but I should be monitoring regularly for new entries. Then use either the 'Get Ring Code' link and select JavaScript (to add it as you see on my page) or the 'Get Roll Code' link (again select JavaScript, this will display the full list as a blogroll) and paste the code into your page.

Weekly traffic stats across the whole list will be monitored, and the whole thing is available in JSON(P) format for custom implementations. Drive traffic to your site while also giving your visitors the ability to find other blogs about blogger hacks!

Feature suggestions and bug reports are, as always, greatly appreciated and anticipated.

Tags:

YubNub LocationBar 0.14

2006-08-08T16:57:00.000-05:00

I have updated my YubNub LocationBar FireFox Extension. There was a minor glitch that caused typing local IPs (for router setup, etc) to be interpreted as YubNub commands. This has been fixed. I have also added a new feature. If you have any FireFox keyword 'quick search' bookmarks defined, these now work, and are considered a higher precedence than YubNub commands. Thus if you have a FireFox keyword bookmark defined for 'g' that does something other than Google search, that will be done when you type 'g blah' instead of using YubNub's command.

Tags:

yubnub

Comment Feeds Without Well-formedness

2006-08-07T09:52:00.000-05:00

In response to the popular confusion about XML well-formedness and a recent nudgeing by Greg, I have upgraded Blogger Recent Comments. People who have been there before will note that there is now one less instruction -- XML well-formedness is no longer necessary! I have tested this with a Blogger template on which I purposely broke well-formedness and the comments still came through fine! Originally introduced on this blog, Blogger Recent Comments is a Ning app that can automatially generate RSS, JavaScript, and JSON feeds of all comments on your blog. Setup is now just three easy steps!

Tags:

Blogger del.icio.us categorising, pinging, and trackback helper

2006-07-15T09:31:00.000-05:00

I have a version of this script for the new Blogger as well.

Many people have installed Johan Sundström's del.icio.us Categoriser Script and reaped the benefits. Some have also used my trackback script to enable outbound trackback inside Blogger. Now the power of these two scripts comes together to benefit everyone!

With Johan's full approval I have married the two scripts into one categoriser and trackback script. This script is set up in such a way that installing it should overwrite any previous installation of Johan's script and keep your existing script settings. To find out more about the categorising and pinging functions of the script, please read Johan's post.

The trackback features work slightly differently than they did in my previous script. On the post-create page there is now a 'Trackback' textarea, instead of a form on the 'post complete' page. Enter one or more trackback URLs (each on it's own line in the textarea) to use the trackack feature. After publishing the post your trackbacks will be sent out automatically and the status will be displayed on the 'post complete' page. For more information on trackback, go to Wikipedia.

There are also a couple minor new features for the categorising in this release. One is the option to use the first 200 characters of the post body in the extended field on del.icio.us, instead of the datestamp. The 'Tags:' label that one clicks to change settings is now blue, and your cursor should change into a hand when hovering it. Also, when republishing your whole blog the link to del.icio.us from your last post will not be displayed.

Install the Greasemonkey Script

Singpolyma Templates

2006-06-14T07:36:00.000-05:00

For templates for the new Blogger see the updated post.

Due to some of the feedback I've been getting from hack implementors recently I have decided to roll out my own set of templates for Blogger, implementing various and sundry features that different persons have expressed interest in. These templates are all loosely based on the Blogger Minima concept, with some inspiration from my blog also. They have been written from scratch, however, and all have the following features:

Conformance to hAtom and the XOXO Blog Format
XHTML validity as much as is possible with Blogger
Support for comment feeds both on the whole blog and individual posts
hCard markup on the profile section of the sidebar
'Standard' comment markup
XOXO Blogroll Format blogrolls
Backlink counts

So, if you're looking for a new template, or just want some of these features or some of those that follow, this is for you.

Basic Template - Peek-a-boo comments and backlinks
No Peek-a-boo - Same as basic template, but without the peek-a-boo comments and backlinks
With Comment Form - Peek-a-boo comments and backlinks with my inline comment form
Asynch Comment Form - Peek-a-boo comments and backlinks with my asynchronous comment form
Comment Photos - Peek-a-boo comments and backlinks with inline comment photos and author highlighting

If anyone wants another version of this template created (ie, some combination of the hacks, or for another hack) feel free to contact me. If anyone has any ideas or feedback at all concerning the usefulness of / look of these templates, again, I have an open ear. I would ask that you keep your comments positive. 'This Sucks!' is not all that helpful to me, even if that's how you feel ;)

Notes to advanced users: Hopefully these templates will also be useful to you in examining my code, etc. To remove peek-a-boo from comments or backlinks in any of the above templates, simply remove the onclick handler from the appropriate link. It should also be mentioned that these templates all support both versions of blogger comment permalinks. If you have any questions about the features on these templates I'm just an email/comment away!

Asynchronous Comment Form

2006-06-08T05:01:00.000-05:00

See this page for a similar hack for the new version of Blogger.

This hack does not work with Blogger BETA.

This is a new, partly experimental, upgrade to my inline comments form. Credit goes to Aditya of The Last Word for inspiring this hack. Comments are posted without ever leaving the post page and then the page is reloaded. You never see the Blogger comment page unless there is an error. The form is still coComment compatible and supports posting using your Blogger account :)

Word verification for comments must be turned off (to do this go to the 'comments' tab in your blog settings, scroll to 'Show word verification for comments?' and select 'No')
Turn comment posting by anonymous users on (to do this go to the 'comments' tab in your blog settings, scroll to 'Who Can Comment?' and select 'Anyone')
Insert the following code into the <head> section of your blog template :

<script type="text/javascript" src="http://jscripts.ning.com/get.php?xn_auth=no&id=1338954"></script>
<script type="text/javascript">
//<![CDATA[
var comment_form_template = '<div class="comment-poster">[[AUTHOR]]</div>\n'
+ '<div class="comment-body"><div class="innerCmntBody">[[BODY]]</div></div>\n'
+ '<div class="comment-timestamp"><a href="[[PERMALINK]]" title="comment permalink">[[DATE]]</a></div>\n';
//]]>
</script>
Insert the following code directly after your <body> tag:

<iframe id="comment_form_target" name="comment_form_target" style="display:none;" onload="if(comment_form) {check_comment_posted();}"></iframe>
Replace the <$BlogItemCreate$> tag with the following code:

<div id="comment_form_preview<$BlogItemNumber$>"></div>

<ItemPage>
<script type="text/javascript">

var blogTool = "Blogger";
var blogURL = "<$BlogURL$>/";
var blogTitle = "<$BlogTitle$>";
var postURL = "<$BlogItemPermalinkUrl$>";
var postTitle = "<BlogItemTitle><$BlogItemTitle$></BlogItemTitle>";
var commentAuthorFieldName = "anonName";
var commentAuthorLoggedIn = "false";
var commentFormID = "cformtag<$BlogItemNumber$>";
var commentTextFieldName = "postBody";
var commentButtonName = "post";
var cocomment_force = false;

</script>
<script id="cocomment-fetchlet" type="text/javascript" src="http://www.cocomment.com/js/cocomment.js"> </script>
</ItemPage>

<ItemPage><a href="javascript:toggleitem('cform');">Post a Comment</a>
<div style="display:block;" id="cform"></ItemPage>
<MainOrArchivePage><a href="javascript:toggleitem('cform<$BlogItemNumber$>');">Post a Comment</a>
<div style="display:none;" id="cform<$BlogItemNumber$>"></MainOrArchivePage>
   <form target="comment_form_target" id="cformtag<$BlogItemNumber$>" action="http://www.blogger.com/login-comment.do" onsubmit="comment_form_submit(this);isSubmit=true;" method="post"><div>
      <input type="hidden" name="blogID" value="<$BlogID$>" />
      <input type="hidden" name="postID" value="<$BlogItemNumber$>" />
      <div>
         <h2 class="sidebar-title form-title"><label class="cbody">Leave your comment </label></h2>
         <h2 class="sidebar-title"> You can use some HTML tags, such as <b> <b>, <i>, <a> </b> </h2>
         <textarea name="postBody" class="comment" rows="8" cols="40" onkeyup="comment_form_preview(this.form);"></textarea>
         <h2 class="sidebar-title identity"> Choose an identity </h2>
         <div>
            <div>
               <input id="idenBlogger<$BlogItemNumber$>" type="radio" name="iden" value="Blogger" checked="checked" onchange="toggleitem('cfo<$BlogItemNumber$>');comment_form_preview(this.form);" />
               <label> Your Blogger display name </label>
            </div>
            <div>
               <input type="radio" name="iden" value="Other" onchange="toggleitem('cfo<$BlogItemNumber$>');comment_form_preview(this.form);" />
               <label>Other</label>
               <div style="display:none;" id="cfo<$BlogItemNumber$>">
                  <table style="margin-left: 4em;" cellpadding="0" cellspacing="0">
                  <tr> <td colspan="2" style="padding-top:.4em;position:relative;left:-4em;" align="left"> These fields are optional, but I would appreciate it if you filled them out. </td></tr>
                  <tr> <td> <label> Name </label> </td>
                  <td> <div class="errorbox-good"> <input type="text" name="anonName" value="" maxlength="100" class="text" /> </div> </td> </tr>
                  <tr> <td> <label> Your web page </label> </td>
                  <td> <div class="errorbox-good"> <input type="text" name="anonURL" value="" maxlength="100" class="text" /> </div> </td> </tr>
                  </table>
               </div>
            </div>
            <div class="diff-user"> Or you can sign in <a href="http://www.blogger.com/login.g?r=http%3A%2F%2Fwww.blogger.com%2Fcomment.g%3FblogID%3D<$BlogID$>%26postID%3D<$BlogItemNumber$>"> as a different user</a>.</div>
         </div>
      </div>
      <div class="errorbox-good"> </div>
      <p class="buttons">
         <input style="margin-right:.3em" name="post" value="Publish Your Comment" class="publish" type="submit" tabindex="2" />
         <input value="Preview" type="submit" name="preview" tabindex="3" />
      </p>
   </div></form>
</div>
Save your template and republish your blog

Note to advanced users : The variable set in step 3 is the template used by the script to generate previews. You can modify it to be closer to the code generated for comments on your blog so that users get a better preview :) Some may also wish to browse the JavaScript source.

Tags:

Survey: The Perfect Blogging Service

2006-06-07T04:27:00.000-05:00

You know what you want from your blogging service. If you use Blogger, you may have written a 'Beef up Blogger'-style post, even. Or a Beef up WordPress post. Or maybe even a Beef up Xanga post (yes, there are some real bloggers on Xanga). I at one point even had a rating breakdown to see how well blogging services matched up to my ideal! While my opinions have changed over time, one thing still remains - no service is perfect. No matter what you use there are things you wish your service could do. That's why we have blog hacks!

This post is a survey. What is the perfect blogging service? We're all going to answer differently, but hopefully some patterns will emerge. What features are important? Forget for a moment what is supported by your particular platform and just tell us what you want. Not what you wish you had, but what you want even if you have it. Trackback can be important to you even if you use WordPress. Maybe that's why you're using WordPress.

The purpose of this survey is not to determine one particular existing service that is the 'perfect blogging service', but rather to identify the feature set that is important to bloggers.

You can respond to this survey by leaving a comment on this post (probably preferred) or by writing a post on your blog and linking back here. I don't trust blog search or backlinks, so I'd really appreciate trackback pings if you decide on the latter, or a comment with a link to your post.

Tags:

Asynchronous FreshTags

2006-06-06T08:03:00.000-05:00

I have updated my version of FreshTags to include support for asynchronous loading of posts. Now if you add the following code to your template:

<script type="text/javascript">var freshtags_tag_format = "drop-add-async";</script>

Instead of the drop-down box taking you over to the tags post page it will load the posts for the tag combination for you asynchronously in the sidebar.

A nice side-benefit of this is that you may now use all the other FreshTags tag-list types (except custom), including flat, flat-multi, list, list-multi, scroll, drop, and sub. Just put them in the above code where I have 'drop-add-async'.

You will have to be using the jscripts.ning.com version of my FreshTags implementation for this to work, instead of the old one hosted on AWriterz. The code for the new include (which you can replace the old one with to upgrade) is:

<script type="text/javascript" src="http://jscripts.ning.com/get.php?xn_auth=no&amp;id=818185"></script>

Tags:

Last Updated Posts

2006-06-06T06:51:00.000-05:00

Aditya of The Last Word has made a very useful discovery -- the new Blogger RSS feeds are ordered by last update! This means that when you make an edit on an old post, that post is moved to the top of your RSS feed! The use for this immidiately becomes apparent : a widget for showing which posts have been updated recently!

Based off of a quick hack Aditya threw together I have developed some reuseable code to just this end. I have it running asynchronously in my sidebar under the 'Previous Posts' heading. When you first load the page (or if you have JavaScript turned off) the normal Blogger-generated 'Previous Posts' list is displayed. After the page has loaded, if you have JavaScript on, the list will update to a list of the most recently updated posts.

So, on to the code! There are two versions of this hack : synchronous and asynchronous. If you want it to run synchronously (that is, the page waits for the hack to finish before it continues to render) place the following code where you want the widget to appear:

<script type="text/javascript" src="http://jscripts.ning.com/get.php?xn_auth=no&amp;id=1317016"></script>
<script type="text/javascript">
//<![CDATA[
do_updated_posts('<$BlogURL$>','',5);
//]]>
</script>

You can change the 5 to whatever number of posts you want in the list. Save and republish : you're done!

If you want it to run asynchronously (the page loads before the hack does), insert the following code into your <head> section:

<script type="text/javascript" src="http://jscripts.ning.com/get.php?xn_auth=no&amp;id=1317016"></script>
<script type="text/javascript">
//<![CDATA[
addLoadEvent(function(){do_updated_posts('<$BlogURL$>','last_updated_posts',5);});
//]]>
</script>

Again, you can change the 5 to whatever number of posts you want in the list. Then, insert the following code where you want the list to display:

<div id="last_updated_posts"><i>Loading...</i></div>

Save and republish. You're done!

The whole way this works may just be a bug in the rss.xml generating engine. If it is, this hack will stop working when they fix it, since it is dependant on the order of items in rss.xml.

Tags:

IM Interoperability

2006-06-06T02:01:00.000-05:00

Jabber is the ineroperable-IM protocol... but only geeks even know it exists! With the advent of Google Talk there are more people using it -- but many of them don't even know it. So while Google has federated with the Jabber/XMPP universe, most IM users are still stuck in the MSN, Yahoo, AOL world unable to read out.

The big guys may only be in it for the money, but they're not stupid. They know that having an account on every major IM network is a huge pain. They just haven't figured out yet how to work together without losing their precious revenue. They seem to be moving in the right direction, however. The MSN Messenger (soon to be Windows Live Messenger) team has affirmed and re-announced their intention to federation with Yahoo Messenger.

It seems to be unclear whether this will be an actual network federation or a multi-client style feature. What I mean is, will only users of the newest versions of WLM be able to talk to Y!IM? What about older clients? What about Jabber transports? Obviously the transports should be able to evolve to support this (yay!) but whether they themselves allow for full network federation, I think, will be an indication of how ready the big guys are for interoperability.

Tags:

Asyncronous Archives

2006-06-05T04:31:00.000-05:00

This hack combines two popular archive hacks with a new functionality in the same script. The two popular hacks included are the displaying of archive post counts in the archive list, and the re-ordering of the archive list. These two can be applied using the script with or without the third, new, functionality with is asyncronous loading of archives into the sidebar. If you don't know what that means, try it out in my sidebar. Select an archive from the drop-down and notice that instead of being taken to the archive page, the posts in that archive are listed for you right in the sidebar. The steps to implement either part of this hack follow:

Edit your blog template and add the following code directly after the <body> tag:

<ArchivePage>

<ul class="xoxo posts" style="display:none;">
<Blogger><li><a href="<$BlogItemPermalinkUrl$>"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></a></li></Blogger>
</ul>

</ArchivePage>

Note: if you have your blog marked up using hAtom or the XOXO Blog Format this step is unnecessary.
Add the following code into your sidebar where you want the archive list to display:

<div id="archive_list"><i>Loading Archives...</i></div>
<div id="archive_display"></div>
<noscript>
<ul class="archive-list"><BloggerArchives>
<li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
</BloggerArchives></ul>
</noscript>

Note to advanced users. The noscript section is necessary. You can edit it, but only if you pass two additional parameters to the function in the next step containing the code starting the list and ending the list.
Add the following code into your <head> section:

<script type="text/javascript" src="http://jscripts.ning.com/get.php?xn_auth=no&id=1286814"></script>
<script type="text/javascript">
//<![CDATA[
addLoadEvent(function(){get_archive_list('archive_list','archive_display','format',sort);});
//]]>
</script>

Where format is drop if you want a drop-down archive list or list if you want the archives displayed in an unordered list. sort is true to sort the archive list oldest-to-newest and false to sort newest-to-oldest.

If you want the archive list to link to the archive pages instead of loading in the sidebar then delete the archive_display text from the code above.
Save your template and republish your blog.

Advanced users may be interested in the information on the scripts behind this.

Tags:

Blogger Supporting RSS?

2006-05-31T02:05:00.000-05:00

For the longest time Blogger has been ATOM-only. This now seems to be a thing of the past. While I can find no official announcement anywhere, RSS 2.0 feeds seem to now be available on all Blogger blogs (unless the blog has not had the index published since whenever the change was). As you would expect, while the old was, say:

http://singpolyma-tech.blogspot.com/atom.xml

They have added to this:

http://singpolyma-tech.blogspot.com/rss.xml

It's not the nicest implementation of RSS 2.0 I've seen, and I'm going to keep using my hAtom2RSS-through-feedburner feed for the comment options, but this is definately a step forward for Blogger.

Tags:

blogger
rss

Trackback Inside Blogger

2006-05-30T03:41:00.000-05:00

It is reccomended that you use the new del.icio.us, pinging, AND trackback script. This one may still work, but I no longer actively support it.

Blogger has no native trackback capabilities. While trackback is a wonderful tool, it can sometimes just be too much of a pain for Blogger users. After all, you just went to the work of writing a wonderful post, who wants to bother making a hop over to Haloscan afterwards to send trackbacks to others? With the advent of the semi-automatic Backlinks we seem to be ever less inclined to make the extra hop.

Now, the extra hop can be a thing of the past. Install the Blogger Trackback Userscript and get trackback functionality directly from your Blogger dashboard! Every time you publish a post, the script harvests the title, permalink, and post excerpt (as well as blog title) and then displays a form on the 'post complete' page for trackbacks. Enter the trackback URLs one at a time and hit enter. The trackbacks will be completed AJAXially.

Much thanks to Johan's Blogger del.icio.us helper script which facilitated much of the code for this script.

Possible Future Features

Support for autodiscovery trackback RDF so that one can enter simply the post URL for a trackback and not have to use the full trackback URL
Optionally try auto-trackbacking to all posts linked to from the post

Tags:

Virtually Synonymous Tags

2006-05-11T02:17:00.000-05:00

Most of us are aware of the problem. If I tag this post 'web2.0' and you monitor Technorati for the tag 'web20' then we're sunk. You'll never find me. If I tag a webpage on del.icio.us as 'hacks' and you monitor the page for 'hack', you may never see it. These tags are virtually synonymous, but a computer can't tell that.

Enter Tagging, a new Ning app designed to solve this very problem. The app stores groups of virtually synonymous tags (or TagGroups) that are defined by the community and provides easy access to them via both XOXO and JSON(P) APIs. With space to clearly define and describe TagGroups and a coComment catch-all discussion system the community solves their own problem by defining for the system what tags mean the same thing.

For more information see the Tagging About Page.

Tags:

Yurnet : When You Don't Know Where to Look

2006-05-09T02:10:00.000-05:00

Yurnet is a search engine with an interesting model -- search for things instead of in places. If you want to search for DVDs, but don't know what engine to use to do that, you could search Google for an appropriate engine, then search that engine, or just go to Yurnet and pick 'dvd'.

Yurnet takes awhile to get your head around. That's because at first it looks like a cheesy metasearch engine. If you're still thinking search where it seems almost rediculous. Which is faster : going to Google Images and searching for what you want or going to Yurnet, picking Google Images, and searching? The answer is they're basically the same. After corrospondence back and forth to the site creator, however, I finally came to understand that the real point of Yurnet is search what for when you don't know what site to search.

That said, the site is rather ugly. The final resolved URL is http://ww2.yurnet.com:8080/ -- not exactly something that looks pretty in bookmarks. The drop-down select box is a mélange of capitalization schemes, and the 'vs' searches (which really are out of the scope of the site) are listed first, giving an initial illusion that alphabetical order is not preserved. Also, some things are listed as wheres still (ie Google Image). Realistically the box should be cleaned up to use the same capitalization schemes throughout and be only a list of whats in alphabetical order, without engine names and the like getting in the way.

Tags:

Comment Photos and Highlighting

2006-05-08T04:14:00.000-05:00

PurpleMoggy has created a set of instructions for using this on Blogger BETA. I have updated my hack to support his new features and fix the bugs he found. There is also now a new 'no image' image.

Awhile back I wrote a post detailing my hack for adding profile photos to comments. Unfortunately that post was rather technical in its explanation. This post attempts to deal with adding the hack to your blog in a more user-friendly fashion and also with using the hack to highlight blog-contributor comments.

Step 1 - The first thing you need to do is find the comment section in your blog template. Edit your template and scroll down until you find the <BlogItemComments> tag. The code inside should look something like this:

<div class="comment-poster" id="c<$BlogCommentNumber$>">
<a name="c<$BlogCommentNumber$>"></a>
<$BlogCommentAuthor$> said...
</div>

<div class="comment-body">
<div class="innerCmntBody"><$BlogCommentBody$></div>
</div>

<div class="comment-timestamp">
<a href="#c<$BlogCommentNumber$>" title="comment permalink">4/26/2006 07:49:51 PM</a>
</div>

Step 2 - If you plan to use comment highlighting (so that the comments made by blog authors look different from those of users) this must be wrapped in another tag so that all of the code for each comment is in one tag. Like so:

<div class="commentelem">

<div class="comment-poster" id="c<$BlogCommentNumber$>">
<a name="c<$BlogCommentNumber$>"></a>
<$BlogCommentAuthor$> said...
</div>

<div class="comment-body">
<div class="innerCmntBody"><$BlogCommentBody$></div>
</div>

<div class="comment-timestamp">
<a href="#c<$BlogCommentNumber$>" title="comment permalink">4/26/2006 07:49:51 PM</a>
</div>

</div>

Some blog templates will already have a tag around their comments, as will those using the 'standard' comment markup. If you have one of those templates just write down the class of the wrapping tag or add one (the underlined section above).

Step 3 - Next we need the class of the element where we can look for the link to the author. In the example code above this would be comment-poster. When in doubt use the class of the overall wrapping tag. Once you have it, write it down. Count the number of <a> tags there are before the <$BlogCommentAuthor$> tag and write this number down (in the above example it is 1).

Step 4 - The only thing left to do in this part of the code is to insert the element where the profile photo will go. Add this code right before the <$BlogCommentBody$> tag: <div class="commentphoto"></div>

Step 5 - Now go to the <head> section of your blog and add the following code:

<script type="text/javascript" src="http://jscripts.ning.com/get.php?xn_auth=no&amp;id=830605"></script>
<script type="text/javascript">
//<![CDATA[
function thisblog_showCommentPhotos() {showCommentPhotos('commentphoto','class of author wrapper',# of a tags,'main wrapper class','<$BlogURL$>','highlighted text colour','highlighted text background';}
addLoadEvent(thisblog_showCommentPhotos);});
//]]>
</script>

Where class of author wrapper is the class you wrote down in step 3, the # of a tags is the number you wrote down in step 3, and the main wrapper class is the class you wrote down in step 2. If you are not going to use comment highlighting the last for parameters can be left off (from main wrapper class to highlighted tex background) otherwise you have to fill in the color you with the text and background of highlighted comments to be in their appropriate spots above.

Step 6 - Save and Republish!

Tags:

Windows XP Recovery Console

2006-05-03T01:48:00.000-05:00

Well this is a bit of a different-style post for me, but this discovery struck me as extremely useful and so I thought I'd share it with any of my readers who may not have seen it yet.

On the transition to Windows XP I was horrified to discover that the 'emergency boot disk' that XP creates cannot read NTFS partitions. It boots to MSDOS7.0 and then if your computer is NTFS you can do nothing. This essentially destroyed any chance of accessing your data if you could not boot to Windows. Many times during computer repair this was a hindrance and either elaborate workarounds had to be devised, or I fell back to the cure-all 'reformat and reinstall'.

Yesterday I discovered an incredibly useful tool from Microsoft in an incredibly obvious place: the Windows XP install CD. If you boot from the CD and press 'R' at the 'Welcome to Setup' screen you are taken to the Windows XP Recovery Console. This is exactly what I had been looking for for so long: a reformulation of MSDOS that can access NTFS partitions! I was able to use it to run CHKDSK (scandisk seems to be out) and fix the minor problem the drive had -- saving potentially hours of work to fix the problem any other way. There are even some XP-centric commands for dealing with user accounts etc.

What this does not help is users of many preinstalled systems, especially laptops. Most (if not all) of the 'restore disks' sent with such systems do not have the Recovery Console. However, techies who have a copy of the install disks can use their copy to run the Recovery Console on another person's system. No activation procedure ;) Even XP Professional install disks' Console will work just fine with XP Home systems :)

Tags:

Google AJAX

2006-05-02T05:00:00.000-05:00

Google AJAX is an interface for Google search that allows you to get the search results AJAX-style. This can be really handy when doing a series of quick searches. Better yet, however, is the widget that comes with it. Simply cut-and-paste the given code into your blog sidebar and you have inline Google search power -- the results are displayed right in your sidebar! You can also (optionally) specify a URL to restrict the search to, thus creating a widget to do an AJAX-style search on your own site using the power of Google right from your sidebar! You can see an example of this in my own sidebar. The script is built using the power of YubNub.

Tags:

'Standard' Comment Markup?

2006-04-27T02:38:00.000-05:00

What would be the benefits of standardising our comment markup? Well, that all depends on who you are. With the advent of comment crawling services a standard markup would really help them do their job. If your blogging platform offers no syndication options a standard comment markup could allow you to generate comment feeds yourself (using Blogger Recent Comments or similar). A standard markup about which we can make certain assuptions would also help the less technically inclined with implementing comment-centric hacks.

So, the natural first place to look is microformats.org. Nada, yet. Falling back to my own work with XOXO I have encapsulated comments as part of the XOXO Blog Format. Testing that with a comment crawler I find that it recognises the data 'as is' just fine. If you mix it with hAtom it is recognised by Blogger Recent Comments (more on this in a later post). It also provides many of the things we hackers like in comment hacks -- an item surrounding the whole comment and the comment text, and a way of identifying some of the meta-type links.

Thus this proposed 'standard' is both based on microformats (XOXO) and fits the three major reasons we would even want any sort of structure to our comment markup. The markup should be on the main page for crawlers et al, but need not be visible. Now to how to add it to your blog. Advanced users can probably figure it out from teh XOXO Blog Format, for others here are simple instructions for both Blogger and WordPress:

Blogger
Go to your blog template and find the section that begins with <BlogItemComments> and ends with </BlogItemComments>. Replace it with this code:

<script type="text/javascript">
//<![CDATA[
   posturl = "<$BlogItemPermalinkUrl$>";
//]]>
</script>

      <ul class="xoxo comments"> 
<BlogItemComments>
         <li id="c<$BlogCommentNumber$>" class="commentelem">Comment at <a href="#c<$BlogCommentNumber$>" title="<$BlogCommentNumber$>0"><$BlogCommentDateTime$></a> by
            <$BlogCommentAuthor$>
<a name="<$BlogCommentNumber$>"> </a>
<!-- JS HERE -->
            <dl>
               <dt class="body">body</dt>
                  <dd class="body"><$BlogCommentBody$></dd>
            </dl>
<$BlogCommentDeleteIcon$>
<br />
         </li>
</BlogItemComments>
      </ul>

If you are going to be visibly displaying comments on your main page it is reccomended you replace the  in the above with:

<script type="text/javascript">
//<![CDATA[
  commentlink = xget('//li[@id="c<$BlogCommentNumber$>"]//a');
  if(commentlink) {
   fragment = commentlink.href.split('#')[1];
   commentlink.href = posturl+'#'+fragment;
  }//end if commentlink
//]]>
</script>

And add the following to your <head> section:

<script type="text/javascript">
//<![CDATA[
function xget(xpathSelector) {
  var it = document.evaluate( xpathSelector, document, null,
         XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null );
  if(it.snapshotLength)
    return it.snapshotItem(0);
  return '';
}//end function xget
//]]>
</script>

Now to style this to look like we are used to having comments look. Skip past WordPress to Styling.

WordPress
To use this code on WordPress blogs, edit your theme and go to the 'comments.php' file. Find the section that starts <ol> and ends </ol>. Replace it with:

   <ol class="xoxo comments commentlist">

   <?php foreach ($comments as $comment) : ?>

      <li class="commentelem <?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">
         <?php if ($comment->comment_approved == '0') : ?>
         <em>Your comment is awaiting moderation.</em>
         <?php endif; ?>
         Comment at <a href="<?php the_permalink() ?>#comment-<?php comment_ID() ?>" title="<?php echo strtotime(get_comment_date().' '.get_comment_time()); ?>"><?php comment_date('F jS, Y') ?>  <?php comment_time() ?></a>
by <?php comment_author_link() ?>
 <br /><?php edit_comment_link('e','',''); ?>

                        <dl>
                           <dt class="body">body</dt>
                              <dd class="body"><?php comment_text() ?></dd>
                        </dl>

      </li>

   <?php /* Changes every other comment to a different class */ 
      if ('alt' == $oddcomment) $oddcomment = '';
      else $oddcomment = 'alt';
   ?>

   <?php endforeach; /* end for each comment */ ?>

   </ol>

This code seems to work with the most common themes. Now to styling so that we get back our old look:

Styling
Add this code to your <head> section:

<style type="text/css">
   .comments {
      list-style-type: none;
      margin-left: 0px;
      margin-top: 0.5em;
   }
   .comments li {
      display: block;
      margin-left: 0px;
      margin-bottom: 1em;
   }
   .comments dl {
      display: inline;
   }
   .comments dd {
      margin-left: 0px;
   }
   .comments dt {
      display: none;
   }
   .comments dd.author {
      display: inline;
      font-size: 1em;
   }
   .comments dd.body {
      display: block;
      margin-top: 0.5em;
   }
</style>

Tags:

OpenID for WordPress

2006-04-24T06:36:00.000-05:00

Someone else has written a (imho) better plugin. I have a backlog of tweaks to do to this plugin to make it work on more systems which I haven't got around to blogging/integrating. Note that this new plugin does not support using your blog as an OpenID server. It does, however, support sreg (but not hCard) and integrates into the WordPress account system.

I have modified Alexander Nikulin's plugin for WordPress that enables users to leave authenticated comments using OpenID and enables blog owners/contributors to use the blog as their OpenId. I have made the plugin compatible with WordPress 2.0, cleaned up the validity of the XHTML produced, and fixed a bug that kept some sites from finding the server.

It is reccomended that when using the server the blog admin use the blogs main URL as their OpenID but that other users/contributors use BLOGURL/?author_name=USERNAME.

When returning to the post page after posting a comment, if the comment was held for moderation ?moderated=true is appended to the URL. Adding code like the following will alert your users to this fact:

<?php if($_GET['moderated'] == 'true') echo '<div style="display:block;padding:20px;background-color:#ccc; font-weight:bold;font-family:sans-serif;font-size:12pt;"> Your comment is awaiting moderation.</div>'; ?>

Possible future features:

Support for sreg / hCards to get an actual name for the commentor instead of just using their URL
Support for sreg / hCards in the server implementation
Support for YADIS

Download the plugin

To install the plugin:

Download the gzip from the link above and unzip it
Upload the resulting folder into your /wp-content/plugins/ directory
Edit your template and replace your comments form code (likely in comments.php) with
<?php include dirname(__FILE__).'/../../plugins/openid/openidform.php'; ?>

Tags:

YubNub LocationBar

2006-04-21T04:06:00.000-05:00

My previous YubNub extension suffered from several glitches. While it was useful, it annoyed me enough to get me to research a new format. So I have written a new extension. This one functions a little differently and so I will leave the old one up. This extension modifies the standard FireFox location bar to support YubNub commands. If the entered text is determined to be a URL the location bar will function as normal, otherwise the text is passed to YubNub. No more second bar, no more glitchy locationbar behaviour, just straight YubNub integration. All YubNub commands will work, including single-word commands without parameters.

Download YubNub Locationbar

Version 0.11 has been released which fixes a glitch that broke access to about:config and typeing some javascript: URLs

Version 0.12 has been released which fixes a flitch that caused commands that are passed URLs not to work

Version 0.13 has been released which adds a command history feature. Simply push your up/down arrow keys while in the location bar to access the command history.

Version 0.14 has been released which fixes some minor bugs with navigating to local IPs, and also allows defined FireFox keyword bookmarks to supercede YubNub commands.

Version 0.15 has been released which has some minor improvements to the look and feel of the extension, and also now allows local firefox bookmarks to use switches (using the same syntax as YubNub proper). It also stores up to 50 commands from your command history between sessions now.

Version 0.16 has been released. Support for non-standard URLs (such as those from nic.d. Arrow-key history navigation broke some default Firefox features, so it is now Ctrl+Arrow Key. A hackish integration with Firefox auto-complete history has also been coded. Type y: before a command to have the auto-complete work (or just to force it into YubNub mode).

Version 0.17 has been released which fixes some minor URL resolution bugs.

Tags:

The Importance of XML Well-formedness

2006-04-18T03:50:00.000-05:00

XHTML validity is a buzzword around the Internet, but many people generally agree that it is not all that important. It has its advantages, but it is not the end of the world if you can't quite get it. XML well-formedness, however, is very important. Why? Because it makes server-side hackery much easier. That may not be the only reason, but it is an important one. Some people have mastered the art of screen-scraping with RegExps, but I and others like me have never quite mastered that often-complicated technique. Instead, it is much easier to parse the webpage as XML and pull out the data that way. This works especially well when the page is known to conform to some standard (as in the code addition for Blogger Recent Comments).

While some leniancy can be built in, here are some basic guidelines for keeping your pages well-formed and making our job that much easier:

XHTML empty tags -- some tags, such as <br>, <link ...>, and others used to be written in HTML as you see them there. This breaks XML well-formedness. Instead, one should use <br />, <link ... /> and the like. (note to advanced users, this can be partially overcome using a RegExp line similar to $XMLdata = preg_replace('/<(img|meta|link|hr|br)([^<>]*?)([\/]?)>/i','<$1$2 />', $XMLdata); )
Escaping out Ampersands -- Many URLs contain the '&' character, and sometimes this character is used in content as well. If this character is left unescaped it breaks XML well-formedness. Use '&' instead. (note to advanced users, this can be mostly overcome use a RegExp line similar to $XMLdata = preg_replace('/&([^;]{10})/i','&$1', $XMLdata); )
Escaping Scripts -- JavaScript code will often contain characters that must be escaped out in XML, but which cannot be escaped out if the script is to work. To overcome this you add '//<![CDATA[' after every <script> tag and '//]]>' before every </script> tag.
Closing tags -- Some tags, such as <p> are often inserted by web designers without a closing tag. instead of '<p>text<p>more text' use '<p>text</p><p>more text</p>'. Note that XML is case-sensetive, so if you open a section, say, with <head> you must end it with </head> not </HEAD>
Quoting Attributes -- <p class="1"> not <p class=1>, etc. Quotation marks always go around attributes, no matter what.
Non-tag < > -- If you reference a Blogger template tag (such as <$BlogID$>) or for some other reason need to include a < or > character in content, you must escape it out with < or >, respecively.

A note about content : Blogger's post form and comment form is not very good at checking XML well-formedness. Thus if you want to maintain a (at least mostly) well-formed page you must follow these rules in any code entered in these forms. For example, if you enter a < character in the blogger post form, it does not escape it out for you, you must actually enter <, and the same goes for the comment form. This is sometimes annoying if you are trying to maintain full XML well-formedness because a well-meaning commentor can sometimes mess up your well-formedness and you must go and edit their comment. This is not usually the biggest problem, however, since it is usually one of the first two problems which can be overcome as noted. You can check for XML-formedness without validating XHTML using this tool.

Tags:

xml
design

coComment JSONP Native

2006-04-05T06:19:00.000-05:00

coComment has added native JSONP support. They seem to have worked out the bugs from their first implementation and I have reworked the code for my sidebar to use their system. Out of this has come two generic coCo JSON functions. One, coco_flat, takes their nested group-comments-by-article format and flattens it to one-element-per-comment with all the article and comment attributes intact:

function coco_flat(coco) {
   var comments = [];
   for(var i=0; i<coco.length; i++) {
      for(var i2=0; i2<coco[i].comments.length; i2++) {
         comments.push({
                         "blogID":coco[i].blogID,
                         "blogTitle":coco[i].blogTitle,
                         "blogURL":coco[i].blogURL,
                         "blogURLCoco":coco[i].blogURLCoco,
                         "articleID":coco[i].articleID,
                         "articleTitle":coco[i].articleTitle,
                         "articleURL":coco[i].articleURL,
                         "articleURLCoco":coco[i].articleURLCoco,
                         "id":coco[i].comments[i2].id,
                         "author":coco[i].comments[i2].author,
                         "authorURL":coco[i].comments[i2].authorURL,
                         "authorAlias":coco[i].comments[i2].authorAlias,
                         "comment":coco[i].comments[i2].comment,
                         "commentURLCoco":coco[i].comments[i2].commentURLCoco,
                         "dateISO":coco[i].comments[i2].dateISO,
                         "date":coco[i].comments[i2].date
                         });
      }//end for cocommentResultSet[i].comments
   }//end for cocommentResultSet
   return comments;
}//end function coco_flat

The other, coco_compare, is for use in sorting so flattened results by date:

function coco_compare(a,b) {
   if(a.date<b.date) return -1;
   if(a.date>b.date) return 1;
   return 0;
}//end function coco_compare

To use this function to sort a flattened array of coComment data oldest to newest call array.sort(coco_compare), and to sort by newest to oldest also call array.reverse() as well.

Here is an example piece of code putting together all that is above, an incidentally what I am using in my sidebar:

function list_cocomment(blockid,username,charlimit,itemlimit,boxid) {
   if(!charlimit) limit = 25;
   if(!itemlimit) limit = 10;
   if(!boxid) boxid = 0;
   coco_callback = function(data) {
      var block = document.getElementById(blockid);
      var txt = '<ul class="cocomment">';
      comments = coco_flat(data);
      comments.sort(coco_compare);
      comments.reverse();
      var elipsis = '';
      for(var i=0; i<comments.length && i<itemlimit; i++) {
         elipsis = '';
         if(comments[i].comment.length > charlimit)
            elipsis = '...';
         txt += '<li><a href="'+comments[i].articleURL+'" title="Coment on '+comments[i].articleTitle+' by '+comments[i].author+'">'+striphtml(comments[i].comment).substr(0,charlimit)+elipsis+'</a> <a href="'+comments[i].articleURLCoco+'"><img src="http://www.cocomment.com/images/logo-16x11.gif" alt="[co]" /></a></li>';
      }//end for comments
      txt += '</ul>';
      txt += '<a href="http://www.cocomment.com/comments/'+username+'"><img src="http://www.cocomment.com/dyn/images/buttons/'+username.toUpperCase()+'.0.png" alt="More &raquo;" /></a> ';
      txt += '<a href="http://www.cocomment.com/mybox-rss2/'+username+'/'+boxid+'"><img src="http://wrinks.ning.com/feedicon12x12.png" alt="[feed]" /></a><br />';
      block.innerHTML = txt;
   }//end function-var coco_callback
   writeScript('http://www.cocomment.com/mybox-json?nick=singpolyma&box=1&callback=coco_callback');
}//end function list_cocomment

Tags:

YubNub Toolbar

2006-04-04T08:37:00.000-05:00

If you hadn't heard of YubNub before, now you have. The basic concept is easy to grasp -- typing "g test" takes you to a goole search for 'test' and "wink test" takes you to a wink search for test, etc. Although much more powerful than search engines, that's a good place to start.

If you send YubNub a raw URL it will take you there without processing. This enables one to use YubNub as your location bar directly. Problems with this approach have been that the search box in firefox (where YubNub has traditionally resided for FF users) is very small and does not update on page load.

Solution? Write a new FireFox extension to replace the location bar with YubNub. Done. This is my first ever FireFox extension, so it may be a bit quirky. I'd appreciate feedback and bug reports, but cannot guarentee I can do anything about it, since my XUL etc knowledge is very limited at this point.

I have released version 0.11. Install or reinstall using instructions below, uninstall previous version first if updating. New features for this version include: integration with browser history, display of favicons, display of feed icon/security icon where applicable, alt+k selects textbox, icon on Go button same as standard Go button.

Steps to install plugin:

Download the XPI file
Open your Firefox 'Extensions' window and drag the XPI file on it
Restart Firefox

Tags:

Include Feeds / Reading Lists in Your Sidebar

2006-04-03T06:26:00.000-05:00

Including headlines in your sidebar is an old concept, one that can be very useful to both you and your readers. This post will by no means be a comprehensive list of methods, but I will outline what I feel are the 'top 4' ways to do this.

Peek-a-boo Headlines
Peek-a-boo headlines are a part of my version of FreshTags and may be coming to primary FreshTags eventually as well. I may soon be releasing a version of the hack that works well without a FreshTags installation. I really like this method because my blogroll still sends out link-love and for FreshTags users you get context-sensitive headlines.

FeedDigest
FeedDigest is an old friend of mine. The first-ever feed-to-script service I used was RSSDigest, the forerunner to FeedDigest. The service provides excellent features, including the ability to mix feeds together into a single digest, include scripts for JavaScript or PHP, and an RSS mashup feed of your digest. You get 100% code control over the output as well as the many prefab templates for newbies. The only problem here is that you can only run 5 digests -- any more and you pay.

Feed-o-Style
Feed-o-Style is a newer cometitor to FeedDigest. You don't get nearly the code control and there are no feed-mixing options, but their prefab templates are nice and customisable for most purposes. The only include option is JavaScript. There is also an 'API' by which you can generate feed-o-styles from a script.

Grazr
Grazr is a different sort of service. Their code is barely customisable and again the only include option is JavaScript, but that's because the whole system runs using AJAX-style operation. Headlines from a feed can be included in your sidebar, or an entire OPML reading list can be rendered (XOXO not yet supported, see my sidebar for an example). ATOM feed support seems to be missing as of yet, and there are some other issues (mostly caused by the unreliability of implementations of the OPML 'spec') but overall it is a very interesting start.

Tags:

PsycHo - WYSIWYG Templates

2006-03-27T06:07:00.000-05:00

PsycHo is a WYSIWYG template generator for blogs that supports Blogger. While some of the functionality is annoying to a hand-coder such as myself, this is definately a big step in the right direction for pushing Blogger to non-techies. One of the things that I find odd about it is that by default you must enter your blog title/description manually, instead of using the ones from your Blogger settings. While this can be overcome, the average user won't necessarily see that.

I would like some more code-structure customisability options for hackers (especially hackers looking to help their non-techy friends). For example, one could not implement hAtom in a PhycHo template if he wanted to (at least so far as I can tell). Other than that (a rather minor point to users anyway) the service seems to provide all the features a normal user would expect, including sidebar(s) cutomisation and linkroll(s) editing. Just one more push to get people away from inferior blogging services like Xanga.

Tags:

Profile Photos With Comments

2006-03-25T10:09:00.000-05:00

Blogger does not provide a template tag for displaying the profile pictures of commentors in your blog template. Johan Sundström had created a way around this using an IFrame, but I found that solution to be somewhat buggy, even on his own blog. I have modified some of his code and added some of my own to create what I feel is a cleaner hack. I have bundled the majority of the JavaScript into a JScripts entry and it also uses a script I wrote to scrape Blogger profiles to JSON(P) [example]. The code to include the hack into your template is surprisingly simple:

<script type="text/javascript" src="http://jscripts.ning.com/get.php?xn_auth=no&amp;id=830605"> </script>
<script type="text/javascript">
//<![CDATA[
addLoadEvent(function(){showCommentPhotos('class of elements to put photos in','class of elements where links to authors can be found',number of <a> tags before the link to the author (0 if none));});
//]]>
</script>

You will need to add a <div> or other tag (with the class you pass in first) to the comment section, and style it so that the images show up the way you want. The second class you pass is the element containing the link to the comment author, you must add a class to this element if one does not exist. The third parameter is the number of <a> elements in this element before the link to the author. The script runs after page load and should thus have no adverse affects on initial load times.

Tags:

Ning - the now

2006-03-22T04:22:00.000-05:00

Back when I started using Ning to create Commentosphere I wrote a review of the service. I have since had much more experience in working with the tools provided by Ning and there have been some improvements and so this is an update on my previous review.

Language Support
To the best of my knowledge Ning still only supports PHP and XNHTML. While they expect to support more languages, for now if you don't like PHP you won't like development on Ning. Their PHP support, however, is top-notch. Full PHP5 support with numerous extensions installed and many Ning-specific components that just make coding easier (automated comment system, Gmail support, etc). Having previously only worked with servers supporting PHP4, just the PHP5 support seems like a miracle: code is cleaner and I can use some of those nice OOP features I've been reading about for ages.

The Content Store
The content store may still be hard to get into for a coder used to SQL, but once you get your head around it, it can be easier to use in some ways. For example, there are some default fields (title, description, contributorName, createdDate, updatedDate) which, if used correctly, can make transferring code between apps easier. Built-in support for tagging objects means you no longer have to have your code manage (sometimes complicated) many-to-many tables for the relationships between tags and content.

All query filters still behave like an AND operation, but this limitation can often be overcome through code design. While the lack of a union (OR) operation can be painful to get around and would be very welcome, it is not a crucial thing in many apps.
There is still no proper pattern matching, but this too can be partially overcome by storing dummy fields that have appropriate characters (especially non-alphanumerics) replaced by spaces and using their full-text 'like' operator. Not the ideal solution, but workable.
There is still no way to change the owner of an object, but this is not the biggest problem and it seems Ning is moving towards providing API-style access themselves.
The OOP-style of returns still inhibits sorting to some extent, but not nearly as much as I originally feared. SQL-returned arrays are often difficult to merge and sort themselves, and XN_Content objects on Ning are not unsortable, they just require self-written sorting functions. Merging query results is not a common operation anyway.
The Content Store has been significantly speeded up. While mass operations begin to bog, or even freeze, when you deal with volumes approaching 100 objects, at least it is fast enough for some mass-updating operations.

Other Considerations and Conclusions
Multi-user development is still basically impossible on Ning. This is probably the feature #1 on my list of things I wish they'd add. The License problems are annoying (there's a lot of good GPL code out there I'd like to use) but not fatal.

While Ning has not yet fully rectified my main initial points (speed content store to enable large scale importers, group development, pattern matching, better documentation) I have found that some of these points are mitigated as you get used to the service. While the speed limitation on the content store are annoying, they can be got around if you take data in smaller chunks. The documentation is not the greatest, but it is getting better, especially with the advent of the Ning Tech Blog. Group development is definitely my #1 request at this point.

Tags:

JScripts

2006-03-21T08:07:00.000-05:00

JScripts is a new Ning app of mine for hosting JavaScript includes. The benefits of a semi-centralised location for hosting JavaScript APIs/hacks (from the FreshTags system to the prototype framework) are many, but the greatest ones are (1) it makes it easier for us to find ones others have written (2) browsers can then cache the same JavaScript for use across sites. I have put my FreshTags system on the app, but will also keep it hosted in the other location for now. This blog now includes the file hosted on JScripts, however.

JScripts (and its parent app, FileSS, which I also wrote) has a coComment-integrated comment system and also integrates features from Sweeties. There are RSS feeds for new scripts (which can be filtered by tag, user, and search query) and for comments on each script.

Tags:

feed2json

2006-03-17T01:53:00.000-05:00

I have been doing some work recently with the Outline Converter, upgrading its code and adding more input and output formats. One of the benefits of this is that it can now act as a feed2json converter. Since it is hosted on Ning it doesn't suffer from the bandwidth restrictions so many other feed2json scripts do. To use it as a feed2json use the following URL format:

http://xoxotools.ning.com/outlineconvert.php?output=json&classes=items&url=FEED URL&callback=CALLBACK

I have already upgraded my version of FreshTags to use this instead of the other feed2json script so that I no longer have to worry about the bandwidth restrictions. Here is the code for the function I am using to convert the JSON data to the Delicious.posts format:

function feedjson2deljson(json_data) {
   var rtrn = [];
   for(var i=0; i<json_data.items.length; i++) {
      obj = {};
      obj.d = json_data.items[i].title;
      obj.u = json_data.items[i].link;
      obj.n = '';
      if(json_data.items[i].description)
         obj.n = json_data.items[i].description;
      if(json_data.items[i].content)
         obj.n = json_data.items[i].content;
      rtrn.push(obj);
   }//end for
   return rtrn;
}//end feedjson2deljson

Tags:

Beef up Blogger

2006-03-14T05:32:00.000-05:00

Googlist has published a list of "18 Ways for Blogger to Beef up". I strongly support most of the point there given, and have some comments and some points of my own.

1 and 2 - Category support
While the greasemonkey script and FreshTags method works fine, I must admit this would still be a welcome feature. One thing that concerns me, though, is that it will be poorly done and force those of us who want the features to contine using a hack on a system that supports it natively... I'm not going to want to lose the FreshTags functionality now that I've got it, and while FreshTags is not bound to del.icio.us, it is bound to having a decent way to extract post by tag programatically.

5 - Plugin support
If they enable this with any sort of usefulness it will eliminate their need to do some of the other stuff -- we'll do it for them!

7 - Static pages
This would be an incredibly useful feature, but one addition could make all of Blogger that much more useful -- WYSIWYG. I happen to dislike WYSIWYG, but there are a lot of non-coders out there who don't agree with me and resent the fact that they are bound to the boring blogger templates for their Look and Feel. If Blogger created some simple way to edit template basics without coding for those people they could much better appeal to 'the masses'.

12 - Non-image File upload
Please, Blogger? Hosting images here is lovely, but what about my JavaScript includes? Or external pieces of CSS?

14 - Trackbacks
Backlinks are swell, but incomplete. I want to be able to send and recieve proper trackbacks too -- and haloscan, while it works, is just so ugly.

17 - SPAM
I, for one, would like to see some conditional moderation, as seen on WordPress. I don't want to have to approve every single comment, but I'd rather have outright SPAM quarantined. And what about the ability to block certain users from commenting? A lot of the comment SPAM I get here is tied to a Blogger account and could be easily blocked if they'd just let us.

Other
Another interesting thing, that I've been waiting for for a long time, is the integration of Blogger with the Google Accounts system. A page for the login is already active, but not functional as of yet. Looks promising.

Comment feeds anyone? Blogger Recent Comments works, but nothing beats native support, especially if they start offering RSS 2.0 feeds with wfw:commentFeed support natively on top of that.

Tags:

FreshTags for WordPress

2006-03-10T03:11:00.000-05:00

The FreshTags system is more than just categories for Blogger. With the tag-passing features it adds a social aspect to blog browsing. Not everyone runs on Blogger, and some of us are lucky enough to run on blogging systems that support categories natively. The other FreshTags features would be and can be immensely useful to these people as well. So, in a move to push FreshTags beyond Blogger and beyond del.icio.us I have created a FreshTags plugin for WordPress.

Update: Version 0.11 has been released. Some minor bugs have been fixed and loading captured tags into the search box is now optional. To load the searchbox you must add this code to your template: <?php freshtags_load_searchbox(); ?>

Features

Detects tags passed directly via ?tags, ?tag, or ?cat
Detects tags from the referer URL, all the same formats as the original FreshTags are supported
Detects the tag of the current category page or the first tag on the current post, if applicable
Supports tag intersections
Displays n matching posts from detected tag(s) in the sidebar
Supports either list or drop form of tags in the sidebar, highlighting selected tag(s)
Rewrites post links when tags are selected to enable tag-passing from the blog
Generates JSON(P) feeds for use in peek-a-boo sidebar headlines by other blogs

Implementing
To implement this plugin on your WordPress blog:

Download the plugin
Unpack the file and upload 'freshtags.php' to your /wp-content/plugins/ directory on your blog
Go to your WordPress dashboard and the plugins screen to activate the plugin
Edit your template and replace the code that outputs the category list in your sidebar with:
```
<?php echo freshtags_taglist();
       echo freshtags_postlist(); ?>
```
To customise the display you can pass 'drop' to freshtags_taglist to get a drop-down list of tags. You can pass two parameters to freshtags_postlist, the first is the maximum number of posts to display (default: 10), the second is a string to output as a header for the list of matching posts (replacing %tags% with the detected tags, default none).

Other
I have updated my version of FreshTags to support getting peek-a-boo titles from blogs using this WordPress plugin. Just call load_otherblog_titles('wordpress','blog url','','feed url (optional)','id of element to put results in'); after the normal FreshTags data has loaded.

Tags:

Inline Comments Form Updated

2006-03-08T06:43:00.000-05:00

I have updated my inline comments form hack to be compatible with coComment. Note that if you have the comments forms visible on your main and archive pages like I do there will still be a problem there, but on item pages the values will be filled it and the coComment detector automatically invoked.

Tags:

shortText.com

2006-03-06T05:28:00.000-05:00

shortText.com is a site with an interesting purpose -- to post any text. Plain text only (which is nice for posting code) this site seems free and unlimited. Just enter your text in the box and click the button. A (rather random) URL is generated as a permalink to your content (example) and then you can send that URL to anyone. For those of use who run blog(s) this isn't all that useful -- after all, most content we want to post should make sense on one of our blogs, but it could be very useful to people who just want a one-time (or a few-time) publishing of something quickly and don't want to bother with an account registration process.

Tags:

Wrinks

2006-03-06T04:50:00.000-05:00

Yes, I know, another post on a Ning app of mine. Wrinks is an app for the creation/management of webrings, blogrings, linkrolls, and blogrolls. Ring/roll creators have full power over what sites are members of their wrink and wrinks can be embedded in web pages using either JavaScript or PHP (depending on your hosting situation) as either webrings or blogrolls. The service aims at being a sort of 'social blogrolling' system. The first person to add a site to the system has control over that site's metadata (title, description, feedurl, etc.).

Traffic data is stored for each Wrink and wrinks can be browsed by tag, sorted by traffic number. These lists of wrinks can be syndicated via either RSS 2.0 or JSON(P). Each wrink can also be retreived via JSON(P) for custom inclusion in webpages.

Wrink rolls can also be filtered by tag. Each site on a roll has tags, and if &tag= is passed to the wrink, only sites matching that tag (or tag intersection) are returned. This opens the way for the possibility of filtering blogrolls by tag.

Tags:

Google Related Pages

2006-03-02T08:24:00.000-05:00

No, it's not a new service provided by Google -- it's a Ning app built on the Google Search API. The functionality is simple. You feed Google Related Pages a URL, and it gives you back a list of related webpages. The data is collected using Google's 'related:' operator. I have found in tests that it gets pretty good results when used on popular pages, but not as well when used on less popular ones.

So what is the point? Why use this instead of just doing a 'related:' search on Google? Isn't this just a nicer interface to something we could already do? Not quite. You see the app also generates RSS 2.0 and JSON(P) feeds of the results. Ultimately that is the point. Results can be integrated into pages, such as blog sidebars, or watched in feedreaders. Because the data is all in the Ning app, other formats will be easy enough to add if people want them.

Tags:

FreshTags-Singpolyma

2006-02-28T06:46:00.000-05:00

This post has been 'deprecated'. Please see FreshTags-Singpolyma 2

I have for some time had my own version of the FreshTags system. In the past, all upgrades to this version have been seamless to the user, but this time the changes were too radical to allow that to work. I have rewritten the entire hack based off of the FreshTags v0.5 code. The major changes from FreshTags 0.5 are:

Hidden post page is used for displaying tags, instead of reloading the current page and displaying in the sidebar (the primary purpose of the original modifications)
Completely asynchronous data load -- FreshTags no longer loads before the page content, but rather loads afterwards, resulting in a faster page load time
If no tag is selected one can be automatically pulled from relTag data on the page
Full support for peek-a-boo headlines in blogrolls

Please Note : If you are upgrading from my previous hack, you will need to remove all of its code from your template before upgrading. You will also have to edit the Tags post.

Basic Installation Instructions

Create a new post on the blog you would like to implement this hack on with the title 'Tags' and click the 'Edit Html' tab for the post body, pasting the exact code '<div id="freshtags_postpage"><i>Loading...</i></div>' into the post body. Turn comments off for the post and set the post date to January 1, 2000. The time doesn't matter. Post this post. (If you are upgrading from the previous version, just edit the post to contain the new code.)
Edit the template for your blog and insert this code into the <head> section:

<script type="text/javascript">
//<![CDATA[
var del_user = "delicious username";
var anchor = "anchor tag";
var defs = "";
var maxposts = 10;
var freshtags_tags_id = "freshtags_tags";
var freshtags_posts_id = "freshtags_posts";
var freshtags_postpage_id = "freshtags_postpage";
//]]>
</script>
<script type="text/javascript" src="http://jscripts.ning.com/get.php?xn_auth=no&id=818185"></script>
Where 'delicious username' is the del.icio.us username you store your blog data in and 'anchor tag' is the anchor tag you use (if you use one). If you don't use an anchor tag, just replace the words 'anchor tag' with nothing.
Insert this code where you would like the tags drop-down to go:

<div id="freshtags_tags"><i>Loading...</i></div>
<div id="freshtags_posts"></div>
Save your template and republish your blog

Customisation Options

no_autocapture -- setting this variable to true will keep the script from attempting to grab relTag data from the page. For example, to keep a Blogger blog using this script from grabbing relTag data when on the main page use <MainPage><script type="text/javascript">var no_autocapture = true;</script></MainPage>
defs -- setting this variable sets what tag(s) will be selected be default if the user has not selected any. This will do nothing if no_autocapture is not set to true unless the autocapture failes.
maxposts -- the maximum number of posts to display in the sidebar
freshtags_tags_id -- the ID of the block to put the tags dropdown in
freshtags_posts_id -- the ID of the block to put the posts list
freshtags_postpage_id -- the ID of the block in the Tags post
freshtags_tag_format -- the format for the tags list (default is 'drop-add'). For example, to use asynchronous post loading add this code to your template: <script type="text/javascript">var freshtags_tag_format = "drop-add-async";</script>

Peek-A-Boo Blogroll Headlines
To add peek-a-boo headlines to your blogrolls follow the following steps:

Add this code to the <head> section of your blog to facilitate the actual show/hide:

<script type="text/javascript">
//<![CDATA[
function toggleitem(postid,linkid,newtxt,displaytype) {
if(!displaytype) {displaytype = 'block';}
var whichpost = document.getElementById(postid);
if (whichpost.style.display != "none") {
whichpost.style.display = "none";
} else {
whichpost.style.display = displaytype;
}
if(linkid) {
var lnk = document.getElementById(linkid);
lnk.href = "javascript:toggleitem('"+postid+"','"+linkid+"','"+lnk.innerHTML+"');";
lnk.innerHTML = newtxt;
}
}
//]]>
</script>
Add this code just after the blogroll link you want to add peek-a-boo headlines for (it's invisible defaultly, just the container for the headlines) '<div id="blognameheadlines" style="display:none;"><i>Loading...</i></div>'
If this blog stores post data in del.icio.us (they don't have to use FreshTags necessarily) add this code just before the blogroll link (it's the +/- link for showing/hiding the headlines):

<a id="blognamelink" href="javascript:toggleitem('blognameheadlines','blognamelink','-'); load_otherblog_titles('del.icio.us','other blog's del.icio.us account username','other blog's anchor tag (if they use one)','URL to other blog's feed (optional)','blognameheadlines');">+</a>

Otherwise add this code to use just their feed:

<a id="blognamelink" href="javascript:toggleitem('blognameheadlines','blognamelink','-'); load_otherblog_titles('feed','','','URL to other blog's feed','blognameheadlines');">+</a>

Tags:

coComment JSONP

2006-02-24T05:41:00.000-05:00

coComment is a new service like Commentosphere that helps you tracks your comments/conversations across the web. If you haven't heard of coComment yet check out Johan's article at Ecmanaut.

One of the features missing from coComment has been JSON(P) feeds of data. They have a 'blog box' JavaScript include, but it is limitedly customisable. So, frustrated with the way it did work, but still wanting to display my coComment data in my sidebar like I have been doing with Commentosphere, I created a hack that generates JSONP feeds for coComment.

Using the script is simple. You pass the URL to the JavaScript for a customised blog box on coComment to the script, along with optionally the name of a callback function (using '&callback'). You can tack on '&raw' to make it output raw JSON data. If no callback is specified and you do not specify raw data it will check to see if you have a coComment.callbacks objects with a comments function and call that. The URL is:
http://comment.ning.com/cocomment/json.php?url=URLtoBLOGBOX

If you want a sidebar element, or just some example JavaScript code to work with, here is what I use. Put this in your <head> section:

   <script type="text/javascript">
   //<![CDATA[
      var list_cocomment_limit = NUMBER OF CHARACTERS;
      var list_cocomment_id = "cocomment";
      var list_cocomment_url = "URL TO BLOG BOX";
      function list_cocomment_callback() {
         val = '';
         val += '<ul class="cocomment">';
         for(var i=0; i<coComment.comments.length; i++) {
            val += '   <li><a href="'+coComment.comments[i].articlelink+'">'+coComment.comments[i].body.substr(0,list_cocomment_limit)+'...</a></li>';
         }//end for
         val += '</ul>';
         val += '<a href="'+coComment.url+'">More</a> on <a href="http://www.cocomment.com/">coComment</a>';
         item = document.getElementById(list_cocomment_id);
         item.innerHTML = val;
      }//end function list_cocomment_callback
      coComment = {};
      coComment.callbacks = {};
      coComment.callbacks.comments = list_cocomment_callback;
      function list_cocomment() {
         coComment = {};
         coComment.callbacks = {};
         coComment.callbacks.comments = list_cocomment_callback;
         var thescript = document.createElement("script");
         thescript.type = "text/javascript";
         thescript.src = 'http://comment.ning.com/cocomment/json.php?url='+encodeURIComponent(list_cocomment_url);
         document.body.appendChild(thescript);
      }//end function list_cocomment
      function addLoadEvent(func) {
         var oldonload = window.onload;
         if (typeof window.onload != 'function') {
            window.onload = func;
         } else {
            window.onload = function() {
               oldonload();
               func();
            }
         }//end if
     }//end function addLoadEvent
     addLoadEvent(list_cocomment);
   //]]>
   </script>

And in your sidebar put '<div id="cocomment"><i>Loading...</i></div>'.

Tags: