As the largest operator of WordPress blogs (over 10 million and counting), we receive a steady stream of requests from people looking for WordPress savvy web design and software development firms. In response we’ve started CodePoet, a directory of consultants who specialize in building beautiful and efficient WordPress sites.

CodePoet

So it actually raises attention to people and companies specialized on Wordpress development and websites creation. This new directory is a great way for you to promote your Wordpress related business and if combined good with the WP Pro mailing list and Wordpress Jobs Board, it can actually bring in a lot of opportunities.

How To Become One

Automatic says that in order to apply for listing you need to provide some info about:

• The name, country and primary language of your firm
• A sentence no more than 12 words to describe your business
• A link to a page that describes the WordPress related services you provide
• Samples of your WordPress work
• References

The first 3 points are obvious and there is no need for explanation. The last 2 points though can surely be covered in this post. What kind of samples and what references could be used?

Creativeg

Last month, a close friend of mine, Vasilis Kanonidis and his team, CreativeG, managed to become the first Wordpress certified consultants in Greece and I thought that he would be the right person to explain what you need and how you can become certified.

Vasilis told us that the process took a significant amount of time in order for creativeg to get into the codepoet directory. The timing was bad because they happened to apply for certification during the time that most of the attention is on the new Wordpress version. Vasilis says that to be listed on codepoet.com you need to have some good references that will prove your Wordpress development skills. Any Wordpress related project is a good reference.

References could be :

• Websites built with Wordpress
• Wordpress plugins
• Themes
• Good knowledge of the Wordpress API

At the time spoken, Creativeg has developed more than 15 Wordpress powered websites, 3 plugins and 2 themes freely available. Some references from customers were also provided to Automatic in order to verify the integrity of our application. If you have written any Wordpress related tutorials could also count in as a good reference.

When I asked Vasilis what the benefits of this listing are, he told me that it is a great way of promoting his job. People that visit codepoet.com are mainly looking for people who are specialized in Wordpress development so being listed there is a great way to shout a “Hello my name is Vasilis and I develop with Wordpress”.

What is next for Creativeg? More Wordpress and other Automatic products related services, plugins and themes. Creativeg is the team behind WordCamp.gr which is an effort to organize Wordpress events and camps in Greece, Wpfav.gr a Wordpress related bookmarking site and WpGreece.gr which is a showcase gallery of Wordpress designs from Greek designers.

Concluding, Vasilis summarizes what it needs to become a certified Wordpress consultant in 3 parts:

1) Study it

Wordpress is one of the most documented software packages out there. If you study the API and manage to get a good grip on it, then developing with Wordpress is something easy and fun.

2) Use it

Use Wordpress as much as you can. Wordpress is not just a blog. You can create nearly anything with it so use it all the way. Create something unique that will use Wordpress in a new way.

3) Sell it

Wordpress has good business potentials. Try to think of Wordpress as a tool that will pay back in the future. Provide services that are so professional that will bring money and visibility.

PEAR

We couldn’t write a post about PHP classes without PEAR. PEAR  stands for “PHP Extension and Application Repository” and the Web Services category is the place to get ready made classes for:

• Akismet
• Amazon
• Blogging
• Compete
• Delicious
• Digg
• eBay
• Facebook
• Google
• Twitter
• Yahoo
• Youtube

and many more.

Even though PEAR is a great resource for web services related classes, sometimes you might want to use another class that doesn’t rely on PEAR to do the job or a more sophisticated one. The list that follows has PHP classes for different web services.

Alexa

• Alexa Web Information Service
• Example Use of Web Information
• Example Use of Topsites

Amazon

• Amazon API

Babelfish

• Babelfish Translator

Bit.ly

• Bit.ly URL Shortening Service PHP library

Bing

• Bing API 1.1
• Mocha Bing API
• Bing API on codeplex

DeviantArt

• Retrieve Gallery Images
• Feed Parser

Digg

• Digg API Class

Drop.io

• Drop.io PHP Class

eBay

• eBay Data Retrieval

Facebook

• Facebook Notification Class
• Facebook Application Developer
• Facebook Official PHP Class
• Inbox Handler
• Open Inviter

Feeds

• Feed Validator
• Feedburner

Flickr

• Flickr API
• Flickr Parser
• Flickr Wrapper
• phpFlickr

FriendFeed

• FriendFeed API (Deprecated. Libs for PHP use the v1 API)

Google

• Zend Google Data APIs
• Charts
• Calendar
• Maps

Gravatar

• Gravatar API

ICQ

• ICQ Checker

Last.fm

• PHP Last.fm API
• Felix Brun’s PHP Lib

LinkedIn

• LinkmeIn

MSN

• MSN Checker

Prowl

• Prowl

reCAPTCHA

• reCaptcha PHP Library

Skype

• Skype Checker

Twitter

• Twitter PHP Class
• php-twitter
• My Twitter
• TwitterLib
• Twitter Client
• CodeIgniter Twitter Lib
• Twitter Async

Various Networks

• Contacts Importer from email accounts
• Open Inviter

Yahoo

• Messenger
• Social APIs PHP SDK

Bit.ly provides an excellent API that we can use to shorten our links programmatically. It also provides a method to expand an already shortened link. This is the method we will use to decrypt all bit.ly links on Twitter (it works on any page but it is Twitter that we most use ;) ).

It is nothing special, just 35 lines of code that will transform these small but cryptic links :

to these informative and more attractive to click on links:

The Bookmarklet

Again, nothing special. Just a function that appends a script element on the page to this file.

The book.js file

We need to get all links on the page and if the href value contains “bit.ly”. Then, we assign an id value to all links we found. This id will be used later to assign the correct href value to each link:

var as = document.getElementsByTagName("a");
for(var i=0; i<as.length; i++) {
 var a = as[i];
 if(a.href.indexOf("bit.ly")>=0){
 //set the id based on the hash
 var newid = /bit\.ly\/(.*)/i.exec(a.href);
 if(newid[1]){
 a.id = newid[1];
 getLink(a.href);
 }
 }
}

Next we need to create the function that will call the bit.ly API. Please notice the use of the callback parameter “bb”. This will allow us to handle the API response. Also notice that in my code I use the demo API key which might do the job but it would be better if you used your own key.

This function creates a script element and appends it to the head section of the page. This makes the API call to be executed:

function getLink(theurl,theid){
 var url = "http://api.bit.ly/expand?version=2.0.1&shortUrl="+theurl+"&login=bitlyapidemo&apiKey=R_0da49e0a9118ff35f52f629d2d71bf07&callback=bb";
 var x = document.createElement('script')
 x.src = url
 document.getElementsByTagName('head')[0].appendChild(x);
}

The next thing to do is to create the “bb” function that will do the trick. We go through the “a” elements on the page and if the href attribute contains “bit.ly” then we swap the link text with the expanded URL we got from bit.ly and we also change the href value:

var bb = function(e){
 var as = document.getElementsByTagName("a");
 for(var i=0; i<as.length; i++) {
 var a = as[i];
 if(a.href.indexOf("bit.ly")>=0){
 if(a.id){
 a.href = e.results[a.id].longUrl;
 a.innerHTML = a.href;
 }
 }
 }
}

That’s it! Now each time you click on the bookmarklet, all bit.ly links will be decrypted. I hope you find this useful as I did.

Twitter lacks some basic functionality that could really make it’s users life easier:

• The lack of retweet buttons (Twitter added this feature some days ago)
• Not being able to follow / unfollow someone directly from the timeline
• The plain simple textarea box with no shortcuts to major text editing options

