How does a antipixel: history of BlogBabel Rank

Update: BlogBabel closed - all the services, widgets and plugins are no longer active

I want to tell you how it came to the antipixel BlogBabel , programming techniques used and the valuable contribution, direct and indirect, of you Blogger, which has made this all very funny!

May 10

It all started reading the Post Display the PHP Alexa ranking of phptips.it. This Post was exposed a method to capture the Alexa rank. So inspired by this technique I adapted the code and I published the first post "Catch the rank to BlogBabel". Apart from the bad image with ImageMagick pulled out (because I had no desire to improve it), one of the most annoying was that it was generated an image (GIF) on my server for each access. This road would lead, sooner or later, a huge waste of space ... so I need to generate un'immmagine temporarily, such as returning the runtime information of the image without actually generating any (even creating a temporary file, and immediately after removing it, it would have been costly in terms of time-servers and resources).

May 10 - night

I had the idea of using Flash! The advantage is clear: Flash calls my PHP, picks up the rank and it shows. In this way, any image - even temporarily - is created and resources are saved.
Starting from the PHP code that "Capture the rank BlogBabel", I used the ability of objects EMBED and OBJECT - notably Flash - to accept parameters from the outside.

, è possibile passare in GET alcuni parametri all'oggetto. In practice, when you insert an ActiveX (with the TAG OBJECT ) and / or TAG EMBED , you can switch to GET parameters to the object. Just this was done in the first proposed code:

1
2
3

<! - Version Embed ->

<! - Version Embed ->

As you can see beyond the SRC attribute to point to the SWF fiilmato, blogs also passes a parameter necessary to determine your blog BlogBabel.

May 12

Meanwhile, arriving early feedback, I have dedicated myself to update the Flash version (adding context menus). The code I used is very simple and uses the communication between Flash and a server, in this case my small page on PHP undolog.com. To better understand the pattern around here:

bbr-schema

From a Web page - your example - the movie is loaded SWF with a GET parameter (? Blog = [your code]). The ActionScript code picks it up, getting it directly as a variable in the root of the movie (for compatibility in mind that I used Adobe Flash MX - not the last version 8 and version 9):

1
2
3
4

/ *
** GET variable Preveli
* /
= undefined ) ? blog : "undolog" ; = blog (blog! = undefined)? blog: "undolog";

Now the movie has to ask the PHP page to withdraw from the rank BlogBabel:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

/ *
** Domains accessible
* /
security . allowDomain ( "http://www.undolog.com" , "http://it.blogbabel.com" ) ; System . security. allowDomain ("http://www.undolog.com", "http://it.blogbabel.com");
/ *
** Spliting return values
* /
Array ( ) ; ret_value var = new Array ();
; php_file var = "bbr.php";
LoadVars ( ) ; send_lv var = new LoadVars ();
( success ) { send_lv. onLoad = function (success) {
success ) { if (success) {
split ( "-" ) ; ret_value = send_lv. returnvalue. split ("-");
text = ret_value [ 0 ] ; rank_mc. rank_txt. ret_value text = [0];
ret_value [ 0 ] < = ret_value [ 1 ] ) { if (ret_value [0] <= ret_value [1]) {
( 1 ) ; bck_mc. gotoAndStop (1);
{ Else {}
( 2 ) ; bck_mc. gotoAndStop (2);
}
}
};
"http://www.undolog.com/services/" + php_file + "?blog=" + blog , send_lv ) ; send_lv. sendAndLoad ("http://www.undolog.com/services/" php_file + + "? blog =" + blog, send_lv);

The lines of code with gotoAndStop() I just need to change the background of Flash movie (red or green). The object LoadVars calls the PHP page, the blog by sending it as a parameter. dell'oggetto stesso! The method sendAndLoad() expects a return, the event that triggers onLoad() object itself! The PHP (bbr.php) returns the values to Flash in the following way:

1
2
3
4

/ *
** Return on stdout the results taken from BlogBabel
* /
. $rank . "-" . $max . "-" . $min ; echo "ReturnValue =". $ rank. "-". $ max. "-". $ min;

When the event fires onLoad() in the variable ret_value movie becomes an array, I saw that PHP returns three values that I need "RANK-MAXIMUM-MINIMUM"!

This technique, however, gave some problems on some blog (W3C compatible) and comuqnue - as sappaimo - Microsoft Internet Explorer produces the required annoying "Press spacebar to activate the control"!

May 15

Thanks therefore to reports of Wolly , Axell and others, it turned out that did not pass W3C validation! Necessary to remove the embed tag! So I wrote a pseudo Javascript routines can dynamically insert the Flash movie, passing at once both the probelma W3C compatibility of the behavior of Microsoft Internet Explorer:

1
2
3

<! - Start BlogBabel Rank ->

<! - End BlogBabel Rank ->

This is a really nice technique, already discussed on this blog. In practice, load a PHP page as a JavaScript script! Bbrjs.php the code does is this:

1
2
3
4
5
6
7

<Php

isset ( $_GET [ "blog" ] ) ) if ( $_GET [ "blog" ] != "" ) : ?> if ( isset ($ _GET ['blog'])) if ($ _GET ['blog']! = ""):?>

