Last week, we threw together a little web-based search form that allowed us to search for Blogger profiles by country. Although we could certainly take it a step or two further, I'd like to make a little detour this week to explore a different direction-- namely, movies.
Your Blogger profiles allows you to list your favorite movies. Much like the location field, any movie titles that you type in become hypertext links. If you click on one of those "Favorite Movie" title links, the Blogger profile search program displays other Blogger users who have entered the same movie title as one of their favorites. It's sort of cool, I guess--you can find people with similar cinematic tastes, subscribe to their blog, and then argue endlessly about whether Shane dies at the end or not.
But what happens if you want to find someone who liked a movie that you aren't willing to list in your favorites? Perhaps you fear to admit "Ernest Saves Christmas" is one of your favorite comedic movies, but secretly wish to find other people who recognize the hidden genius of Shakespearean actor, Jim Varney. Or maybe you just want to know if anyone out there would admit "Showgirls" was their favorite movie?
If so, then today is your lucky day, my friend. ;)
As always, let's start from something we know-- like the URL of a typical Blogger search with one of the movies from our own Blogger profiles:
http://www.blogger.com/profile-find.g?t=m&q=The+Princess+Bride
The basic URL (i.e. the http://www.blogger.com/profile-find.g? part) remains unchanged from our previous "search by country" example. The value of the first parameter after the question mark changed from an "l" (for location) to an "m" (for movie). But, the second parameter (that is, "q=") and the value for that second parameter ("The+Princess+Bride") are completely different. The "q" stands for query, if that will help you remember it-- and the text after the equal sign is obviously the title of a movie, but with plusses instead of spaces between words. It's a trick to keep the URL from having spaces in it, which could cause problems with links as well as passing the data to the search program.
Rather than build another web-based search form from scratch, let's try just modifying the form we created last time. Here it is:
<form action="http://www.blogger.com/profile-find.g" method="get">
<input name="t" value="l" type="hidden">
<select name="loc0" id="loc0" style="font-family: Verdana,sans-serif;">
<option value="_nil_">Select a country</option>
<option value="AF">Afghanistan</option>
. . . not all countries are listed, obviously . . .
<option value="ZM">Zambia</option>
<option value="ZW">Zimbabwe</option></select>
<input value="Submit" type="submit">
</form>
I've italicized the lines that are specific to the country search, which we will remove. This leaves us with the following:
<form action="http://www.blogger.com/profile-find.g" method="get">
<input name="t" value="l" type="hidden">
. . . we've removed the drop down list, and will replace it with a text field . . .
<input value="Submit" type="submit">
</form>
That second line is a hidden field we use to pass the type of query (i.e. location, movie, etc.) to the Blogger Profile Search Program. It's currently set to a value of "l" (as in, location) which won't do us much good. To make it search for movies instead, we just change the value to "m" instead. That leaves us with:
<form action="http://www.blogger.com/profile-find.g" method="get">
<input name="t" value="m" type="hidden">
. . . we've removed the drop down list, and will replace it with a text field . . .
<input value="Submit" type="submit">
</form>
Almost done. The last thing we need to do is put in a text field so people can type in the name of any movie title. As always, I leave the specific text and styling decisions to your preferences:
<form action="http://www.blogger.com/profile-find.g" method="get">
<input name="t" value="m" type="hidden">
<p><input name="q" id="q" style="font-family:Verdana, sans-serif;" />
</p>
<input value="Submit" type="submit">
</form>
Go on, give it a test drive and see for yourself. I know, some of you might be wondering about how we're going to get the plus signs in between the words of movie titles. Is it a trick with Javascript? Actually, the good news is that the web browser takes care of that little detail in the background for us when the user hits the Submit button. (editorial note: I haven't tested this with every single browser out there in the wild, but it works with Firefox 2.0 on the Macintosh definitely, and I expect this trick will work with most modern browsers.)
A liberal arts grad on the Information Superhighway, stuck in a traffic jam at the intersections of Technology, Psychology and Security.
Showing posts with label Blogger. Show all posts
Showing posts with label Blogger. Show all posts
Tuesday, September 2, 2008
Wednesday, August 27, 2008
"Hacking" Blogger's Profile Search, Part II
Last week I wrote about how Blogger's Profile Search feature allows users to locate Bloggers in other countries, and how you can tweak the URL parameters to find people without even knowing a single blog in your country of interest as a starting point. The process is simple and workable-- just view source on your "Edit Profile" screen to learn the two letter country code of the country you are interested in (example: VA for Vatican), and then append that code to the search URL, like so:
http://www.blogger.com/profile-find.g?t=l&loc0=VA
Not bad, but who wants to "View Source" every time they want to look up a new country? Besides, some of our friends and family members (who aren't necessarily web developers) might want to also play along-- and this solution isn't user friendly for non-geeks. They're bound to mess up the URL somehow.
How about a web form that lets users select a country from a drop-down list of all the countries? And, instead of manually modifying a URL, all they have to do is hit the "Submit" button?
This turns out to be surprisingly easy-- it just requires a little HTML.
Let's take it apart and see how it works. We start with a basic form tag:
<form action="http://www.blogger.com/profile-find.g" method="get">
. . . we'll flesh out this bit later on . . .
<form>
The action attribute above, which tells the form where it should send its information when the submit button is pressed, is pointing at the same URL we used last time for Blogger's profile search-- except there don't seem to be any parameters tacked on to the end of the URL. Don't worry, we'll be teaching our form how to add that extra stuff to the end of the URL "behind the scenes." We will do that by using the form's "get" method.
Before we go any further with our form, let's take a second look at that example URL from before:
http://www.blogger.com/profile-find.g?t=l&loc0=VA
See that "t=l" bit in the middle there that I've bolded for emphasis? Blogger's Profile Search feature can actually find Bloggers in many different ways: by location, by occupation, by interest, favorite book titles, etc. That "t=l" business lets Blogger's Profile Search program know that you are interested in carrying out a search by location. For you mnemonic learners out there, that's t (as in type) equals l (as in location).
We need to make sure our form passes that "t=l" parameter to the Blogger URL before passing the country code. We also want to make sure it can't be changed/messed up by our non-web geek friends. The best way to accomplish both goals is to put a hidden field in the form, like so:
<form action="http://www.blogger.com/profile-find.g" method="get">
<input name="t" value="l" type="hidden">
. . . the drop down list of countries will eventually go here . . .
<form>
Now that we know our form will always specify the "search by location" type of query, we can focus on the "heavy lifting" part-- namely listing all the countries in a drop down list. The important bit to remember is to name the select tag with the same parameter label (i.e. loc0) the Blogger search URL is expecting. If I were to name it something like "countryList" it won't work.
<form action="http://www.blogger.com/profile-find.g" method="get">
<input name="t" value="l" type="hidden">
<select name="loc0" id="loc0" style="font-family:Verdana, sans-serif;">
<option value="_nil_">Select a country</option>
<option value="AF">Afghanistan</option>
. . . I'm not going to type in the entire country list, just enough to convey the idea . . .
<option value="ZM">Zambia</option>
<option value="ZW">Zimbabwe</option>
</select>
. . .
<form>
I'll leave the specific text content and styling of the form (e.g. background color, font, border, etc.) to your personal tastes. That leaves us with the actual submit button:
<form action="http://www.blogger.com/profile-find.g" method="get">
<input name="t" value="l" type="hidden">
<select name="loc0" id="loc0" style="font-family:Verdana, sans-serif;">
<option value="_nil_">Select a country</option>
<option value="AF">Afghanistan</option>
. . . I'm not going to type in the entire country list, just enough to convey the idea . . .
<option value="ZM">Zambia</option>
<option value="ZW">Zimbabwe</option>
</select>
<input type="Submit" value="Submit" / >
<form>
http://www.blogger.com/profile-find.g?t=l&loc0=VA
Not bad, but who wants to "View Source" every time they want to look up a new country? Besides, some of our friends and family members (who aren't necessarily web developers) might want to also play along-- and this solution isn't user friendly for non-geeks. They're bound to mess up the URL somehow.
How about a web form that lets users select a country from a drop-down list of all the countries? And, instead of manually modifying a URL, all they have to do is hit the "Submit" button?
This turns out to be surprisingly easy-- it just requires a little HTML.
Let's take it apart and see how it works. We start with a basic form tag:
<form action="http://www.blogger.com/profile-find.g" method="get">
. . . we'll flesh out this bit later on . . .
<form>
The action attribute above, which tells the form where it should send its information when the submit button is pressed, is pointing at the same URL we used last time for Blogger's profile search-- except there don't seem to be any parameters tacked on to the end of the URL. Don't worry, we'll be teaching our form how to add that extra stuff to the end of the URL "behind the scenes." We will do that by using the form's "get" method.
Before we go any further with our form, let's take a second look at that example URL from before:
http://www.blogger.com/profile-find.g?t=l&loc0=VA
See that "t=l" bit in the middle there that I've bolded for emphasis? Blogger's Profile Search feature can actually find Bloggers in many different ways: by location, by occupation, by interest, favorite book titles, etc. That "t=l" business lets Blogger's Profile Search program know that you are interested in carrying out a search by location. For you mnemonic learners out there, that's t (as in type) equals l (as in location).
We need to make sure our form passes that "t=l" parameter to the Blogger URL before passing the country code. We also want to make sure it can't be changed/messed up by our non-web geek friends. The best way to accomplish both goals is to put a hidden field in the form, like so:
<form action="http://www.blogger.com/profile-find.g" method="get">
<input name="t" value="l" type="hidden">
. . . the drop down list of countries will eventually go here . . .
<form>
Now that we know our form will always specify the "search by location" type of query, we can focus on the "heavy lifting" part-- namely listing all the countries in a drop down list. The important bit to remember is to name the select tag with the same parameter label (i.e. loc0) the Blogger search URL is expecting. If I were to name it something like "countryList" it won't work.
<form action="http://www.blogger.com/profile-find.g" method="get">
<input name="t" value="l" type="hidden">
<select name="loc0" id="loc0" style="font-family:Verdana, sans-serif;">
<option value="_nil_">Select a country</option>
<option value="AF">Afghanistan</option>
. . . I'm not going to type in the entire country list, just enough to convey the idea . . .
<option value="ZM">Zambia</option>
<option value="ZW">Zimbabwe</option>
</select>
. . .
<form>
I'll leave the specific text content and styling of the form (e.g. background color, font, border, etc.) to your personal tastes. That leaves us with the actual submit button:
<form action="http://www.blogger.com/profile-find.g" method="get">
<input name="t" value="l" type="hidden">
<select name="loc0" id="loc0" style="font-family:Verdana, sans-serif;">
<option value="_nil_">Select a country</option>
<option value="AF">Afghanistan</option>
. . . I'm not going to type in the entire country list, just enough to convey the idea . . .
<option value="ZM">Zambia</option>
<option value="ZW">Zimbabwe</option>
</select>
<input type="Submit" value="Submit" / >
<form>
Tagged as
Blogger,
hacking,
profile search,
web dev
Wednesday, August 20, 2008
"Hacking" Blogger's Profile Search
Suppose you want to find all Blogger users that live in Vatican.
You could try a Google Search for the terms "Vatican" and "Blogger." Those results would include any webpage that contained those two terms in it (regardless of whether the author lives in Vatican or is just writing about Vatican or Vatican City), but you could poke around until you got lucky and found a Blogger who actually lived in Vatican. From there, you could read their profile and use their location link to find all the other bloggers who identify themselves as living within Vatican. It might take a while, but you could do it.
Or, you could analyze Blogger's Profile Search URL and figure out it's being used to pass search parameters. Once you understand the logic behind the URL, you could then quickly build your own custom URLs to find Bloggers in Vatican or any country you desire.
The first and most important lesson in "hacking" (in the old-school sense of the word, not in the "breaking into systems/stealing/vandalizing" sense that the media likes to perpetuate these days) is to be observant and figure out the underlying nature of how things work.
Take the typical Profile Search URL from Blogger, for example. When I click on my profile, and then click on the "United States" link by the "Location:" text label, I see the following URL:
http://www.blogger.com/profile-find.g?t=l&loc0=US
See that last part of the URL, the &loc0=US part? That part of the address is being used to tell Blogger which country it should use in its search. If we could deduce the correct country code for Vatican, we can change the URL to get the desired results.
Fortunately, deducing the correct country codes is pretty easy. You just log in to your Blogger account, edit your own profile, and find the drop down list of countries under the "Location:" section. Using View Source in your web browser, find the list of countries. It should look something like this:
<select name="widget.country" id="widget.country" tabindex="0">
<option value="_nil_">Not Specified</option>
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
. . .
<option value="VA">Vatican</option>
. . .
</select>
Obviously, I didn't list all the countries in the drop down list. I also bolded the specific entry we're interested in, so we now know that the country code for Vatican is "VA." That means if we switch the country codes on that previous search URL, we should wind up with:
http://www.blogger.com/profile-find.g?t=l&loc0=VA
The above URL will give us a page with all the Bloggers in Vatican. Don't take my word for it, though. I could be wrong, or something may have changed since I wrote this entry. If you click on the above link and get a list of profiles that all have locations in Vatican, then you know it (still) works properly. Now that you know the "trick" (i.e. find the correct country code, insert it into the URL), you can build your own "custom" links, save them as bookmarks, etc.
Of course, if you really want to be slick about it, you could build your own search form web page with a drop down list of all the countries and their corresponding country codes. (Look for that topic in an entry next week.)
You could try a Google Search for the terms "Vatican" and "Blogger." Those results would include any webpage that contained those two terms in it (regardless of whether the author lives in Vatican or is just writing about Vatican or Vatican City), but you could poke around until you got lucky and found a Blogger who actually lived in Vatican. From there, you could read their profile and use their location link to find all the other bloggers who identify themselves as living within Vatican. It might take a while, but you could do it.
Or, you could analyze Blogger's Profile Search URL and figure out it's being used to pass search parameters. Once you understand the logic behind the URL, you could then quickly build your own custom URLs to find Bloggers in Vatican or any country you desire.
The first and most important lesson in "hacking" (in the old-school sense of the word, not in the "breaking into systems/stealing/vandalizing" sense that the media likes to perpetuate these days) is to be observant and figure out the underlying nature of how things work.
Take the typical Profile Search URL from Blogger, for example. When I click on my profile, and then click on the "United States" link by the "Location:" text label, I see the following URL:
http://www.blogger.com/profile-find.g?t=l&loc0=US
See that last part of the URL, the &loc0=US part? That part of the address is being used to tell Blogger which country it should use in its search. If we could deduce the correct country code for Vatican, we can change the URL to get the desired results.
Fortunately, deducing the correct country codes is pretty easy. You just log in to your Blogger account, edit your own profile, and find the drop down list of countries under the "Location:" section. Using View Source in your web browser, find the list of countries. It should look something like this:
<select name="widget.country" id="widget.country" tabindex="0">
<option value="_nil_">Not Specified</option>
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
. . .
<option value="VA">Vatican</option>
. . .
</select>
Obviously, I didn't list all the countries in the drop down list. I also bolded the specific entry we're interested in, so we now know that the country code for Vatican is "VA." That means if we switch the country codes on that previous search URL, we should wind up with:
http://www.blogger.com/profile-find.g?t=l&loc0=VA
The above URL will give us a page with all the Bloggers in Vatican. Don't take my word for it, though. I could be wrong, or something may have changed since I wrote this entry. If you click on the above link and get a list of profiles that all have locations in Vatican, then you know it (still) works properly. Now that you know the "trick" (i.e. find the correct country code, insert it into the URL), you can build your own "custom" links, save them as bookmarks, etc.
Of course, if you really want to be slick about it, you could build your own search form web page with a drop down list of all the countries and their corresponding country codes. (Look for that topic in an entry next week.)
Tagged as
Blogger,
hacking,
profile search
Sunday, May 25, 2008
Website changes
Oh, forgot to mention-- I made some changes to the website.
Gee, thanks, Captain Obvious!
Yes, I know-- switched templates, color schemes, added new features, and then got sidetracked before I had time to sit down and write all about it.
This site no longer validates with the W3C validator tool.
No, it doesn't.
So what's up with that?
Basically, I could use a classic, simple template where I had complete control over all the HTML that appeared on the page-- but never use any fancy bells/whistles, or I could stop being such a hard-nose about my blog adhering to valid HTML and integrate features that might actually make adding interesting content and drawing traffic easier.
So you sold out . . . ?
Yeah, pretty much. :) But you've got to admit, adding the Twitter feed and Google Reader feeds to the page was pretty slick.
Maybe, but it's so . . . green.
What's wrong with green? I like green. It's my favorite color. Well, next to black, but black isn't really a color, is it? It's actually the absence of all color and/or light. So, technically speaking, green's my favorite color. As a matter of fact, a black suit with a green tie-- now there's an idea for a fashion statement.
Um, yeah-- it says, "Hi, I'm an Irish Ninja wannabe."
Don't be a hater. The template (Son of Moto, if I'm not mistaken) I'm using was actually designed by Zeldman (yes, that Zeldman), so even if my code won't currently pass validation, I'm still showing my solidarity by choosing the author of my template. If I find ways to tweak code and options so that they generate valid HTML, I will certainly do so-- just like I did for Google Analytics.
Okay, so it's got Google Reader and Twitter. What else did you do?
The name of the web site has changed from "An Error Occurred . . ." to simply "Jonah Chanticleer." The focus of the web site has changed since I first chose that site name back in 2003, and it didn't feel right to stick with it anymore-- sort of like false advertising, I guess. Don't worry-- only the name has changed; the site address and RSS feed locations and all that are staying the same, so no one has to change any settings.
I also added an archive widget on the right hand side of the page, so people can look back at past entries by month and year. I'm toying with the idea of adding additional widgets that integrate with photos and/or video clips-- but that's pending getting some special content on sites such as Picasa or YouTube.
Like what?
If I told you, it'd ruin the surprise.
Gee, thanks, Captain Obvious!
Yes, I know-- switched templates, color schemes, added new features, and then got sidetracked before I had time to sit down and write all about it.
This site no longer validates with the W3C validator tool.
No, it doesn't.
So what's up with that?
Basically, I could use a classic, simple template where I had complete control over all the HTML that appeared on the page-- but never use any fancy bells/whistles, or I could stop being such a hard-nose about my blog adhering to valid HTML and integrate features that might actually make adding interesting content and drawing traffic easier.
So you sold out . . . ?
Yeah, pretty much. :) But you've got to admit, adding the Twitter feed and Google Reader feeds to the page was pretty slick.
Maybe, but it's so . . . green.
What's wrong with green? I like green. It's my favorite color. Well, next to black, but black isn't really a color, is it? It's actually the absence of all color and/or light. So, technically speaking, green's my favorite color. As a matter of fact, a black suit with a green tie-- now there's an idea for a fashion statement.
Um, yeah-- it says, "Hi, I'm an Irish Ninja wannabe."
Don't be a hater. The template (Son of Moto, if I'm not mistaken) I'm using was actually designed by Zeldman (yes, that Zeldman), so even if my code won't currently pass validation, I'm still showing my solidarity by choosing the author of my template. If I find ways to tweak code and options so that they generate valid HTML, I will certainly do so-- just like I did for Google Analytics.
Okay, so it's got Google Reader and Twitter. What else did you do?
The name of the web site has changed from "An Error Occurred . . ." to simply "Jonah Chanticleer." The focus of the web site has changed since I first chose that site name back in 2003, and it didn't feel right to stick with it anymore-- sort of like false advertising, I guess. Don't worry-- only the name has changed; the site address and RSS feed locations and all that are staying the same, so no one has to change any settings.
I also added an archive widget on the right hand side of the page, so people can look back at past entries by month and year. I'm toying with the idea of adding additional widgets that integrate with photos and/or video clips-- but that's pending getting some special content on sites such as Picasa or YouTube.
Like what?
If I told you, it'd ruin the surprise.
Tagged as
Blogger,
valid HTML,
website
Sunday, December 2, 2007
Blogger, Web Standards, and "An Error Occurred . . . "
Yes, I know. Adding the "links to this post" feature has caused some pages on this site to fail W3C validation. The front page and archive summary pages still validate, but the individual permalink blog entries are now broken thanks to the unencoded ampersands in the "Create a Link" code auto-generated by Blogger. I can't fix the ampersands because they don't actually appear in the template code window that end users see. My options are basically:
- to remove that backlink feature entirely and run 100% standard compliant
- keep the feature and live with the shame of a site that fails to adhere to standards
- cajole/wheedle/nag/bribe the Blogger Team to fix their unencoded ampersands
- move to a new site and blogging tool entirely.
Tagged as
Blogger,
web standards
Wednesday, August 22, 2007
168 Hours, Part II?!
The most obvious answer, of course, is to run two blogs in parallel. One blog would be the standards-compliant, minimalistic blog, while the other blog has all the polls, lists and assorted gimmicks of the new Blogger Layout.
Too bad I can't seem to generate enough content to fill one blog on a semi-regular basis, let alone two of them. :(
Too bad I can't seem to generate enough content to fill one blog on a semi-regular basis, let alone two of them. :(
Tagged as
Blogger,
sexy features,
standards,
valid HTML
Tuesday, August 21, 2007
168 hours?!
I'm sitting here, looking at my blog, wondering how on earth it is even remotely possible that nearly an entire week has gone by since I last made an entry.
There was a time, not that long ago in the grand scheme of things, when I blogged compulsively nearly every day. I think part of it was that I had gone through a very nasty breakup and lost many people in my so-called "circle of friends." I wound up spending a lot of time blogging/journaling as a form of nepenthe. (If you don't know what that means, look it up, kid! :P)
But, time has passed. And, either I've got nothing left to say or I'm less willing to put just anything up on the wire.
I did, I should mention, spend several hours re-adjusting this blog so that it actually validates as proper HTML again. I know, I know-- unless you happen to be a serious web dweeb, that's no consolation for the lack of new content.
It's somewhat frustrating, actually. I'm a web development professional, so I try to advocate web standards wherever I go . . . and yet, popular tools such as Blogger almost never generate valid HTML. You literally have to use classic templates, turn off all but the most basic of features (using comments, for example, introduces links with un-encoded ampersands in the URLs, which fail to validate), in order to get your page successfully through a validator.
I'm of two minds on this. One says, screw all the bells and whistles and stick with a bare bones blog that validates. Campaign for the folks at Blogger to re-tool their features until they can be included in valid HTML. The other says, sell out and use all the sexy features like polls and YouTube includes and more, and just get as many eyeballs as you can on the web site.
Hmm. Stick to your guns and live in pretty much total web obscurity, or sell out and be popular.
Shit. I'm back in f*cking high school again, aren't I?
There was a time, not that long ago in the grand scheme of things, when I blogged compulsively nearly every day. I think part of it was that I had gone through a very nasty breakup and lost many people in my so-called "circle of friends." I wound up spending a lot of time blogging/journaling as a form of nepenthe. (If you don't know what that means, look it up, kid! :P)
But, time has passed. And, either I've got nothing left to say or I'm less willing to put just anything up on the wire.
I did, I should mention, spend several hours re-adjusting this blog so that it actually validates as proper HTML again. I know, I know-- unless you happen to be a serious web dweeb, that's no consolation for the lack of new content.
It's somewhat frustrating, actually. I'm a web development professional, so I try to advocate web standards wherever I go . . . and yet, popular tools such as Blogger almost never generate valid HTML. You literally have to use classic templates, turn off all but the most basic of features (using comments, for example, introduces links with un-encoded ampersands in the URLs, which fail to validate), in order to get your page successfully through a validator.
I'm of two minds on this. One says, screw all the bells and whistles and stick with a bare bones blog that validates. Campaign for the folks at Blogger to re-tool their features until they can be included in valid HTML. The other says, sell out and use all the sexy features like polls and YouTube includes and more, and just get as many eyeballs as you can on the web site.
Hmm. Stick to your guns and live in pretty much total web obscurity, or sell out and be popular.
Shit. I'm back in f*cking high school again, aren't I?
Tagged as
Blogger,
sexy features,
standards,
valid HTML
Subscribe to:
Posts (Atom)