Archive of "Hack"

Archive for the "Hack" Category

rel=prev/next for WordPress

Posted on

Christopher Vollick pointed out to me yesterday that my site was not supporting rel=next and rel=prev. For those who don’t know, these rel attributes have been with HTML since HTML3, and they allow you to easily use a bookmarklet or extension or whatever you want to go to the next/previous page in a set of pages (like blogs archives). This is a really great thing, and I was a bit suprised WordPress doesn’t support it by default.

This can partly be implemented with a plugin, but unfortunately to fully implement it I needed to create a 3 line patch to core. I have uploaded the tiny plugin and the patch to a gist so you can download them and install/apply to get these great features on your site!

Sharing Links / Rich Messaging

Posted on

There a fair amount of buzz around messaging sysems, be it microblogging or direct messages.  There is also discussion about broadcast social media (share this with all your friends!).  One use case keeps cropping up for me: sharing content with individuals or ad hoc groups.  I will focus here on sharing links, but much of this applies to any media richer than one raw text blob.

If I want to keep a URL for later – I use bookmarks.  This was de facto for a long time.  Then, one day, someone decided it might be cool if not only they could read that page later, but everyone else could too!  Thus, the birth of social bookmarking.  Today, if I want to share a link with all my contacts I simply bookmark it on my Ma.gnolia, and if they care, they’ll see it.

Then, groups.  If I want to share a URL about copyright issues with the Waterloo Students for the Information Commons, we have a Ma.gnolia group.  Interested parties subscribe, and the stream is also syndicated to the main page of our wiki for general interest.  (Aside: if a discussion with the group is to take place around a link posted there it sometimes happens on our mailing list… I’ve recently begun experimenting with Friendfeed rooms for this.  While commenting on FF in generally seems dumb, in this case many of the shared links have no comments themselves and the commentary would only be interesting to other group members anyway.)

One extension of groups really : ad-hoc groups.  I don’t want to create a new group somewhere and invite everyone who might be interested every time a topic comes up breifly.  It needs to be easy (like, one step, no more than three short fields) and not require people to sign up for anything to contribute/subscribe.  Then it can die out later naturally.  Stronger (more organized) than hashtags, but less formal and permanent than groups.  This is analogous to the cc-everyone chains that develop because people are too lazy to make a small, temporary mailing list.

Alright, now to the big one: point-to-point.  While 1:1 communication is usually not the answer (and this has partially sparked my ideas about ad-hoc groups) – sometimes you just read a page and go “so-and-so would be interested in this”.  This has, in the past, caused me to email URLs to people.  This feels like the wrong solution.  Even Twitter dm doesn’t seem quite suited to this.  First I will describe my ultimate UX, then I will describe what seems to exist today.

I want a button in Firefox (or whatever browser I end up using in the future – Firefox for now) that opens a dialog allowing me to simultaneously save the link into my bookmarks (on Ma.gnolia or wherever), share with an arbitrary number of groups, and with an arbitrary number of contacts.  You can take a peek at my mockup if you like.  This is very different from how, say, Ma.gnolia or Pownce does link sharing.  Note that all of these (my bookmarks, some groups, some contacts) should be optional – I may not want to use all of them each time.  When people send me links this way I want an RSS feed of the links.  If they get emailed to me it is not much better than the original solution.  If they are delivered into some “private message” box we have YAI, and that’s worse.

Tie in to DiSo: wouldn’t it be extra neat if I could type not just, say, Ma.gnolia or Pownce usernames, but could type URLs?  System asks their provider how they prefer to recieve links and then sends it that way.  I really don’t want to make people sign up for whatever service I happen to use.

So what can we use today?  Well, there are a few options.

  1. Emaling/dming/@heyyouing URLs can work – but it’s not ideal for one key reason: there is no simple way to get a “list of recent links”.  I don’t want to go through every recent email or tweet to find a URL.  Some people prefer this because it facilitates discussion around the link somewhat.
  2. Pownce.  Using, say,'%20+%20encodeURIComponent(window.location.href)%20%20+%20'&note_body='%20+%20encodeURIComponent(document.title)%20));">a bookmarklet, one can add links to Pownce and send them to contacts or even “sets” (not-quite-ad-hoc-groups).  The key issues here are that if I also want to bookmark the link (I usually do) I must do that separately with a separate form and bookmarklet.  I must also re-post to Pownce for each contact/set I want to send it to.  There is also the issue that people would have to sign up for yet another social media account in order for me to share links with them – Pownce doesn’t have OpenID support just now.
  3. for: tags.  This is not too bad of a solution if all your contacts are on… and if you use it yourself.  I really need to get that bridge project finished.
  4. Ma.gnolia groups.  This is a hack really, but it’s working for myself and a contact of mine.  We have set up Ma.gnolia groups whose sole purpose is for others to share links with us.  Anyone with an OpenID can just log in and start sharing links with us, which we then get from the groups’ RSS feed.  The problems here are: it’s a hack and sharing with more than one group at a time is still a pain.