[ "blog" ] ?> " bgcolor="#ffffff" width="80" height="15" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></embed>'); document.write ('<embed src = "http://www.undolog.com/services/blogbabelrank.swf?blog = <? = $ _GET [' blog ']?>" bgcolor = "# ffffff" width = " 80 "height =" 15 "type =" application / x-shockwave-flash "pluginspage =" http://www.macromedia.com/go/getflashplayer "/> </ embed> ');

?> <? Php endif?>

May 16

If the use of Flash had solved the problem of temporary images had brought with him a bit 'of trouble, finally solved, thanks to the latest script; only solution to use Flash in an almost transparent.

Meanwhile, someone ( Gioxx ) also began to demand a right - easier - image version! So back to my feet and try to understand how the hell to avoid the problem of GIF generated on my web server!

... Stroke of genius (or luck ...) I was visiting the new tools.blogflux.com (which has just cast another service aggregation Feed: blogtopsite - now become a single thing under the hat Bloggy Network ) and I remember offering a friendly service Button Maker - Maker or antipixel:

Cool! It was what I needed! By performing a simple Reverse Engineering (peering into the code with the fantastic FireBug FireFox ) Of the service (among other things on the net there are several, but this was perfect for my purpose), I find that it consists of a simple form that sends the parameters for the construction dell'antipixel GET (perfetto! Better POST) directly to a page that gives a picture!! To say the least, exceptional!
This is so that the PHP code becomes:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<Php
/ / Get Rank with the usual method
/ / ....

'http://tools.blogflux.com/buttonmaker/button.php' . $ U = 'http://tools.blogflux.com/buttonmaker/button.php'.
$rank . '? LeftText ='. $ Rank.
urlencode ( "#3169A5" ) . '& LeftColor ='. urlencode ("# 3169A5").
urlencode ( "#FFFFFF" ) . '& LeftBG ='. urlencode ("# FFFFFF").
'LeftAlign & = 3'.
'= & RightText BlogBabel'.
urlencode ( "#FFFFFF" ) . '& RightColor ='. urlencode ("# FFFFFF").
urlencode ( $color ) . '& RightBG ='. urlencode ($ color).
'RightAlign & = 1'.
urlencode ( "#000000" ) . '& BorderBG ='. urlencode ("# 000000").
urlencode ( "#FFFFFF" ) . '& ButtonBG ='. urlencode ("# FFFFFF").
'DivAlign & = 1'.
'ButtonSize & = 1'.
'& Fontfamily =';

'<a target="_blank" href="' . AIM_URL . $_GET [ "blog" ] . '"><img border="0" alt="BlogBabel Rank - Image Version 1.0 - Creato da undolog.com" src="' . $u . '" />' ; $ O = '<a target="_blank" href="'. AIM_URL. $_GET ["blog"].'"> <Img border = "0" alt = "BlogBabel Rank - Image Version 1.0 - Created by undolog. com "src =" '. u $.' "/> ';
?>
document.write ('<? = $ or?>');

(With this method you can create any antipixel - the worst clog the server tools.blogflux.com )

Once again the code provided was using a pseudo-JavaScript:

1
2
3

<! - Start BlogBabel Rank ->

<! - End BlogBabel Rank ->

