"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.

Blogger Profile Search Interface

Show me all Bloggers in:
Select a country Afghanistan Albania Algeria American Samoa Andorra Angola Anguilla Antarctica Antigua and Barbuda Argentina Armenia Aruba Australia Austria Azerbaijan Bahamas Bahrain Bangladesh Barbados Belarus Belgium Belize Benin Bermuda Bhutan Bolivia Bosnia and Herzegovina Botswana Bouvet Island Brazil British Indian Ocean Territory British Virgin Islands Brunei Bulgaria Burkina Faso Burundi Cambodia Cameroon Canada Cape Verde Cayman Islands Central African Republic Chad Chile China Christmas Island Cocos Islands Colombia Comoros Congo Cook Islands Costa Rica Côte d'Ivoire Croatia Cuba Cyprus Czech Republic Denmark Djibouti Dominica Dominican Republic East Timor Ecuador Egypt El Salvador Equatorial Guinea Eritrea Estonia Ethiopia Falkland Islands Faroe Islands Fiji Finland France France, Metropolitan French Guiana French Polynesia French Southern Territories Gabon Gambia Georgia Germany Ghana Gibraltar Greece Greenland Grenada Guadeloupe Guam Guatemala Guinea Guinea-Bissau Guyana Haiti Heard Island And McDonald Islands Honduras Hong Kong Hungary Iceland India Indonesia Iran Iraq Ireland Israel Italy Jamaica Japan Jordan Kazakhstan Kenya Kiribati Kuwait Kyrgyzstan Laos Latvia Lebanon Lesotho Liberia Libya Liechtenstein Lithuania Luxembourg Macao Macedonia Madagascar Malawi Malaysia Maldives Mali Malta Marshall Islands Martinique Mauritania Mauritius Mayotte Mexico Micronesia Moldova Monaco Mongolia Montenegro Montserrat Morocco Mozambique Myanmar Namibia Nauru Nepal Netherlands Netherlands Antilles New Caledonia New Zealand Nicaragua Niger Nigeria Niue Norfolk Island North Korea Northern Mariana Islands Norway Oman Pakistan Palau Palestine Panama Papua New Guinea Paraguay Peru Philippines Pitcairn Poland Portugal Puerto Rico Qatar Reunion Romania Russia Rwanda Saint Helena Saint Kitts And Nevis Saint Lucia Saint Pierre And Miquelon Saint Vincent And The Grenadines Samoa San Marino Sao Tome And Principe Saudi Arabia Senegal Serbia Seychelles Sierra Leone Singapore Slovakia Slovenia Solomon Islands Somalia South Africa South Georgia And The South Sandwich Islands South Korea Spain Sri Lanka Sudan Suriname Svalbard And Jan Mayen Swaziland Sweden Switzerland Syria Taiwan Tajikistan Tanzania Thailand The Democratic Republic Of Congo Togo Tokelau Tonga Trinidad and Tobago Tunisia Turkey Turkmenistan Turks And Caicos Islands Tuvalu U.S. Virgin Islands Uganda Ukraine United Arab Emirates United Kingdom United States United States Minor Outlying Islands Uruguay Uzbekistan Vanuatu Vatican Venezuela Vietnam Wallis And Futuna Western Sahara Yemen Zambia Zimbabwe

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>