Christian Heilmann

Posts Tagged ‘hack’

Show the world your Twitter type (using PHP and Google Charts)

Sunday, November 23rd, 2008

I just had a bit of fun with Twitter and the Google charts API. You can now add an image to your blog, web site or wherever and show a picture of what kind of a twitter user you are. All you need to do is embed an image and give it the right source:

For example my user name is codepo8, which would be:

And the resulting image is:

For John Hicks for example it is:

And the resulting image is:

How it is done and how to “change stuff”

You can download the source code and have a play with this (I hope this will not spike my traffic :) so it might go offline if that is the case). There’s really not much magic to this:

First I get the user name and filter out nasties:


$user = $_GET[‘user’];
$isjs = “/^[a-z|A-Z|_|-|$|0-9|.]+$/”;
if(preg_match($isjs,$user)){

Then I set the content type to show the image and use cURL to get the information from the user’s twitter page.

header(‘Content-type:image/png’);
$info = array();
$cont = get(‘http://twitter.com/’.$user);

I get the information using regular expressions and put them in an associative array:

preg_match_all(‘/([^>]+)/msi’,$cont,$follow);
$info[‘follower’] = convert($follow[1][0]);
preg_match_all(‘/([^>]+)/msi’,$cont,$follower);
$info[‘followed’] = convert($follower[1][0]);
preg_match_all(‘/([^>]+)/msi’,$cont,$updates);
$info[‘updater’] = convert($updates[1][0]);

The convert function removes the comma punctuation added by twitter and makes sure the values are integers.

I then need to determine which of the three values is the highest and define a scaling factor as the Google API only allows values up to 100. I then check what the type of the user is by getting the right array key and change the values for displaying.


$max = max($info);
$convert = 100 / $max ;
foreach($info as $k=>$f){
if($f = $max){
$type = $k;
}

$disp[$k] = $f * $convert;
}


I check the type and assemble the display string accordingly:

if($type = ‘updater’){
$t = ’ is an ‘;
}

if($type = 'follower'){
$t = ' is a ';
}

if($type = ‘followed’){
$t = ’ is being ‘;
}

$title = $user . $t . $type;


I assemble the labels array and the values array and add all up to the correct Google charts API url. I use cURL to get the image and echo it out.

$out = array();
foreach($info as $k=>$i){
$out[] = $k.’+(‘.$i.’)’;
}

$labels = join($out,’|’);
$values = join($disp,’,’);
$img = get(‘http://chart.apis.google.com/chart?cht=p3&chco=336699&’.
‘chtt=’.urlencode($title).’&chd=t:’.$values.
‘&chs=350×100&chl=’.$labels);
echo $img;
}


The rest are the cURL and convert helper functions.

function get($url){
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$feed = curl_exec($ch);
curl_close($ch);
return $feed;
}

function convert($x){
$x = str_replace(‘,’,’‘,$x);
$x = (int)$x;
return $x;
}

You like?

Faster version (one cURL, instead of two)

Instead of setting the PNG header and echoing out the image you can also just set a location header at the end and redirect the URL request to Google’s servers. I guess they have more bandwidth. :)

Webmaster Jam Session hack – quickly fixing a web site with YUI grids

Saturday, October 4th, 2008

Last weekend I went to Atlanta, Georgia to speak at the Webmaster Jam Session or short WJS organized by Coffeecup software. I’ve written a detailed report on the event on the YDN blog and in short it was fantastic.

One of the things I did at the event is sit in on one of the Website Smackdown sessions, which are expert reviews of web sites people in the audience submitted. One of the sites was the following:

The original site

What shocked me about it was that it is fairly new, but still uses tables for layout. When I investigated I heard that the reason is simply lack of resources to build web sites in a different manner. This is sad, as nowadays we have resources to build upon readily available on the web that we couldn’t even dream of when I started developing. To prove the point that you can re-do a small info site like this one using semantic markup and CSS without even knowing much about it, I used the YUI grids and created the following in roughly 15 minutes:

YUI redesign site

You can download the web site demo files and play with them yourself.

I’d be happy to write more, in-depth articles about this kind of structure and redesign if there is interest. The only question I have about it is where to publish them? People that would benefit from these are not likely to read the blogs and magazines I write for. Is there a government web standards publication somewhere?

Useful tweets widget using Yahoo Pipes and some JavaScript

Sunday, September 28th, 2008

If you look on the right side of this blog (and you can see) and you have JavaScript enabled you’ll spy a little “Useful tweets” widget (list). This is done with Yahoo Pipes and some JavaScript. As people asked me how it is done, here goes:

The idea

I use twitter a lot. Some of what I write is very relevant to the blog here, some is not fit for publication and some is just personal. So publishing all the tweets here would have been disruptive, hence I tried to find a way to filter things down.

