code4copy

How to use Google Custom Search in BlogEngine.Net

BlogEngine.net is .net based blogging platform with sufficient features or you can say best dotnet based blogging platform. It has it’s won search module which is sufficient for search but can not match Google search Engine.

Google also provide option for adding custom search engine feature to other websites. There are basically two version of Google custom search one is free with ads and another is paid with optional ads.

Using https://www.google.com/cse/ you can create your own search engine by following steps given on Google’s custom search engine website. After creating and configuring search engine for your web site you will get search engine id or CX id as shown below

google-searchingine-id

After finalizing this configuration you need to modify your BE search.aspx and search.aspx.cs files in web root.

Replace your search aspx file code with follwing

<%@ Page Language="C#" AutoEventWireup="true" EnableViewState="false" CodeFile="search.aspx.cs" Inherits="search" ValidateRequest="false" %>
<%@ Import Namespace="BlogEngine.Core" %>
<asp:content id="Content1" contentplaceholderid="cphBody" runat="Server">
  <div class="google-search">
        <h2 runat="server" class="page-global-title" id="h1Headline" />
        <script>
            (function () {
            /* Chage your cx id below*/
                var cx = \'012057292009056434470:pmpivpgynmm\';
                var gcse = document.createElement(\'script\');
                gcse.type = \'text/javascript\';
                gcse.async = true;
                gcse.src = (document.location.protocol == \'https:\' ? \'https:\' : \'http:\') +
                    \'//www.google.com/cse/cse.js?cx=\' + cx;
                var s = document.getElementsByTagName(\'script\')[0];
                s.parentNode.insertBefore(gcse, s);
            })();
    </script>
      <style>.gsc-thumbnail-inside {padding-left:0px;line-height: 1;} gs-webResult{border:1px solid #eee;padding:1em}.gsc-result-info{display:none}.gcsc-branding{display:none}.gsc-thumbnail{display:block}.gs-snippet{display:block;margin-top:3px;}
          .gs-title a{font-size:16px;}.gs-snippet{font-size:14px}.gs-title b,.gs-snippet b{font-weight:normal}.gsc-url-top{display:none}.gsc-url-bottom{display:none}.gsc-cursor-page{font-size:1.5em;padding:4px 8px;border:2px solid #ccc}.gsc-orderby {display: none;}
      </style>
    <gcse:searchresults-only linktarget="_parent"></gcse:searchresults-only>
  </div>
</asp:content>


<gcse:search results-only  linktarget="_parent"></gcse:search>

In above code linktarget=”_parent” is used to make target=”self” for search result hyperlinks.

Replace your search.aspx.cs file with below of delete/comment all code.

#region Using

using System;
using System.Collections.Generic;
using System.Web;
using System.Net;
using System.Xml;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Text.RegularExpressions;
using BlogEngine.Core;

#endregion

public partial class search : BlogEngine.Core.Web.Controls.BlogBasePage
{

    
}

Make sure your search page query string contains query string with “Q” as show below.

google-searchingine-id-url

You can also customized your search result by changing css which written in aspx page.

<style>.gsc-thumbnail-inside {padding-left:0px;line-height: 1;} gs-webResult{border:1px solid #eee;padding:1em}.gsc-result-info{display:none}.gcsc-branding{display:none}.gsc-thumbnail{display:block}.gs-snippet{display:block;margin-top:3px;}
    .gs-title a{font-size:16px;}.gs-snippet{font-size:14px}.gs-title b,.gs-snippet b{font-weight:normal}.gsc-url-top{display:none}.gsc-url-bottom{display:none}.gsc-cursor-page{font-size:1.5em;padding:4px 8px;border:2px solid #ccc}.gsc-orderby {display: none;}.gsc-search-box{display:none;}
</style>

You can find all css classes using Chrome web browser inspect element feature and override that in search.aspx file.

Anupama