ASP.NET - Buld a Google Plus Custom Search Engine

Google+ ("Google Plus") is taking the Netosphere by storm. But one of the missing ingredients is a good "general" search facility for Google+ posts and profiles. The default search box on Plus only finds people. Fortunately, thanks to the Google Custom Search Engine (CSE) offering, it's a snap to build your own. We look at two different ways to implement it - one in a single, "self-contained" ASP.NET page, and the other with a page that has the search form but redirects to a second page.

The first step is to go set up a custom search engine for yourself here:  

Simply follow the steps. in the Wizard.  If you have an Adsense account you can add it under the "Make Money" node and get paid when people use your search and click on ads.

Under the "Basics" node, you will see search Preferences:

How to search included sites:

Search only included sites.
Search the entire web but emphasize included sites.

Here you want to select "Search only included sites".

Then, under the "Sites" node, enter "plus.google.com"

Finish the wizard and get your custom search engine code. Mine looks like this:

<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
  google.load('search', '1', {language : 'en'});
  google.setOnLoadCallback(function() {
    var customSearchControl = new google.search.CustomSearchControl('006498929212005832858:ajeqzvrxbkq');
    customSearchControl.setResultSetSize(google.search.Search.LARGE_RESULTSET);
    var options = new google.search.DrawOptions();
    options.setAutoComplete(true);
    customSearchControl.draw('cse', options);
  }, true);
</script>
<link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" />

Now let's create an ASP.NET self-contained page that will host both the search box and the displayed results. The following is a "script only" page with no separate codebehind class file. The name of the page is "Complete.aspx":

<%@ page title="Home Page" language="C#" autoeventwireup="true" %>
<script language="c#" runat="server">
    protected void LinkButton1_Click(object s, EventArgs e)
    {
        // use the rel attribute of the textbox to store the url format string
        string searchURL = String.Format(Textbox1.Attributes["rel"],
        HttpUtility.UrlEncodeUnicode(Textbox1.Text));
        Response.Redirect(searchURL, true);
    }
</script>
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head >
    
    <title>Google Plus Search</title>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://www.google.com/jsapi" type="text/javascript"></script>
    
    <script type="text/javascript">
        $(document).ready(
            function () {
                 $('#<%= Textbox1.ClientID %>').bind('keydown', function (e) {
                     if (e.which == 13) {
                          // trigger the __postBack() event of the linkbutton
                        window.location = $('#<%= LinkButton1.ClientID %>').attr('href');
                         return false; // don't capture any keypress event
                     }
                 });
             });

        google.load('search', '1', { language: 'en' });
        google.setOnLoadCallback(function () {
            var customSearchControl = new google.search.CustomSearchControl('006498929212005832858:ajeqzvrxbkq');
            customSearchControl.setResultSetSize(google.search.Search..LARGE_RESULTSET);
            customSearchControl.setLinkTarget(google.search.Search.LINK_TARGET_TOP); // target the parent iframe
            customSearchControl.setSearchCompleteCallback(window, onSearchComplete, this);
    var options = new google.search.DrawOptions();
           options.setAutoComplete(true);
           customSearchControl.draw('cse', options);
             customSearchControl.draw('cse');
            customSearchControl.execute('<%= HttpUtility.HtmlEncode(Request.QueryString["q"]) %>');
        }, true);

        function onSearchComplete(search) {
            $('#<%= Textbox1.ClientID %>').val(search.Tc);
        }
    </script>
    </head>
<body>
    <form id="Form1" runat="server">
     <h2 style="text-align:center ">Google Plus Custom Search</h2>
        <asp:textbox id="Textbox1" runat="server" rel="~/Complete.aspx?q={0}" />
        <asp:linkbutton id="LinkButton1" runat="server" text="Search" onclick="LinkButton1_Click" />
        <div id="cse" style="width: 100%;">Loading</div>
    </form>
</body>
</html>

We have our standard ASP.NET Form tag at the bottom, with a textbox and a linkbutton.  We use the "rel" attribute of the Textbox  to store the target url, which in this case is the same page.

We also have a LinkButton1_Click handler that formats the search url and redirects to reload the same page.

In the client script, we load jQuery from the google CDN. In the $(document).ready function, we capture the enter key which will cause the postback in case the user does not click on the linkbutton but presses "ENTER" instead. Then we use the provided search engine script, modifying it slightly. I like to add the Autocomplete options. Finally we execute with the line:

customSearchControl.execute('<%= HttpUtility.HtmlEncode(Request.QueryString["q"]) %>');
-- this grabs the search term from the redirect url querystring and performs the actual search.
(you can try this out live here  )

You can also do something like this to suppress Google's custom search box so that only yours shows:

var x = '<%=Request.QueryString["q"] %>'
if(x )
{
            customSearchControl.draw('cse', options);
    }

I'm sure there is a way to do it with the CSE options but I haven't bothered to study it much. Google has a help page here with more developer documentation.

Another cool feature of the Google CSE is that you can search on hashtags and it will find them. For example, try searching on #enoughsaid

That's all there is to it. This will search both POST and PROFILE urls. Of course, you can add specialized filters and a lot more, but this setup suits my needs perfectly. I even added this search to my Google/ig custom home page.

In the downloadable Visual Studio 2010 solution, you have the Complete.aspx page as well as a default.aspx page that hosts only the search form and which redirects to a Search.aspx page to display the results.

Download the Visual Studio 2010 solution that accompanies this article.


By Peter Bromberg   Popularity  (5055 Views)