It was time to turn it into a simple image!

May 17

I managed to delete the script in PHP using this simple trick:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

/ / Get Rank with the usual method
/ / ....
'http://tools.blogflux.com/buttonmaker/button.php' . $ U = 'http://tools.blogflux.com/buttonmaker/button.php'.
$rank . '? LeftText ='. $ Rank.
urlencode ( "#3169A5" ) . '& LeftColor ='. urlencode ("# 3169A5").
urlencode ( "#FFFFFF" ) . '& LeftBG ='. urlencode ("# FFFFFF").
'LeftAlign & = 3'.
'= & RightText BlogBabel'.
urlencode ( "#FFFFFF" ) . '& RightColor ='. urlencode ("# FFFFFF").
urlencode ( $color ) . '& RightBG ='. urlencode ($ color).
'RightAlign & = 1'.
urlencode ( "#000000" ) . '& BorderBG ='. urlencode ("# 000000").
urlencode ( "#FFFFFF" ) . '& ButtonBG ='. urlencode ("# FFFFFF").
'DivAlign & = 1'.
'ButtonSize & = 1'.
'& Fontfamily =';

"Location: " . $u ) ; header ("Location:". $ u);

So the code was even better, using only the IMG tag:

1
2
3

<! - BlogBabel Rank ->
"BlogBabel Rank - by undolog.com" src = "http://www.undolog.com/services/bbroimage.php?blog=[blog]" / > < img alt = "BlogBabel Rank - by undolog.com" src = "http://www.undolog.com/services/bbroimage.php?blog = [blog]" />
<! - BlogBabel Rank ->

Thanks to the beta-testing Gioxx , I discovered that on his blog is somehow intercepted the use of PHP. The same Gioxx , in fact, I recommend using a syntax similar to FeedBurner - no only an image with directions SRC PHP. So I make the last change (or latest work ). Through the use of. Htaccess files on my web server can create a permalink, or a dummy link, pointing to the PHP file above. What I wanted was to get a syntax that would eliminate the PHP extension from the call, namely:

1
2
3

<! - BlogBabel Rank ->
"BlogBabel Rank - by undolog.com" src = "http://www.undolog.com/bbrank/[blog]" / > < img alt = "BlogBabel Rank - by undolog.com" src = "http://www.undolog.com/bbrank/ [blog]" />
<! - BlogBabel Rank ->

In the case of undolog:

1
2
3

<! - BlogBabel Rank ->
"BlogBabel Rank - by undolog.com" src = "http://www.undolog.com/bbrank/undolog" / > < img alt = "BlogBabel Rank - by undolog.com" src = "http://www.undolog.com/bbrank/undolog" />
<! - BlogBabel Rank ->

To achieve this magic just to have the support. Htaccess file which allows a RE-WRITE Trpanj the case (404) of the missing page. On the header of undolog, so I added these lines of code:

1
2
3
4
5
6
7
8
9
10
11
12
13

$_SERVER [ "REQUEST_URI" ] ; _tmp_uri $ = $ _SERVER ["REQUEST_URI"];
explode ( "/" , $_tmp_uri ) ; $ _tmp_cmd = explode ("/", $ _tmp_uri);
/ /
$_tmp_cmd [ 1 ] ) { switch ($ _tmp_cmd [1]) {
: case "bbrank"
"Location: /services/bbroimage.php?blog=" . $_tmp_cmd [ 2 ] ) ; header ("Location: / services / bbroimage.php? blog =". _tmp_cmd $ [2]);
break;
default:
/ * Short and sweet * /
'WP_USE_THEMES' , true ) ; define ('WP_USE_THEMES', true);
'./wp-blog-header.php' ) ; require ('. / wp-blog-header.php');
break;
}

Perfection, or nearly so, had been reached! No incompatibility, no script and no PHP, apparently. Here is a diagram of the tour at the end:

Final Scheme

At the end I can only thank you all for the warm feedback . THANKS to all those who have the cumulative installed and commented on the many posts on this topic

DOWNLOAD

For those who want to (for those who can or is able) to install the PHP file on your server instead of going for here is the zipped source undolog.com:
PHP file that captures the rank and sends a request to tools.blogflux.com
~~bbroimage.zip~~