are just some of the features that Twitter developers should reconsider adding to it. Thank god, Twitter provides a great API which made developing clients like SocialWhale possible.

What is Social Whale?

Social Whale is a privately funded start up from Greece. Founded in 2009, Social Whale tries to create an extended version of Twitter, where more advanced Twitter users can find more features than on classic Twitter. The project tries to create a Twitter API clone and extend it so that other Twitter clients will be able to collaborate with it too.

Social Whale is currently on a beta stage and you need to get invited in order to use the service. You can get invited either by following @SocialWhale on Twitter or by kindly asking a beta tester to invite you. We have 3 invites which we would be happy to give to anyone interested.

How is Social Whale better than Twitter?

Well, Social Whale is better because it provides most of Twitter’s missing features. One drawback is that it is bound by Twitter’s API limits but most of us (regular usage) will not notice it. Would you like to see what Social Whale does better than Twitter? The screenshot bellow will list some of them:

Here is an analysis of the features:

1,2) The Status Box re-invented

This is not the typical Twitter status box. As you can see, there is a bar of buttons beneath it. Starting from left to right, we have:

• Insert Image Button
  By clicking this button you can upload an image on Twitpic and use the URL generated from the service in your tweet without going around browser tabs to do it.
• Insert Special Char Button
  This one allows you to insert special chars (eg: ✽) in your tweets as described here.
• Shorten All URLs Button
  On the fly URL shortening. No need to go to external sites to shorten an URL in order to not exceed the 140 chars limit. Just click the button and all URLs in the Status box will be shortened at once, leaving valuable chars space left for your text.
• Post to Groups Button
  Groups is a Social Whale feature where you can assign your tweets. More on Groups later in this article.
• Check Spelling Button
  English, German, Italian, French, Finnish, Swedish and Greek languages are supported.

3) The Update Button

This is the typical Update button that you know from Twitter. The only difference is that it allows you to post something if it exceeds 140 chars. If the tweet includes a full URL, Social Whale will try to shorten it and then it tries to post to Twitter.

4) New Tweets Message

Anytime a new tweet is posted, this message informs you about the number of new tweets. It is not needed to click on it for new tweets to appear though. A visual clue about new tweets is displayed (6).

5) Timeline Select

You can choose which timeline to view with this select box. There are currently 4 major timelines to follow. These are:

• Friends Timeline
• Groups published
• Groups recent
• User Lists
  This one allows you to view a the timeline of a list you follow. It lists all your lists and the ones you follow.

6) New Tweets clue

A visual clue for new tweets.

7) Groups

Groups is a special Social Whale feature. It assigns tweets on groups based on…(Info from the developers needed)

8) Hash Tags Definitions

Each time a hash tag is available on a tweet, a blue icon appears on which when you mouse over, a tooltip appears where you can find a small definition about the tag and statistics.

9) API Usage Stats

A panel where API usage information is displayed. You can leverage the API usage by choosing update intervals.

10) People Search

A checkbox which once checked, will turn the search box into a people search box.

Wait, there’s more

Social Whale is more than that. More features are there for you to use. Do you miss your saved searches and trending topics? Just click on the search box:

Do you want to check new followers and quitters? Hover your followers link:

Retweeting in Social Whale is as simple as clicking a button, revising the tweet to be retweeted and click Update:

A Twitter Client or Something Bigger?

Social Whale can be set to :

• Post to and collaborate with other networks like:
  • Facebook
  • FriendFeed
  • Identi.ca
  • Youtube
  • Digg
  • Flickr
  • MySpace
  • Blogger
  • LinkedIn
  • Google
  • Picasa
• Shorten URLs with one of the 12 URL shortening services.

1) ShrinkTheWeb

ShrinkTheWeb is a free, easy to use and a high limits screenshots service that comes with great documentation and sample uses of the service to get you started at once. With this service, you can:

• Update screenshots if they are old. 5.000 updates per month
• 250.000 requests per month
• Top level and sub domain captures
• You have 6 sizes to choose from

As soon as you have registered with the service and logged in, there is a control panel for you with sample code on how to use the service, statistics about your usage of the service and links to available plugins and code to download and create your own service!

Sizes

Available sizes in the free plan are (bold text is the code to use with the API):

• 75 x 56 – mcr
• 90 x 67 – tny
• 120 x 90 – sm
• 200 x 150 – lg
• 320 x 240 – xlg

You get custom sizes and more options if you get the PRO plan.

Plugins

The service is available as a plugin for popular software like Drupal, vBulletin and Wordpress. There is also a Django plugin and ready PHP5 and PHP4 classes for you to use. This page here is the place to go and get them.

API

The easiest way to use the API is by passing your API key inside the src value of a IMG tag:

<img src='http://www.shrinktheweb.com/xino.php?embed=1&STWAccessKeyId=YOUR_KEY&stwsize=sm&stwUrl=http://www.bing.com'>

No problem if your API key shows up anywhere, since it only works with the URL you set in your control panel.

Here is a use of the service.

2) websnapr 2.0

WebSnapr 2.0

WebSnapr is one of the best services around. Not only it allows 100.000 screenshots per month with an API key, it allows you to use the service without a key too, and you can get up to 80 screenshots per hour!!! Websnapr can export thumbnails in 2 sizes when used as a free service and puts a branding on the snapshot.

Sizes

The sizes are:

• 90 x 70 – T and
• 202 x 152 – S

There are more sizes available on paid plans ranging from 90 x 70 to 1024 x 768, you can also change the branding on the snapshot with your own text if you use the premium plan.

Plugins

There are also a lot of ready made plugins and uses of the service for you to use. There are Wordpress, Drupal, Blogger and Windows Live Writer plugins available here.

API

In order to use the API, all you have to do is register with the service and get an API key. Then you will be able to use the service like this:

http://images.websnapr.com/?size=S&key=key&url=jeez.eu

Here is a demo use of the API.

3) Thumbalizr

Thumbalizr

Thumbalizr is the only service I found that supports full page screenshots. What does full page screenshots mean? This is a good example:

Even if not well documented yet (the service is in beta stage) the API seems to work pretty well. The best thing about the API is that allows you to choose any custom size ranging from 1 to 1280 to users with an API key and a ranging from 1-300 for users without an API key!!! Although the service is not so fast as the previous mentioned, it can surely attract a lot of attention since it looks quite promising.

There are 2 more plans with additional features like:

• Full Page Capture
• Quality setting
• Delay setting
• Capturing parts of a page

API

This table shows what features each plan supports and a typical usage of the API for a registered user with an API key is:

<img src="http://api.thumbalizr.com/?url=http://jeez.eu&width=1280&api_key=API_KEY" />

Give it a try here.

4) ThumbnailsPro

ThumbnailsPro

ThumbnailsPro is a premium snapshots service that provides a free version too.The paid version features full page screenshots, high speed and full capture of the page including : flash, javascript and silverlight objects.

The free service allows you to generate 100×75 thumbs for 1000 screenshots per month and the code needed to do this is:

<img src="http://thumbnailspro.com/thumb.php?url=jeez.eu&s=100" border="0" alt="website thumbnails" />

ThumbnailsPro requires that you place a link back to the service if you use the free service. This is an example use.

Anyone knows other snapshot services with free APIs? Please let us know.

<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script>

and then run a simple function upon page load:

function GetMap()
 {
 var map = new VEMap('myMap');
 map.LoadMap();
 }

See the default map here.

