Christian Heilmann

Posts Tagged ‘badge’

TTMMHTM: Meaning of love, Windows 3.11, geeky decor and my dates in the valley so far

Monday, January 25th, 2010

Things that made me happy this morning:

A Speakerrate comments badge or another reason to love Twitter

Tuesday, November 10th, 2009

Another reason to love Twitter: You ask for APIs and you get them. As requested in my Tweet, speaker rate acted very quickly and build an API
for latest comments – and here is my thank you. Using a bit of YQL magic and some JavaScript I put together a badge to show off the latest speakerrate comments on your page:

Speakerrate Badge Test by  you.

Check out the demo page of the badge and get the source and read the docs on GitHub.

Usage:

Simply add a DIV with a link to your speaker page on speakerrate:

Then add the script and call the init() method:


You can also provide a few options to the init() method to change the look and features of the badge:


If you need different styles, just use styled:false or override the ones applied.

Displaying useful tweets on your blog (second version using YQL)

Friday, January 16th, 2009

Back in September I showed a solution how to display filtered tweets on your blog using Yahoo Pipes which is in use on this page in the sidebar on the right.

There were a few issues with it: the data returned was pretty big and slowed down the page (yeah I could delay this after page load, but size down the wire is size down the wire) and I only used the last 20 updates, which – with my twitter pace – meant that a lot of times there wasn’t any ‘blogworthy’ tweet available any longer.

So, I dug around and realized that instead of analyzing the RSS feed of your tweets it makes much more sense to use the API, in detail the user timeline which allows me to get up to 200 of the latest tweets using the count parameter.

This is awesome, however, as the API repeats all my information in every status (I guess to cover changes, like location) the result can get very large, right now for example the JSON output of my twitter updates is 120KB – not good.

By using YQL I can easily cut this down to the bare necessities using the following command:

select status.text from xml where url = 'http://twitter.com/statuses/user_timeline/codepo8.xml?count=200' and status.text like '%§%'

Using this with JSON output and wrapper I only get the updates I need as a 1.2KB large JavaScript file!

The HTML and JavaScript solution doesn’t change much:




Now I got a faster useful tweets badge with information that stays longer. Easy.

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. :)

An unobtrusive badge for Google Reader’s shared items

Wednesday, May 21st, 2008

I am a user of Google Reader to get through the vast amounts of RSS feeds I subscribed to. I think it is safe to say that reading RSS and twittering has replaced most of my web surfing.

Like most big RSS readers, Google reader also allows you to share great finds you had with people who want to and are in your social neighbourhood. You can either get these finds as a feed or as a little badge (called a clip in Google lingo) to include in your blog or other sites.

The out-of-the-box version of this badge can be customized and results in two JavaScript includes which write out the badge.

That is nice, but I don’t quite care for things that could offer functionality without JavaScript but don’t bother, which is why I checked more closely what the Google badge does.

If you look at the generated script includes you’ll find for example the following URL ( added spaces to avoid breaking my blog :) )

http://www.google.com/ reader/public/javascript/ user/07479231772993841072/ state/com.google/broadcast? n=5&callback=GRC_p%28%7Bc%3A%22green%22%2Ct %3A%22Christian%20Heilmann%27s %20shared%20items%22%2Cs%3A%22false%22%7D%29%3Bnew%20GRC

Clicking this will get you a JSON object with a wrapper function (and for some reason a comment that this is a JavaScript file), which means you can use this for your own purposes.

All you need is your user ID, which you can get this one easily from your shared items homepage that Google Reader offers. In my case this is http://www.google.com/reader/shared/07479231772993841072.

The other interesting parameters of the JSON API are the n parameter defining the amount of items and the callback parameter defining the name of the function call wrapped around the JSON data.

Putting all of this together it was easy to create a badge that uses the following HTML to show off my shared items on Google Reader.


Visitors without JavaScript will still be able to click through to the page of my shared items. Those with JavaScript will get the latest five.

You can see the badge in action and download it for yourself on the demo page (using tutorialbuilder):