What I do is that I end every tweet that I want to show up here with a § symbol, thus giving me a handle to filter out the good ones.

Playing nice with twitter and not summoning the fail whale

As twitter is probably the most hit API out there I didn’t want to go through the API and all the authentication malarkey. Instead I am using the ATOM feed and pipes to get the information and to filter it down.

Yahoo pipes is still full of win when it comes to filtering, mashing and converting data, and the pipe in question that I am using is available here: Useful tweets pipe

It takes the atom feed of a twitter user of a certain ID, removes all tweets but the ones ending in a § and removes the user name of the output.

Using the pipe and displaying the content

In order to display the pipe all you need is a small JavaScript and the right HTML in your page (or in my case WordPress template):




The link means the thing still makes sense when JavaScript is not available and the script does the rest. One thing you need to do to show your useful tweets instead of mine is to change the class on the DIV! You get the number from your twitter page:

  • Go to your twitter page, f.e.: http://twitter.com/codepo8
  • Click the RSS link at the bottom
  • Check the URL of the feed, your ID is the number in between the slash and ‘.rss’, f.e.: http://twitter.com/statuses/user_timeline/13567.rss

The JavaScript for display of the badge is no rocket science whatsoever:


var tweets = function(){
var x = document.getElementById(‘mytweet’);
if(x){
var twitterUserId = x.className.replace(‘user-’,’‘);
var s = document.createElement(‘script’);
s.type = ‘text/javascript’;
s.src = ‘http://pipes.yahoo.com/pipes/pipe.run?’ +
‘_id=f7229d01b79e508d543fb84e8a0abb0d&_render=json’ +
‘&id=’ + twitterUserId + ‘&_callback=tweets.tweet’;
document.getElementsByTagName(‘head’)[0].appendChild(s);
};
function tweet(data){
if(data && data.value && data.value.items){
if(typeof data.value.items.length !== ‘undefined’){
var ul = document.createElement(‘ul’);
var all = data.value.items.length;
var end = all > 5 ? 5 : all;
for(var i=0;i < end;i++){
var now = data.value.items[i];
var li = document.createElement(‘li’);
var a = document.createElement(‘a’);
a.href = now.link;
a.appendChild(document.createTextNode(now.title));
li.appendChild(a);
ul.appendChild(li);
}

x.appendChild(ul);
}

}
};
return{
tweet:tweet
}

}();

  • We check if the element with the ID mytweet exists
  • We then extract the user ID from the class name and create a new JavaScript pointing to the JSON output of the pipe. This, once loaded, will call tweets.tweet() and send the data as JSON
  • The tweet() method checks if data was retrieved, creates a list of links and appends it to the DIV.

Hope this is useful to someone else, too.

Reading blinds – a bookmarklet to help me read easier

Wednesday, September 24th, 2008

I am now a proud user of a 24 inch monitor at work and I realized that when I read large texts, the amount of white on the screen starts to hurt my eyes. Therefore I’ve written a small bookmarklet to black out part of the screen on demand and have a link top left to show and hide the blinds that cover the rest of the content. The blinds are fixed position so that I can scroll the content behind them. I also add padding to the bottom of the document to have enough scrolling space.

Here’s a blog without reading blinds:

A blog without reading blinds

The same blog with reading blinds on:

A blog with reading blinds

The bookmarklet is hosted on my server, to install it simply drag the following link to your links toolbar: Reading Blinds

Hacking SlideShare’s embed adding a preview and be a lot shorter and readable

Thursday, April 17th, 2008

Edit: There is a bug in the script (see comments) but somehow Googlecode does not allow me to edit my own file. I will fix it once I got around that issue.The bug reported in the comments is now fixed, sadly enough I also had to re-write the converter as Google code does not allow me to replace an older version of a download (or is there a trick?). The new file is called previewer2.js

As readers of this blog know, I am a big fan of SlideShare as a distribution platform for my presentation slides. However, there are some things that annoy me about it.

One of them is the rather verbose embed code SlideShare offers you:



That is quite a mouthful and the main issue is that when you use several slide embeds in one document, you’ll slow down the rendering of your page as each of these Flash embeds need to be instantiated and tries to pre-cache the first three slides from S3.

I’ve analyzed the code a bit, added some other info I found in the RSS feed and came up with a small JavaScript that embeds slides in a different way. All you need there is the following code:



This gives slideshare the same SEO link love but is a lot less to add. Instead of the full slide include, you’ll get a preview image you can click that gets replaced with the flash movie. The following are examples:

Now, in order to convert one to the other you could do it by hand, or use the slideshare embed converter or install the Greasemonkey script

So far this is a hack, but I talked to Jonathan Boutelle about it yesterday night at the San Francisco JavaScript meetup and he is happy to pursue this idea further. My wishlist:

  • A larger preview image
  • A rest API call that gives me this information in a readable manner