Loading a Specific Map

Loading a specific map is simple too. You can use the same tools discussed in our Google Maps from A to Z article to get your desired latitude and longitude and apply them to above function to center the map to a specific location :

function GetMap()
 {
 var map = new VEMap('myMap');
 map.LoadMap(new VELatLong(39.5130, 21.7021), 10 ,'h' ,false);
 }

This one loads a map of a village in Greece centered. See the map here.

Adding Pushpins and Tooltips

In the previous example, we centered our map to a village in Greece. Did you find out which village it was? I suppose not. What if we add a pushpin and a tooltip to give some basic information about a specific place? Well we can and we will because we must. Adding a tooltip to a map is done by using shapes:

function GetMap()
 {
 map = new VEMap('myMap');
 map.LoadMap(new VELatLong(39.5130, 21.7021), 10 ,'h' ,false);
 //We first need to create a layer. We will discuss about layers later
 CreateLayer();

 //Add a pushpin to the new layer
 shape = new VEShape(VEShapeType.Pushpin, map.GetCenter());
 shape.SetTitle('My village');
 shape.SetDescription('This is where Jeez.eu is moderated from');
 layer.AddShape(shape);
 }

 function CreateLayer()
 {
 layer = new VEShapeLayer();
 map.AddShapeLayer(layer);
 }

This is how the above map looks.

Using Custom Icons, Tooltips and Shapes

You can also use custom icons,tooltips and shapes in your maps. For example in order to add a custom icon in your map you have to point to an icon or create an icon with HTML :

function GetMap()
 {
 map = new VEMap('myMap');
 map.onLoadMap = AddPushpin;
 map.LoadMap(new VELatLong(39.5130, 21.7021), 10 ,'h' ,false);
 }

 function AddPushpin()
 {
 var shape = new VEShape(VEShapeType.Pushpin, map.GetCenter());

 var icon = "<div style='font-size:12px;font-weight:bold;border:solid 2px Black;background-color:red;width:100px;'>Jeez.eu Headquarters</div>";
 //Set the icon
 shape.SetCustomIcon(icon);

 //Set the info box
 shape.SetTitle("<h2>Custom Pin</h2>");
 shape.SetDescription("A simple tooltip");

 //Add the shape the the map
 map.AddShape(shape);
 }

See the example here.

and to make this example even better, we can add custom tooltips too:

function GetMap()
 {
 map = new VEMap('myMap');
 map.onLoadMap = AddPushpin;
 map.LoadMap(new VELatLong(39.5130, 21.7021), 10 ,'h' ,false);
 }

 function AddPushpin()
 {
 var shape = new VEShape(VEShapeType.Pushpin, map.GetCenter());

 var icon = "<div style='font-size:12px;font-weight:bold;border:solid 2px Black;background-color:red;width:100px;'>Jeez.eu Headquarters</div>";
 //Set the icon
 shape.SetCustomIcon(icon);
//This is where we set the contents of the tooltip. We can use plain HTML here :)
 var infobox = "<div style='width:309px;'>A preview of Jeez.eu</div>"
 +"<iframe src='http://jeez.eu' width='309px' height='272px' ></iframe>";

 //Set the info box
 map.ClearInfoBoxStyles();
 shape.SetTitle("<h2>About Jeez.eu</h2>");
 shape.SetDescription(infobox);

 //Add the shape the the map
 map.AddShape(shape);
 }

and create something like this.

Adding custom shapes to maps is trivial for successful maps. We can create polygons and other shapes to mark an area easily. For example :

function GetMap()
 {
 map = new VEMap('myMap');
 map.onLoadMap = AddPolygon;
 map.LoadMap(new VELatLong(39.5130, 21.7021), 10 ,'h' ,false);
 }

 function AddPolygon()
 {
 var ll = map.GetCenter();
 var lat = ll.Latitude;
 var lon = ll.Longitude;

 var shape = new VEShape(VEShapeType.Polygon, [new VELatLong(lat,lon-0.15),
 new VELatLong(lat+0.1,lon-0.05),
 new VELatLong(lat+0.1,lon+0.05),
 new VELatLong(lat,lon+0.15),
 new VELatLong(lat-0.1,lon+0.05),
 new VELatLong(lat-0.1,lon-0.05)]);

 //Set the line color
 var lineColor = new VEColor(254,78,64,Math.random());
 shape.SetLineColor(lineColor);

 //Set the line width
 var lineWidth = Math.round(3);
 shape.SetLineWidth(lineWidth);

 //Set the fill color
 var fillColor = new VEColor(64,168,255,Math.random());
 shape.SetFillColor(fillColor);

 var icon = "<div style='border:1px solid red;'>Jeez</div>";
 //Set the icon
 shape.SetCustomIcon(icon);

 //Set the info box
 shape.SetTitle("<h2>Custom Pin</h2>");
 shape.SetDescription("Sample tip");
 //Add the shape the the map
 map.AddShape(shape);
 }

This is a polygon here.

Using XML to specify Locations on the map

As with Google Maps, Bing Maps also support XML data to be loaded. So the most interesting example is this of the mountaineers. We use a GeoRSS XML file with their locations and load them to our map. A typical GeoRSS file looks like this:

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom"
 xmlns:georss="http://www.georss.org/georss">
 <title>Earthquakes</title>
 <subtitle>International earthquake observation labs</subtitle>
 <link rel="nofollow" href="http://example.org/"/>
 <updated>2005-12-13T18:30:02Z</updated>
 <author>
 <name>Dr. Thaddeus Remor</name>
 <email>tremor@quakelab.edu</email>
 </author>
 <id>urn:uuid:60a76c80-d399-11d9-b93C-0003939e0af6</id>
 <entry>
 <title>M 3.2, Mona Passage</title>
 <link rel="nofollow" href="http://example.org/2005/09/09/atom01"/>
 <id>urn:uuid:1225c695-cfb8-4ebb-aaaa-80da344efa6a</id>
 <updated>2005-08-17T07:02:32Z</updated>
 <summary>We just had a big one.</summary>
 <georss:point>45.256 -71.92</georss:point>
 </entry>
</feed>

You can learn more about GeoRSS at the official page of the format. For our example, we will use this file. The code needed is:

function GetMap()
 {
 map = new VEMap('myMap');
 map.onLoadMap = AddMyLayer;
 map.LoadMap(new VELatLong(46.3081, -122.1928), 12);
 }

 function AddMyLayer()
 {
 var l = new VEShapeLayer();
 var veLayerSpec = new VEShapeSourceSpecification(VEDataType.GeoRSS, "http://seotests.writer.gr/bingmaps/georsstest.xml", l);
 map.ImportShapeLayerData(veLayerSpec, onFeedLoad);
 }
 function onFeedLoad(feed)
 {
 document.getElementById('msg').innerHTML = 'RSS or Collection loaded. There are ' + feed.GetShapeCount() + ' items in this list.';
 }

Lets break down the code above. First, we create our map and assign a callback function upon load of the map:

map.onLoadMap = AddMyLayer;

Then, we add the AddMyLayer function and with this function we create a new shape. We set the layer specification to be a GeoRSS type and we also give the path to the XML file. The data will be loaded in our layer. Then we import our layer and assign a callback function named onFeedLoad which will inform us about the number of the loaded items.

Here it is.

Searching Our Maps

