Kaboom!

After a brief conversation with a colleague I decided to write a little bookmarklet that you can use to make your days just a bit more fun.

Everyone knows that when Batman hits someone there’s a big Kaboom! or Kapow!

If you drag this Kaboom! link to your bookmarks toolbar and press it on any page you will be able to Batman punch things at the click of a button.

A man being punched by Batman

Batman punching some poor guy.

The bookmarklet is a little bit of Javascript that generates a random selection of stars using the canvas tag introduced in HTML5. That means it might not work on rubbish old browsers, but should work just fine if you’re living in the second decade of the 21st century.

Gmail strips HTML emails

At work we have a section where people can set up emails that go out to their own customers (we have a reseller scheme). There are placeholders like [NAME] and [BASKET] that the customers can put in their email templates which we then replace with the actual information when we send the emails out.

Recently I’ve been asked to add some IDs and classes to the HTML elements we generate for the placeholders so that the whole section can be styled by our resellers.

I quickly added a bunch of classes and then began testing with a <style> tag in in my email. I spent quite a while wondering why it wasn’t working correctly before the DOM Inspector showed me that Google strips the IDs of elements. I then went on to read that they also remove all <style> content. You also can’t use a <link> tag to include a stylesheet (which is a good thing).

The only way to style email for Gmail is apparently to use the style attribute for each element. This is fine if you are fully writing the emails yourself, but our resellers never even see the actual tags, they just put in a placeholder. That leaves them no way of adding a style attribute to a section, which means we can’t let our resellers fully style their emails. Ridiculous.

Thanks Google.

Twofifty Facebook app

I recently went to update my progress on IMDb’s top 250 films on the handy Facebook app by Tim Broddin only to find that it redirects to a domain that no longer seems to be working. I suspect this app has run its course now. How very annoying. The reason I’m most annoyed is that I used to be a member of twofifty.org a few years back. This site was also created by Tim Broddin, and it was also allowed to expire, so I lost track of my progress.

I wrote my own version to use for a while, but then this Facebook app turned up and I figured that was going to be a good replacement. How wrong I was.

I’m considering writing my own, again, and I will keep it running because I want to use it.

Old web techniques

I often go around looking at the source for the websites I frequent. It’s not very interesting to most people, but I am not most people.

Something I’ve noticed a few times in the last couple of weeks is that sites are suddenly using an evolved form of a script I was very familiar with many years ago:

if(top.location != self) {
  top.location.replace(document.location.href);
}

That’s how it appears on Last.fm. Essentially the script checks to see if the page is contained within another page, and then takes the user to the page by itself if it is. This gets rid of page headings you sometimes see from sites like Digg and Facebook when you follow a link from there.

The script used to be used to make your own site break out of frames put there by sites like Geocities (R.I.P.) before domains and hosting were quite so affordable. Obviously now there are basically no sites on the Internet that use frames in the traditional sense (that’s a good thing), but the modern equivalent (iframes) are pretty much all over the place. They tend to be used for displaying external content rather than the layout of internal content, but the idea is mostly the same: multiple documents on one page.

I just find it somewhat interesting that “web 2.0” seems to be encountering the exact same things I really hated about web 1.0 all those years ago.

Facebook share button shows no count

Share

I was working on adding a Facebook Share button to blog posts at work and I couldn't seem to get it to display the speech bubble with the number of shares without clicking on the icon.

I did a whole bunch of searching and it turned out that it was caused by some Javascript from Facebook that only displays the count if it's more than 3. I don't really like the inconsistency of that, so I looked for a way to get it displayed even if it's zero. A guy named Patrick Kelly suggests getting your own local copy of the Facebook Javascript (FB.Share) and modifying the displayBox() function call so it shows any number. This is fine for now in that it will work, but as Patrick points out on his blog, it will potentially break if Facebook update their API, or make other changes to the underlying code.