Enough from me for now.  Think about it.

Content in Footer for Single-Author Blogger Blogs

Posted on

Awhile ago I received this message from an unidentified user:

Title: photo for authors
Can you use javascript to show an author’s photo in the footer of a post? I’ve looked everywhere and only find it in the old blogger Any help would be awesome!

While a script based on my new comment author photos could be built to inject the image for the post author (multi-author blogs), I thought it might first be useful to provide basic information about hard-coding this.

  1. Go to the Template tab on your blog’s dashboard
  2. Select Edit HTML
  3. Check the Expand Widget Templates box
  4. Find the code block starting with <div class='post-footer'> or after <data:post.body/>
  5. Insert the content you want there
  6. Save!

FreshTags’ Static Widgets

Posted on

This enhancement to FreshTags in response to Amit, who has been persistently requesting the feature in comments and a ticket. FreshTags now has the ability to generate widgets (from any source) which are locked on to a particular tag(s). For example:

<!-- FreshTags0.5-Singpolyma2 -->
<script type="text/javascript">
if(typeof(WidgetData) != 'object') WidgetData = {};
if(typeof(WidgetData['freshtags']) != 'object') WidgetData['freshtags'] = {};
WidgetData['freshtags']['freshtags_static'] = {
"username":" username",
"url":"blog url",
<script src="" type="text/javascript"></script>
<div id="freshtags_static"></div>
<a href="" title="Categories by FreshTags"><img alt="FreshTags" src=""/></a>
<!-- /FreshTags0.5-Singpolyma2 -->

The above code must (for new Blogger users) be inserted into a new HTML/JavaScript sidebar widget. Source (in red) must be either, blogger, or mediawiki (use blogger for labels on posts in the new Blogger). Defs (in red) should be a +-separated list of tags to load into the widget (or just one tag). Username (in blue) must be replaced with your username (if source is or the whole line must be removed. URL (in blue) must be replaced with the full URL to your Blogger blog (ie, if source is blogger or the whole line must be removed. Join_char (in blue) must be / if source is blogger and + otherwise.

The ID (in purple) is fine to leave if you are only going to insert this widget once. For the second, third, etc widgets you must change it to something like freshtags_static2. The higher reference (also in purple) to freshtags_static must also be changed. Second, third, etc widgets do not need the <script> tag that is in purple near the end.

If you have any questions, just ask!

New Comment Photo Hack (Blogger)

Posted on

By demand, I have added a maxheight option to this hack as well, it works the same way as maxwidth 🙂

Some people have really liked my comment photos and highlighting hack. Many have hated it. Especially since the move to the new Blogger, the hack is just unstable and difficult to implement or understand. Even my own implementation (before the move) was doing odd things.

So I decided that a complete rewrite was in order. The old scripts are still intact, but this new hack uses none of the old code. This hack does only comment author photos (highlighting is better handled other ways in the new Blogger).

This hack is 100% compatible with the newest version of my asynchronous peek-a-boo comments.

Without further ado, the instructions:

  1. Go to ‘Edit HTML’ under Template and check the ‘Expand Widget Templates’ box.
  2. Find the following code:

    <dl id='comments-block'>
    <b:loop values='data:post.comments' var='comment'>

    and insert the following code directly after it:

    <div style="clear:both">
    <dt style="float:left;margin-right:5px;clear:both;" expr:id='"commentphoto" +'></dt>
    <script type="text/javascript">if(typeof(commentPhotoIds) == 'undefined') var commentPhotoIds = []; commentPhotoIds.push({'id':'commentphoto< 'url':'<data:comment.authorUrl/>'});</script>
  3. If you go down a very small ways from where you were in the previous step you will see a </dl>. Directly before it insert the code: </div>
  4. Directly before the </body> code in your template add this code:

    <script type='text/javascript'>
    function commentPhotoDo() {
    var tag;
    for(var i in commentPhotoIds) {
    tag = document.createElement('script');
    tag.type = 'text/javascript';
    tag.src = ''+encodeURIComponent(commentPhotoIds[i].url)+'&id='+encodeURIComponent(commentPhotoIds[i].id)+'&defaultimage='+encodeURIComponent('');
    }//end for var i in commentPhotoIds
    }//end function commentPhotoDo
  5. Save your template

My fellow hackers will not like the way I did the second-to-last step. I should be using window.onload. I am not simply because in the tests I did on a certain much-hacked template, this worked and the other didn’t. I am not prepared to say why the other didn’t, only that it didn’t and that disturbed me. So for this hack I’m doing it like this. It works.

This hack causes direct hits to my hosting server every time a page loads. If your blog gets a significant amount of viewers (>300 subscribers or thereabouts) I would ask that you contact me before installing this hack so that we can work out whether it will be a bandwidth issue or not. Thank you for understanding.