Bing also allows us to search our maps. We can search about anything on our maps. From area names to exact addresses and from general queries like “flowers” or “stadium” to reverse searches. This is an example of a maps search engine :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
 <head>
 <title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script>
 <script type="text/javascript">
 var map = null;

 function GetMap()
 {
 map = new VEMap('myMap');
 map.LoadMap();
 }

 function FindLoc()
 {
 try
 {
 map.Find(null, document.getElementById('txtWhere').value);
 }
 catch(e)
 {
 alert(e.message);
 }
 }
 </script>
 </head>
 <body onload="GetMap();">
 <div id='myMap' style="position:relative; width:400px; height:400px;"></div>
 <INPUT id="txtWhere" type="text" name="txtWhere">
 <INPUT id="find" type="button" value="Find" name="find" onclick="FindLoc();">
 </body>
</html>

and you can check it here.

Think the 2 parameters of the map.Find method as :

• What and
• Where

You can change the order of the parameters in map.Find to search for locations related to your queries on the map already rendered. For example:

map.Find( document.getElementById('txtWhere').value,null);

and you can also use the map.Find method like this:

map.Find( document.getElementById('txtWhere').value,document.getElementById('txtWhere').value);

using both What and Where.

Reverse Find

Reverse find is a great way to showcase maps interaction. You can add event listeners to your map with the map.AttachEvent method. The example below shows a map of Athens, Greece and when you click on it, a message box appears with the name of the street.

function GetMap()
 {
 var map = new VEMap('myMap');
 map.LoadMap(new VELatLong(37.9829, 23.7167), 15 ,'h' ,false);

 map.AttachEvent("onclick", PixelClick);

 }

 function PixelClick(e)
 {
 var x = e.mapX;
 var y = e.mapY;
 var pixel = new VEPixel(x, y);
 var LL = map.PixelToLatLong(pixel);

 map.FindLocations(LL, GetResults);

 }

 function GetResults(locations)
 {
 var s="Street Name: ";
 if(locations != null)
 {
 s+=locations[0].Name;

 }
 else
 {
 s+="No Result found.";
 }

 alert(s);
 }

You can try it here.

Using Bing Maps to Get Directions

Getting directions with Bing Maps is as easy as this:

function GetMap()
 {
 map = new VEMap('myMap');
 map.LoadMap();

 map.GetDirections(["Trikkala", "Athens", "Kaisariani"]);
 }

This example will get the directions from my town (Trikkala, which is wrong as the name is spelled with one “k” not with 2) to Kaisariani, Athens. Try it here.

Bing Maps come with some cool features. For example there is BirdsEye feature which allows us to get images from a territory from an angle and it also supports changing the orientation of the images. Another great feature is the 3D mode which allows you to explore maps as if you were in the map. You can create collections and save them to videos.

You can read more about the Bing Maps API and SDKs or download the Bing Maps Datasheet. I hope you use what you learned to build an awesome application. If you do, please let us know!

Robbots:

• Calcbot
  This might prove to be a time saver when you need to calculate a very hard calculation like : 5 + 2 (3^5)%6 . All you have to do is add “—” after the equal sign. eg: 5 + 2 (3^5)%6=— and Calcbot will answer it.
• i-cron
  Evaluates Python expressions. Looks at blips in event, searches for CALC() macros and executes Python code using exec().
• kasyntaxy
  Awesome robot. It does syntax highlighting of a variaty of languages like : Python, C, C++,JavaScript,Java and more. Must have tool for developers.
• Plotzie
  Plotzie creates sparklines from data that you give to it inside a wave.
• WaveAlpha
  This bot will use WolframAlpha’s knowledge to get results for anything you ask.
• WaveGroupy
  The bot automatically adds a group widget, which you can use to browse the neighbourhood, and add/remove your wave to groups.
• Link – Easy Robot
  Multifunctional robot with optional panel and live easycode to perform with. like make-public, emoticon, sweepy-empty, lock-title, insert gadget and more.
• Rssybot
  Great tool for using wave as a feed reader. You add the robot with the extensions installer and then you have another option under the New Wave button. Enter a feed URL and press subscribe. Every new feed entry will show up as a blip in your wave.
• Wave Live Messenger
  Your friends don’t have a Google Wave account yet? No problem. With this extension, you can talk to them on their MSN right from your waves.
• Aunt Rossie
  Translate languages.
• Bit.ly Bot
  Shorten URLs from within your waves.
• Chart Bot
  Used to display various charts and diagrams based on Google Visualization API within a wave.
• XMPP
  Allows you to subscribe to waves so that your receive notifications via XMPP when users modify them.

Gadgets:

• Approver
  This gadget will add a vote feature to any blip you add it so people can upvote or downvote you.
• HTML
  Allows you to embed HTML in any wave and edit it whenever you want. This is a great tool for working on files with others.
• iFrame
  You can load any webpage as an iframe inside a wave.
• iWave
  Link your Facebook account with Google Wave.
• Vector Editor
  A real time vector graphics editor.

Firefox Add-ons:

• Google Wave Notifier
  If you have a Google Wave account, enter your login and password in the settings and it will log you in and notify you of new wavelets in your inbox.
• WiseStamp
  Enables you to share your Google Wave contact info in your email signature.

Chrome Add-ons:

• Google Wave Scrollbars
  Converts wave scrollbars to the default system scrollbars.
• Google Wave Checker
  The same as Google Wave Notifier in Firefox.

The Web, was another killer invension. Some new technologies that recently came out promise to re-invent the web and we will make an effort to showcase them here. We will also try to imagine some supporting products that these technologies might produce.

Select * from internet with YQL

One of the most promising technologies out there, is Yahoo’s YQL. Many people including me, believe that this platform is the next big thing. You can do thousand of diferrent things with YQL in so many diferrent areas that the moto is really “select * from internet”. The philosofy behind YQL is that anyone can make his data available for everyone in a specific way, so specific that someone who wants to access these data, should just use an SQL-syntax like language to get do it.

So YQL turns the web into a monsterous database waiting there for us to query it. How is this possible? Each web service should produce a datatable with a specific format, which then other people can use to extract, insert or update data. We see hundreds of community tables available in the YQL console.

In what way could YQL change the web? What if you used YQL to create a hotel booking site? Hotels could create datatables that would make hotels reservations, available rooms and pricing info available. Then we could do a YQL statement like this to get available rooms in San Fransisco:

SELECT * FROM hotels.rooms.sf WHERE room=open

The above example is fictional. YQL could be used in any way you would use a typical SQL database. Our article about how to use yql to manage your meme account will get you into it even faster.

Take the web back with Opera Unite

Opera Unite is able to turn your browser (Opera) into a web server. This means you can share content directly with friends without having to upload anything to a Web site. Opera Unite is a Web server running inside the Opera Web browser, allowing the user to install applications and share these applications with their friends and colleagues (or everyone, if they wish). The Opera Unite server provides a proxy between the server and its clients (found at operaunite.com) to avoid the need for any special firewall configuration.

So in other words, you run your own hosting service. You can use standard techniques like JavaScript and HTML to create applications and then publish them for the world to see right from your own browser. There are already a some applications that utilize the Opera Unite API and my favorite one is Twicli.

Most of the Opera Unite use cases could be for social networking but it could be used as a collaboration tool too.

Collaborate with Google Wave

Google Wave is an online tool for real-time communication and collaboration. A wave can be both a conversation and a document where people can discuss and work together using richly formatted text, photos, videos, maps, and more. With Google wave the possibilities are endless since the wave API allows you to build anything you want.

Google Wave supports robots, gadgets,extensions and embeding that makes it so powerful for online collaboration that any other tool could be. We recently posted a tutorial on how to create a feed reader extension for Google Wave too.