I decided to pick apart the code and come up with a solution that doesn't involve the same issues. The fix is fairly basic. You just need to include the share button in the same way as Facebook tells you, and then insert the following Javascript after that:

<script type="text/javascript">
var buttons = document.getElementsByName('fb_share');
var count = buttons.length;
for(var i = 0; i<count; i++) {
  var data = FB.Share.getUrl(buttons[i]);
  if(FB.Share.results[data]) {
    buttons[i].fb_count = FB.Share.results[data].total_count;
  }
  FB.Share.displayBox(buttons[i], 0);
}
</script>

Hopefully that's a bit tidier than copying and editing the FB.Share file. It also means that you'll benefit from a cached version of the code being presented to the user if they've been on any other site with that button. A fairly tiny benefit, but every little helps. 🙂

Patched Digg Digg WordPress plugin

I was adding a Digg button to the company blog using the Digg Digg plugin when I found an issue that meant that the post ID was lost by the time it reached Digg’s description page.

It seemed that the plugin wasn’t escaping the = symbol in the URL which caused Digg to not understand the query. I added the following code to the construstURL function in dd.class.php file:

$url = str_replace('=', "%3D", $url);

Everything went through correctly, and so if you’re having a similar issue then you might want to check that you’re properly escaping the URL you’re passing to Digg, especially if it has parameters.

Patched Simple Facebook Like for WordPress

I am adding a Facebook Like button to the blog posts at work and so I looked for a WordPress plugin. The highest rated one I found is called Simple Facebook Like by a guy named Huseyin Berberoglu.

I had a bit of a problem getting the button to go where I wanted because the iframe that gets added to the page doesn’t have an ID or a class for me to address it by. I modified the source to stick in a class quickly and easily and dropped a comment on the guy’s blog to see if he would add it as an option for the plugin so future versions wouldn’t overwrite my change, and then I decided that I would just do it myself.

So I created a patch that can be applied to version 1.0.1 to let you specify a class for the iframe so you can use CSS to move it around more easily.

WordPress upgrades can be easy

I manage a couple of WordPress installations here and there. I obviously do everything on this blog, but on the other one I only really handle upgrades and changes to the underlying code. The style is done by a proper designer, and then entries are written by proper marketing people.

Before I had anything to do with the other blog the styles and modifications were simply placed into the existing default theme. This meant that every time there was a WordPress upgrade the changes got overwritten and the blog lost all branding. This meant that updates weren’t being applied quickly, which is a security problem.

When I took over the maintenance the first thing I did was to create a theme for the various CSS changes. The second thing I did was learn how to write a WordPress plugin to turn our code modifications into widgets. It may sound a bit complicated, but it’s not actually that hard if you know even the most basic PHP. The theme itself is just a zip file containing a few fairly standard PHP files and a stylesheet. The plugin is just a simple PHP file that (in this case) spits out some random sections of markup that we want, in the form of a widget that can be managed through WordPress itself.

Now when it comes to making an upgrade I have a test installation that I keep up-to-date with the current one (plugins, posts, comments, etc.) and I test it on there first. Today I upgraded the blog from the last 2.9 version to WordPress 3.0.1 and encountered absolutely no problems whatsoever. That’s how it should be! 🙂

Cash Gordon sucks

Just been looking at the Cash Gordon website and decided it’s not very good. Thought I’d share that with you all. 🙂

More info
I just thought I’d take a second to explain this post… The Conservative Party put up a website that I’m not going to bother linking to that had a Twitter stream of all posts with a certain hashtag. They had no filtering of content, and no sanitising either. All HTML and Javascript got rendered directly on their page.

Cue carnage. People posted massive pictures, huge text, and a few people (myself included) posted Javascript redicrects to various other sites around the Internet.

The site appears to be down now. Whether that’s on purpose by the sysadmin team in the data centre, or because of a DDoS I don’t know. I guess it won’t be coming back up in its original form though. 🙂

Google Analytics data:
Cash Gordon Google Analytics data

It was fun while it lasted.