Creating a Vanity Search Page
| | It's all about you. Learn how to call the Windows Live Search service to create a vanity page that displays images, news articles, and websites about you. |
| Stephen Walther
Difficulty: Easy Time Required: Less than 1 hour Cost: Free |
This month, we create a vanity search page. The vanity search page displays any images, news or website entries about a particular person (for example, you). To create this page, we take advantage of the Windows Live Search API. This free API enables you to retrieve search results by calling a web service that Microsoft exposes on the web.
I decided to write this article because I wanted an excuse to play with the Windows Live SDK (see http://dev.live.com). The SDK includes documentation and samples for accessing all of the Windows Live web services including the Windows Live Search Web Service, Virtual Earth, and Windows Live Alerts.
I fully admit that I was actively avoiding writing this article because I dreaded the thought of needing to learn yet another Application Programming Interface. I was pleasantly surprised to discover that the API for Windows Live Search is both logical and painlessly simple to understand. I wrote the code for this article in less than an hour.
Before you can access the Windows Live services, you need to get an Application ID. You pass this ID to the Windows Live services to identify yourself. You get an Application ID by signing an agreement at the following URL: http://search.msn.com/developer/appids.aspx.
Figure 1 - Adding a Web Reference for Windows Live Search
After you have an Application ID, you are ready to start calling Windows Live web services. Here are the steps for creating the vanity search page:
1. Launch Visual Web Developer and create a new Web Site
2. Select the menu option Website, Add Web Reference to add a Web Reference to the Windows Live Search web service (see Figure 1). Enter the following address into the URL field: http://soap.search.msn.com/webservices.asmx?wsdl. When you click OK, a new Web reference named com.msn.search.soap is created.
3. Create a new Web Form Page by selecting the menu option Website, Add New Item. When you create the new Web Form Page, give it the name Vanity.aspx. Also, make sure that the checkbox labeled Place code in separate file is not checked.
4. Replace the contents of the page with the following code:
VB.NET Code
<%@ Page Language="VB" %>
<%@ Import Namespace="com.msn.search.soap" %>
<%@ Import Namespace="System.Text.RegularExpressions" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
Const appId As String = ""
Const query As String = """Bill Gates"""
Const startMark As String = "\uE000"
Const endMark As String = "\uE001"
Private Sub Page_Load()
' Create instance of MSN Search Services
Dim search As New MSNSearchService()
' Build Source Request
Dim NewsSource As New SourceRequest()
NewsSource.Source = SourceType.News
Dim webSource As New SourceRequest()
webSource.Source = SourceType.Web
Dim imageSource As New SourceRequest()
imageSource.Source = SourceType.Image
imageSource.ResultFields = ResultFieldMask.Image Or ResultFieldMask.Url
' Build the Search Request
Dim request As New SearchRequest()
request.AppID = appId
request.Requests = New SourceRequest() {imageSource, NewsSource, webSource}
request.Query = query
request.CultureInfo = "en-US"
request.Flags = SearchFlags.MarkQueryWords
' Execute Search
Dim response As SearchResponse = search.Search(request)
lstResponses.DataSource = response.Responses
lstResponses.DataBind()
End Sub
Private Function hiLite(ByVal item As Object) As String
If item Is Nothing Then
Return String.Empty
End If
Dim text As String = item.ToString()
text = Regex.Replace(text, startMark, "<span class='hiLite'>")
text = Regex.Replace(text, endMark, "</span>")
Return text
End Function
Private Function toImage(ByVal objImage As Object) As String
If Not objImage Is Nothing Then
Dim image As com.msn.search.soap.Image = CType(objImage, com.msn.search.soap.Image)
Return image.ImageURL
End If
Return String.Empty
End Function
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
html
{
font:12px Verdana;
}
a {text-decoration:none}
.hiLite {background-color:yellow}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DataList
id="lstResponses"
Runat="server">
<ItemTemplate>
<h1><%# Eval("Source") %> (<%# Eval("Total") %> Results)</h1>
<asp:Repeater
id="grdResults"
DataSource='<%# Eval("Results") %>'
Runat="server">
<HeaderTemplate>
<ul>
</HeaderTemplate>
<ItemTemplate>
<li>
<asp:HyperLink
id="lnkResult"
ImageUrl='<%# toImage( Eval("Image")) %>'
Text='<%# hiLite( Eval("Title") ) %>'
NavigateUrl='<%# Eval("Url") %>'
Runat="server" />
<p>
<%# hiLite( Eval("Description") ) %>
</p>
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
</ItemTemplate>
</asp:DataList>
</div>
</form>
</body>
</html>
C# Code
<%@ Page Language="C#" %>
<%@ Import Namespace="com.msn.search.soap" %>
<%@ Import Namespace="System.Text.RegularExpressions" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
const string appId = "";
const string query = "\"Bill Gates\"";
const string startMark = "\uE000";
const string endMark = "\uE001";
void Page_Load()
{
// Create instance of MSN Search Services
MSNSearchService search = new MSNSearchService();
// Build Source Request
SourceRequest newsSource = new SourceRequest();
newsSource.Source = SourceType.News;
SourceRequest webSource = new SourceRequest();
webSource.Source = SourceType.Web;
SourceRequest imageSource = new SourceRequest();
imageSource.Source = SourceType.Image;
imageSource.ResultFields = ResultFieldMask.Image | ResultFieldMask.Url;
// Build the Search Request
SearchRequest request = new SearchRequest();
request.AppID = appId;
request.Requests = new SourceRequest[] {imageSource, newsSource, webSource};
request.Query = query;
request.CultureInfo = "en-US";
request.Flags = SearchFlags.MarkQueryWords;
// Execute Search
SearchResponse response = search.Search(request);
lstResponses.DataSource = response.Responses;
lstResponses.DataBind();
}
string hiLite(object item)
{
if (item == null)
return String.Empty;
string text = item.ToString();
text = Regex.Replace(text, startMark, "<span class='hiLite'>");
text = Regex.Replace(text, endMark, "</span>");
return text;
}
string toImage(object objImage)
{
if (objImage != null)
{
com.msn.search.soap.Image image = (com.msn.search.soap.Image)objImage;
return image.ImageURL;
}
return String.Empty;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Vanity Search</title>
<style type="text/css">
html
{
font:12px Verdana;
}
a {text-decoration:none}
.hiLite {background-color:yellow}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DataList
id="lstResponses"
Runat="server">
<ItemTemplate>
<h1><%# Eval("Source") %> (<%# Eval("Total") %> Results)</h1>
<asp:Repeater
id="grdResults"
DataSource='<%# Eval("Results") %>'
Runat="server">
<HeaderTemplate>
<ul>
</HeaderTemplate>
<ItemTemplate>
<li>
<asp:HyperLink
id="lnkResult"
ImageUrl='<%# toImage( Eval("Image")) %>'
Text='<%# hiLite( Eval("Title") ) %>'
NavigateUrl='<%# Eval("Url") %>'
Runat="server" />
<p>
<%# hiLite( Eval("Description") ) %>
</p>
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
</ItemTemplate>
</asp:DataList>
</div>
</form>
</body>
</html>
Before you use the vanity search page, you should modify two of the constants that appear at the top of the page: the appId and query constants. Assign the App ID that you get from visiting the following URL to the appId constant: http://search.msn.com/developer/appids.aspx. Enter anything you want for the query constant. In the page above, the name Bill Gates (enclosed in quotes) is assigned to the query constant. When you open the page in a web browser, you should see a page similar to Figure 2.
Figure 2 - Image results for Bill Gates vanity search page
The page displays three different groups of results. First, the page displays a list of images that match the search query. Next, the page displays a list of news articles. Finally, the page displays a list of websites (see Figure 3).
Figure 3 - Web results for Bill Gates vanity search page
The Windows Live Search web service currently supports the following types of searches:
- Image - Returns a list of images that match the search query.
- Inline Answers - Only available for commercial use. This type of search returns information from Encarta, Finance, Weather, and Movie show times.
- News - Returns results from online news sources.
- Phone Book - Returns results from white and yellow page phone books.
- Query Location - Returns latitude and longitude information associated with a query.
- Spelling - Returns a list of spelling suggestions.
- Web - Returns a list of websites that match the search query.
You perform a search by creating an instance of the SearchRequest class. You assign the text of your search query to the SearchRequest class’s Query property. This class also includes a Requests collection. You add one or more SourceRequest objects to this collection that represent different types of searches (Image, Web, News, and so on). After you get all of the objects ready, you call the MSNSearchService.Search() method to actually perform the search.
The search results are displayed with the help of a DataList and Repeater control. The DataList displays the source of the search and the number of results for each source returned. The Repeater control is nested in the DataList and it displays the actual search results.
Conclusion
As I mentioned before, I wrote this article as an excuse to play with the Windows Live SDK. I am very happy that I got the chance to experiment with this SDK since I discovered that it is very easy to work with. I’m looking forward to trying out some of the other Windows Live services such as the Virtual Earth and Alerts services over the coming months.