Recently there was a post in the ReadWriteWeb blog with a use case of Google Wave for artists and Filmmaking and everyday there are new ideas on how Wave could be used.

Re-inventing RSS with PubSubHubBub

Except it’s strange name, this protocol promises to deliver updates from feeds without polling. So it basically allows us to be informed if our favorite blog has updated news without the need to reload this blog’s feed. It uses this flow (taken from Scripting.com):

1. Any feed that wants to participate in this network must add a bit to the feed that indicates which ping server is handling notifications on its behalf. There can be more than one.
2. When a subscribing application initially parses the feed and notices this bit, it sends a notification to each server saying “I want to be notified when this feed updates”.
3. When the feed updates, it pings each of the servers it has registered with saying “I have updated”.
4. The server then pings each of the subscribers saying “He updated”.

At Scripting.com they say that this protocol could be used to create a Twitter-like service without Twitter’s limitations of 140 chars or hashtags. We thought of another use also.

What about creating a REAL real-time search engine that would update it’s index anytime a feed is updated? This way, we could have a search engine that will be able to show the latest news in seconds after the news got published.

HTML5

The new HTML specification is here and it brings marvelous new features to use. Canvas, Video, Audio and Drag n Drop are some of it’s features that will surely change the way we surf the net. One of it’s coolest features is the ability to cache web applications and use them offline. It is not weird that technologies like Google Wave depend on HTML5 to exist.

Apart from being the tool to create revolutionary applications and services, HTML5 is itself a revolution. Many browser players are contributing to the creation of the draft (Apple, Microsoft, Mozilla and Opera), each from his own point of view and interest but they all try to make this a great new era for the web.

Refinements

Refinements AKA search suggestions are little tips that we show to our users to help them narrow their search. For example, if someone searches for “python”, our search engine does not know if the user is looking for the snake family of pythons or the programming language. So, we could help our users refine their search by providing some search suggestions like:

• python language
• python programming
• python tutorial
• python snake
• etc

To create refinements you need to either add them through the control panel or by using an annotations XML file. The code needed to add each refinement label is:

<Facet>
 <FacetItem title="Lectures">
 <Label name="lectures" mode="BOOST" weight="0.8"/></Label>
 </FacetItem>
 </Facet>

The Facet element has this structure:

• Facet
  • FacetItem - The refinement link that is displayed at the top of the results page.
    • Label name
      • Rewrite
      • IgnoreBackgroundLabels
    • Redirect

Each Facet elements can have up to four FacetItem child elements. You can create as many refinement labels as you want and display up to 16 refinement links in the search results page. Here is an example on how we can add the above example to a custom search engine file:

<CustomSearchEngine>
 <Title>Universities</Title>

 <Context>

 <Facet>
 <FacetItem title="Lectures">
 <Label name="lectures" mode="BOOST" weight="0.8">
 <Rewrite>lecture OR lectures</Rewrite>
 </Label>
 </FacetItem>
 </Facet>

 <Facet>
 <FacetItem title="Assignments">
 <Label name="assignments" mode="BOOST" weight="0.8">
 <Rewrite>homework OR assignment OR assignments</Rewrite>
 </Label>
 </FacetItem>
 </Facet>

 <BackgroundLabels>
 <Label name="_cse_omuauf_lfve" mode="FILTER"/>
 <Label name="_cse_exclude_omuauf_lfve" mode="ELIMINATE"/>
 </BackgroundLabels>

 </Context>

 </CustomSearchEngine>

Tagging Sites With Refinement Labels

You can tag sites with refinement labels. Each annotation can have multiple labels, which means that the same site can be used in other search engines and be ranked differently. This example shows how to do this in the annotations file:

<Annotations>
 <Annotation about="webcast.berkeley.edu/*" score="1">
 <Label name="university_boost_highest"/>
 <Label name="lectures"/>
 </Annotation>

 <Annotation about="www.youtube.com/ucberkeley/*" score="1">
 <Label name="university_boost_highest"/>
 <Label name="videos_boost_mid"/>
 <Label name="lectures"/>
 </Annotation>
</Annotations>

Appending Search Queries

If you want to help your users by providing refinement links that add helpful search terms to their queries, you can use the Rewrite element in your refinements. The element appends the search terms to your users’ queries when they click a refinement link. The Rewrite element can have up to 100 characters, all of which should be lowercase, except for uppercase search operators such as OR. So based on the refinement labels we can use the rewrite child element and do this:

<Facet>
 <FacetItem title="Homework">
 <Label name="assignments" mode="BOOST">
 <Rewrite>homework OR assignment</Rewrite>
 </Label>
 </FacetItem>
 </Facet>

Now. Each time the user clicks on the Homework refinement link, the query will be appended with “homework OR assignment”. This way, our search engine will show more relevant results  than it would for just homework.

Redirecting Search Queries

You can also redirect the user to another site when he/she clicks on a refinement label. For example you can redirect a user to the PHP Manual when he clicks on the refinement link. This can be done like this:

<CustomSearchEngine>
 <Title>Universities</Title>
 <Context>
 <Facet>
 <FacetItem title="Manual">
 <Label name="manual" mode="FILTER"/>
 <Redirect url="http://php.net/manual/en/$q"/>
 </FacetItem>
 </Facet>
 </Context>
</CustomSearchEngine>

Using Synonyms

You can expand your users’ search queries by using synonyms, which are variants of a search term. This helps the users since when a user searches for “photoes” our search engine will bring up results for “images”, “landscapes” and “screenshots” too. While the example mentioned is many times handled by Google itself, some other words might not. So for example a user that searches for “sf” might sometimes looking for Symfony, others for Sourceforge and some other times for San Francisco. It is up to you to determine what you want the engine to bring up based on your audience. To add synonyms you must add the code in the Context file of your CSE.

Example:

<Synonyms>
 <SynonymEntry word="stock">
 <Synonym>equity</Synonym>
 <Synonym>share</Synonym>
 </SynonymEntry>
 </Synonyms>

Each query term (SynonymEntry element) can have with up to ten variants (Synonym elements). The variants could be single words or phrases. You can define multiple query terms, so long as you not exceed a total of 500 variants.

Creating Special Results

For any reason, you might want to bring a search result that you think that it answers your user’s queries to the top by creating special results. The two types of special results are:

• Promotions - simple results with links to relevant webpages.
• Subscribed links – result snippets for a set of queries. Subscribed Links directly answers your users’ questions and save them from some research work. A type of subscribed link is this one that answers the question to everything.

Before you start creating special results, determine which type best suits your needs. Promotions are simpler and easier to create, while subscribed links have richer features but require significantly more planning, development, and troubleshooting.

Promotions

Unlike other Custom Search features, you create the XML for promotions not in the context file nor the annotations file, but in its own file. The following code describes promotions for a search engine on programming tutorials:

<Promotions>
 <Promotion id="1"
 queries="tutorial, programming tutorial"
 title="Programming Tutorials"
 url="http://jeez.eu/category/tutorials/"
 description="Programming tutorials for PHP, JavaScript, Web Services and more..."
 image_url="http://d.yimg.com/cc/img/resize/SIG=1395nor9l/*/74x74/http%3A%2F%2Fd.yimg.com%2Fgg%2Fjeeztech%2Favatars%2F52141fe00e1281a84745259ab5eec6b46e23c412.png" />
 <Promotion id="2"
 queries="css,css tutorial"
 title="CSS Tutorials"
 url="http://www.smashingmagazine.com/category/css/"
 description="CSS tutorials" />
</Promotions>

You can have up to 2,000 promotions in your account. You can allocate the promotions across the search engines in your account any way you like. Let’s say you have two search engines in your account. You can apportion 2,000 promotions to one search engine and nothing to the other; or you can apportion up to 1,000 promotions to each search engine.

Subscribed Links

To better understand the subscribed links feature, just go to Google and search for “AJAX”. The first result is the “AJAX (programming)” article on wikipedia. If you wanted your users to get info about the AJAX hero, you could use a subscribed link to do this.

To enable the subscribed links you created using the control panel:

1. Go to the Basics tab.
2. Select the Enable special results, such as subscribed links and promotions check box.
3. Click Save Changes.

and to add them in the context file you should do something like this :

<CustomSearchEngine volunteers="false">
 <Title>...</Title>
 <Description>...</Description>
 <Context>...</Context>
 <SubscribedLinks>
 <SubscribedLink creator="017771777217723414381"/>
 </SubscribedLinks>
</CustomSearchEngine>

You can find the SubscribedLink creator id you should download the context file generated by the control panel and find the creator attribute of the CustomSearchEngine element.

Creating a Demo Search Engine

As we promissed, we are going to create a demo search engine that will facilate most of what we learned through these two articles about custom search engines. Try this search engine. Try to search for something that has to do about programming and also try searching for “css”,”css tutorial”,”tutorial” and “programming tutorial”.

These are the files:

Annotations file

<?xml version="1.0" encoding="UTF-8" ?>
<Annotations start="0" num="21" total="21">
 <Annotation about="*.jeez.eu/*" timestamp="0x000476ee0956ea94" href="CgsqLmplZXouZXUvKhCU1dvK4N2dAg">
 <Label name="_cse_ytl_pcjhu6w" />
 <AdditionalData attribute="original_url" value="jeez.eu" />
 </Annotation>
 <Annotation about="www.scala-lang.org/node/198*" timestamp="0x000476edc86a7b49" href="Chx3d3cuc2NhbGEtbGFuZy5vcmcvbm9kZS8xOTgqEMn2qcPc3Z0C">
 <Label name="manual" />
 <Label name="_cse_ytl_pcjhu6w" />
 <AdditionalData attribute="original_url" value="http://www.scala-lang.org/node/198" />
 </Annotation>
 <Annotation about="groovy.codehaus.org/Documentation*" timestamp="0x000476edc7508a05" href="CiJncm9vdnkuY29kZWhhdXMub3JnL0RvY3VtZW50YXRpb24qEIWUwrrc3Z0C">
 <Label name="manual" />
 <Label name="_cse_ytl_pcjhu6w" />
 <AdditionalData attribute="original_url" value="http://groovy.codehaus.org/Documentation" />
 </Annotation>
 <Annotation about="guides.rubyonrails.org/*" timestamp="0x000476edc3b646e8" href="ChhndWlkZXMucnVieW9ucmFpbHMub3JnLyoQ6I3ZndzdnQI">
 <Label name="manual" />
 <Label name="_cse_ytl_pcjhu6w" />
 <AdditionalData attribute="original_url" value="http://guides.rubyonrails.org/" />
 </Annotation>
 <Annotation about="java.sun.com/docs/books/tutorial/*" timestamp="0x000476edc11894bc" href="CiJqYXZhLnN1bi5jb20vZG9jcy9ib29rcy90dXRvcmlhbC8qELyp4ojc3Z0C">
 <Label name="manual" />
 <Label name="_cse_ytl_pcjhu6w" />
 <AdditionalData attribute="original_url" value="http://java.sun.com/docs/books/tutorial/" />
 </Annotation>
 <Annotation about="php.net/docs.php" timestamp="0x000476edbfe2de08" href="ChBwaHAubmV0L2RvY3MucGhwEIi8i__b3Z0C">
 <Label name="manual" />
 <Label name="_cse_ytl_pcjhu6w" />
 <AdditionalData attribute="original_url" value="http://php.net/docs.php" />
 </Annotation>
 <Annotation about="*.google.com/*" score="1" timestamp="0x000476afacb2e2c1" href="Cg4qLmdvb2dsZS5jb20vKhDBxcvl-tWdAg">
 <Label name="_cse_cew2vi6nsvu" />
 <AdditionalData attribute="original_url" value="http://google.com" />
 </Annotation>
 <Annotation about="www.ajaxgear.com/*" score="1" timestamp="0x000476af5a53644a" href="ChJ3d3cuYWpheGdlYXIuY29tLyoQysjN0vXVnQI">
 <Label name="_cse_ytl_pcjhu6w" />
 <AdditionalData attribute="original_url" value="http://www.ajaxgear.com" />
 </Annotation>
 <Annotation about="qooxdoo.oss.schlund.de/*" score="1" timestamp="0x000476af5a536444" href="Chhxb294ZG9vLm9zcy5zY2hsdW5kLmRlLyoQxMjN0vXVnQI">
 <Label name="_cse_ytl_pcjhu6w" />
 <AdditionalData attribute="original_url" value="http://qooxdoo.oss.schlund.de" />
 </Annotation>
 <Annotation about="www.zimbra.com/*" score="1" timestamp="0x000476af5a53643e" href="ChB3d3cuemltYnJhLmNvbS8qEL7IzdL11Z0C">
 <Label name="_cse_ytl_pcjhu6w" />
 <AdditionalData attribute="original_url" value="http://www.zimbra.com" />
 </Annotation>
 <Annotation about="cpaint.booleansystems.com/*" score="1" timestamp="0x000476af5a536437" href="ChtjcGFpbnQuYm9vbGVhbnN5c3RlbXMuY29tLyoQt8jN0vXVnQI">
 <Label name="_cse_ytl_pcjhu6w" />
 <AdditionalData attribute="original_url" value="http://cpaint.booleansystems.com/" />
 </Annotation>
 <Annotation about="www.plextk.org/*" score="1" timestamp="0x000476af5a536432" href="ChB3d3cucGxleHRrLm9yZy8qELLIzdL11Z0C">
 <Label name="_cse_ytl_pcjhu6w" />
 <AdditionalData attribute="original_url" value="http://www.plextk.org/" />
 </Annotation>
 <Annotation about="script.aculo.us/*" score="1" timestamp="0x000476af5a53642b" href="ChFzY3JpcHQuYWN1bG8udXMvKhCryM3S9dWdAg">
 <Label name="_cse_ytl_pcjhu6w" />
 <AdditionalData attribute="original_url" value="http://script.aculo.us/" />
 </Annotation>
 <Annotation about="www.bosrup.com/web/overlib/*" score="1" timestamp="0x000476af5a536424" href="Chx3d3cuYm9zcnVwLmNvbS93ZWIvb3ZlcmxpYi8qEKTIzdL11Z0C">
 <Label name="_cse_ytl_pcjhu6w" />
 <AdditionalData attribute="original_url" value="http://www.bosrup.com/web/overlib/" />
 </Annotation>
 <Annotation about="moofx.mad4milk.net/*" score="1" timestamp="0x000476af5a53641d" href="ChRtb29meC5tYWQ0bWlsay5uZXQvKhCdyM3S9dWdAg">
 <Label name="_cse_ytl_pcjhu6w" />
 <AdditionalData attribute="original_url" value="http://moofx.mad4milk.net/" />
 </Annotation>
 <Annotation about="bennolan.com/behaviour/*" score="1" timestamp="0x000476af5a536416" href="ChhiZW5ub2xhbi5jb20vYmVoYXZpb3VyLyoQlsjN0vXVnQI">
 <Label name="_cse_ytl_pcjhu6w" />
 <AdditionalData attribute="original_url" value="http://bennolan.com/behaviour/" />
 </Annotation>
 <Annotation about="developer.berlios.de/projects/bajax/*" score="1" timestamp="0x000476af5a53640d" href="CiVkZXZlbG9wZXIuYmVybGlvcy5kZS9wcm9qZWN0cy9iYWpheC8qEI3IzdL11Z0C">
 <Label name="_cse_ytl_pcjhu6w" />
 <AdditionalData attribute="original_url" value="https://developer.berlios.de/projects/bajax/" />
 </Annotation>
 <Annotation about="www.dojotoolkit.org/*" score="1" timestamp="0x000476af5a536406" href="ChV3d3cuZG9qb3Rvb2xraXQub3JnLyoQhsjN0vXVnQI">
 <Label name="_cse_ytl_pcjhu6w" />
 <AdditionalData attribute="original_url" value="http://www.dojotoolkit.org/" />
 </Annotation>
 <Annotation about="www.mochikit.com/*" score="1" timestamp="0x000476af5a536400" href="ChJ3d3cubW9jaGlraXQuY29tLyoQgMjN0vXVnQI">
 <Label name="_cse_ytl_pcjhu6w" />
 <AdditionalData attribute="original_url" value="http://www.mochikit.com/" />
 </Annotation>
 <Annotation about="openrico.org/rico/home.page" score="1" timestamp="0x000476af5a5363f9" href="ChtvcGVucmljby5vcmcvcmljby9ob21lLnBhZ2UQ-cfN0vXVnQI">
 <Label name="_cse_ytl_pcjhu6w" />
 <AdditionalData attribute="original_url" value="http://openrico.org/rico/home.page" />
 </Annotation>
 <Annotation about="prototype.conio.net/*" score="1" timestamp="0x000476af5a5363eb" href="ChVwcm90b3R5cGUuY29uaW8ubmV0LyoQ68fN0vXVnQI">
 <Label name="_cse_ytl_pcjhu6w" />
 <AdditionalData attribute="original_url" value="http://prototype.conio.net" />
 </Annotation>
</Annotations>

Context File

<?xml version="1.0" encoding="UTF-8" ?>
<CustomSearchEngine id="ytl_pcjhu6w" creator="014105238919074316991" keywords="php programming &quot;web development&quot;" language="en" encoding="UTF-8">
 <Title>JSLSE</Title>
 <Description>JavaScript Libraries Search Engine</Description>
 <Context>
 <Facet>
 <FacetItem>
 <Label name="manual" mode="BOOST">
 <Rewrite>&quot;php manual&quot; OR &quot;java manual&quot; OR &quot;ruby manual&quot; OR &quot;groovy manual&quot; OR &quot;scala manual&quot; OR &quot;python manual&quot;</Rewrite>
 </Label>
 <Title>Manual</Title>
 </FacetItem>
 </Facet>
 <BackgroundLabels>
 <Label name="_cse_ytl_pcjhu6w" mode="BOOST" />
 <Label name="_cse_exclude_ytl_pcjhu6w" mode="ELIMINATE" />
 </BackgroundLabels>
 </Context>
 <LookAndFeel>
 <Promotions show_image="true" show_snippet="true" />
 </LookAndFeel>
 <SubscribedLinks>
 <SubscribedLink creator="014105238919074316991" />
 </SubscribedLinks>
 <AdSense />
 <EnterpriseAccount />
</CustomSearchEngine>

To create a Google custom search, there are some simple steps you have to follow. First of all, you have to go to the Custom Search website and click on the “Create a Custom Search Engine” button. The next screen will ask you some things about your search engine:

• Search Engine Name
• Search Engine Description
• Search Engine Language
• What do you want to search
  This is where you decide where your search engine will look for results. There are 2 options:
  • Entire web
  • Only sites I select
• Select some sites
  • Here you put the sites your search engine will look into. Put one site per line. You can also use wildcards for searching entire domains (eg: *.domain.com), entire sites (eg: www.domain.com/*) or parts of sites (eg: www.domain.com/*2009* for all pages within 2009).
• Select an edition
  This is where you specify the type of the search engine to use. There are 2 options here:
  • Standard Edition: Free with ads
  • Business Edition: Starts at $100 per year, no ads on results pages.

The next screen will let you tryout your search engine. If the results are what you expected, you press on the “Finish” button and you are done. Your search engine is ready. A list with all your search engines will be displayed and you can visit it by just clicking on it’s name.

Some Custom Search Engines Worth Visiting

Here is a list of some neat engines we found and one that we created for you:

• WordPress Plugin Repository – Searches wordpress.org plugin repository, for lack of a proper search engine
• Wordpress Search – Search for sites relevant to wordpress development and deployment.
• Drupal Developer Search Engine – Search engine for Drupal developers to search many Drupal related sites.
• Search Drupal Modules – Ever had trouble finding that Drupal module you know just has to exist? Someone must have already created it… well now you can find it!
• Twitter Search – A Twitter Search Engine.
• Java Search Engine – Java Programmers and Technical Search.
• JSLSE - Our custom search engine. This one searches more than 10 JavaScript Libraries sites.

Beyond Simple CSEs

After your custom search engine creation, you can use various tools to personalize your search engine. For example you can change it’s look and feel, add annotations, link the search engine to your Adsense account and earn money, promote some sites to appear higher than the others based on specific queries, refine the results and you can also invite up to 100 friends to contribute to your search engine. There are usage statistics provided for your CSE too.

If you invite someone to contribute, he/she will be able to add refinements to your CSE and use the Google Marker bookmarklet which allows the user to add refinements and labels to pages. You will also be able to use their refinements too.

The Control Panel is a great way to customize your CSEs but if you want to go further, you should learn how to use the XML or TSV custom search format.

Defining CSE Specifications

A basic specifications file looks like this:

<CustomSearchEngine volunteers="false"
 keywords="climate &quot;global warming&quot; &quot;greenhouse gases&quot;"
 language="en"
 visible="false"
 encoding="UTF-8">
 <Title>RealClimate</Title>
 <Description>Science behind global warming and climate change.</Description>
 <Context>
 <BackgroundLabels>
 <Label name="_cse_hwbuiarvsbo" mode="FILTER"/>
 <Label name="_cse_exclude_hwbuiarvsbo" mode="ELIMINATE"/>
 </BackgroundLabels>
 </Context>
 <LookAndFeel nonprofit="false"/>
</CustomSearchEngine>

and includes the following elements:

• CustomSearchEngine
  • Title
  • Description
  • Context
    • BackgroundLabels
      • Label
  • LookAndFeel

There are also some optional elements that you can use between the Context element. These are:

• SubscribedLinks
  Enables subscribed links in your search results page. Subscribed links is a form of special results that you create for a set of pre-defined queries. It is a way to directly answer your users’ questions in the results page.
• AdSense
  Associates the search engine with your AdSense account. Make money with your custom search engine by connecting it with your Google AdSense account.
• Enterprise Account
  If you upgraded to Google Site Search, it lists your contact information. You can change the attribute values to update your information.

Selecting Sites to Search With XML

If you want to create a simple CSE with 2 – 10 sites’s results included, then the Control Panel is what you are looking for. But, if you want to use more than 50 or 100 sites in your search engine, then the best thing to do is to list all sites in a file and upload it.  You can create annotations files using 3 formats:

1. OPML – Outline Processor Markup Language
2. TSV – Tab Separated Values
3. XML

The most powerful but also the most complex format is XML. You can do anything that the CSE API allows you to do with this format. TSV is easier but with some restrictions on features and OPML is the easiest format to use since it allows you to use already made annotations files but you have less features from the other 2 formats.

The OPML Format

OPML is a type of XML format that was originally developed for defining ordered lists of elements or outlines, but it is now also commonly used for web feeds. If you have OPML files from some feed aggregators, you can upload the OPML file without bothering with typing each site. Custom Search grabs the value of the OPML attribute htmlUrl and adds it to the list of sites to search. You can upload multiple OPML files for each of your search engines.

Example OPML File:

<opml version="1.0">
 <head>
 <title>Bicycles</title>
 <dateCreated>Fri Mar 14 23:21:11 PDT 2008</dateCreated>
 <dateModified>Fri Mar 14 23:21:11 PDT 2008</dateModified>
 </head>

 <body>
 <outline type="rss" text="Road Bikes" xmlUrl="http://www.google.com/exampleurl.opml" htmlUrl="http://www.google.com/sampleurl1.opml"/>
 <outline type="rss" text="Mountain Bikes" xmlUrl="http://www.google.com/exampleurl2.opml" htmlUrl="http://www.google.com/sampleurl2.opml"/>
 </body>
</opml>

The TSV Format

The easiest format to create is the TSV. The only thing to do, is to open your spreadsheet editor and allocate a column for each of the fields. Save the file with a .tsv extension and upload it. The TSV file should have a specified format. The 2 required fields are:

• URL
• Label

and there are 3 optional fields:

• Comment
• Score
• Custom field – This one is a field that you can add for your reference since it does not affect the search engine. To create one, you must prefix it with “A=”. For example A=Contributor

Example TSV file:

URL     Label     Comment     A=Contributor
www.cancer.gov/cancertopics/types/liver/*     _cse_Ansi-stoubiq    government site     John
www.medicinenet.com/liver_cancer/*     _cse_Ansi-stoubiq     site on symptoms     Bill
www.webmd.com/hw/cancer/*     _cse_Ansi-stoubiq     great site for patients!     John
www.oncologychannel.com/*/treatment     _cse_Ansi-stoubiq     Steve

The XML Format

To get the most out of your CSE, you should use the XML format. There are 3 ways to use this format:

1. One Annotations file per CSE
2. One Annotations file for all your CSEs
3. Context files with inline annotations

You can use any of the ways above since you can always change the way by just copy pasting. The following is an example of XML annotations. It is roughly the XML version of the TSV example in the previous section. It includes the same elements, except for custom attributes, which are available only in the TSV format. This annotations file tells Custom Search to include everything under www.webmd.com/hw/* but exclude everything under www.webmd.com/hw/cancer/*:

Example XML File:

<Annotations>

 <Annotation about="www.cancer.gov/cancertopics/types/liver/*">
 <Label name="_cse_Ansi-stoubiq"/>
 <Comment>government site</Comment>
 </Annotation>

 <Annotation about="www.medicinenet.com/liver_cancer/">
 <Label name="_cse_exclude_Ansi-stoubiq"/>
 <Comment>site on symptoms</Comment>
 </Annotation>

 <Annotation about="www.webmd.com/hw/cancer/*">
 <Label name="_cse_exclude_Ansi-stoubiq"/>
 <Comment>great sites for patients!</Comment>
 </Annotation>

 <Annotation about="www.oncologychannel.com/*/treatment">
 <Label name="_cse_exclude_Ansi-stoubiq"/>
 </Annotation>

 </Annotations>

Hosting Your Annotations File On Your Own Server

Google allows you to host your own annotations on your server and to be able to use more than 5000 annotations, create annotations with scripting languages like PHP and update it as frequently as you want. To host your annotations, you have to create the file, upload it to your host and tell the CSE where to find this file. You can link annotation files together and use a large number of annotations that end up to 50 files!!

Example External Annotations:

<GoogleCustomizations>
 <Include type="Annotations" href="http://www.yoursite.com/cse_bacon_annotations.xml" />
<GoogleCustomizations>

Tweak The Ranking of Your CSE

You can also change the way your CSE ranks the results. For any reason, you might want to change the way the results are ranked. This can be done by using keywords, weighted labels and scores. While keywords and weighted labels are defined in the Context, scores are defined in the annotations file.

Keywords

With keywords, you can quickly change the results. Your CSE will boost pages that contain your keywords.

Keywords example:

<CustomSearchEngine volunteers="false"
 keywords="asana &quot;yoga postures&quot;">
 </CustomSearchEngine>

Labels

You can use two kinds of labels: search engine labels and refinement labels. Search engine labels determine which sites should be covered by the search engine.Refinement labels, on the other hand, are visible to your users and show up as links.

Search Engine Labels example:

<BackgroundLabels>
 <Label name="_cse_hwbuiarvsbo" mode="FILTER"/>
 <Label name="_cse_exclude_hwbuiarvsbo" mode="ELIMINATE"/>
 </BackgroundLabels>

Refinement Label example:

<Facet>
 <FacetItem title="Lectures">
 <Label name="lectures" mode="BOOST" weight="0.8">
 <Rewrite>lecture OR lectures</Rewrite>
 </Label>
 </FacetItem>
 </Facet>

Whether a site is promoted, demoted, or excluded depends on the search engine label it is associated with. A search engine label can have the following modes:

• ELIMINATE
  Excludes sites tagged with this label from your search engine.
• FILTER
  Includes only sites tagged with this label, and excludes everything else.
• BOOST
  Show sites tagged with this label higher in the results.

Weights

Weights let you define how much a label should promote or demote a tagged site. The values for weights can range from -1.0 to +1.0. The weight range gives you fairly refined control over sites. A positive weight in the label emphasizes sites tagged with it, while a negative weight, de-emphasizes.

A weighted label example:

<BackgroundLabels>
 <Label name="_cse_hwbuiarvsbo" mode="FILTER" weight="0.65"/>
 <Label name="_cse_exclude_hwbuiarvsbo" mode="ELIMINATE"/>
 </BackgroundLabels>

A very useful attribute of the Label element is “top”. You can manualy set the order of your rankings this way:

<Label name="best_resource" mode="FILTER" top="3"/>

Tagging Sites

You can tag your annotations with your labels this way:

<Annotations>
 <Annotation about="webcast.berkeley.edu/*" score="1">
 <Label name="cse_university_boost_highest"/>
 <Label name="cse_bicycles_exclude"/>
 <Label name="cse_hamsters_filter"/>
 </Annotation>

Scores

Scores are used to order sites using the same label. So you can order a site this way:

<Annotations>

 <Annotation about="*.edu/*" score="0.0001">
 <Label name="vision_label"/>
 </Annotation>

 <Annotation about="*.ucsd.edu/*" score="0.7">
 <Label name="vision_label"/>
 </Annotation>

 <Annotation about="*.vision.ucsd.edu/*" score="1">
 <Label name="vision_label"/>
 </Annotation>

</Annotations>

I hope this info was of some value to you. On the second part of this article, we will cover some special aspects of Custom Search Engines like search suggestions, appending queries, special results, subscribed results, look and feel and we will also create a custom search engine that will use all the features covered in the 2 articles.