dobachlinh@gmail.com
Nov 17, 2010
  3482
(3 votes)

Add Google search box to CMS site using Dynamic content

Developers all know how easy to add a Google search box to their website. But with me, it only get attractive when I verify an issue regarding to Dynamic Content, when I found that Dynamic Content is really nice feature. So I try to create my first Dynamic content with Google search box.

This entry shows a sample to create your own custom search engine using Google Custom Search and Dynamic Content in CMS template pages.

1. Get Search Engine ID

You should login to your Google Account first then go to http://www.google.com/cse/ to create your custom search engine. After that go to Control Panel link and get your Search engine unique ID. It looks like this 007791610224680591377:m3lgrymjnfy

2. Create GoogleSearch Dynamic Content

I create settings for this Dynamic Content with a User Control to save search site. The settings interface looks like this:

image

You can input your site name for the second search-site option (the first one will be all sites).

And one more user control to display the search box. Note that you have to put your key – that get from step 1 to cx value here

<asp:HiddenField ID="cx" Value="Put You Key Here" runat="server" />

cx = The identifier of the custom search engine.

This code below is to show the result from Google (provide by Google custom search engine)

<div id="ResultArea"></div>

<script type="text/javascript">

  var googleSearchIframeName = "ResultArea";

  var googleSearchFrameborder = 0;  

  var googleSearchDomain ="www.google.com";  

  var googleSearchPath ="/cse"; 

</script>

<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js">

 

Here we go, Google search box in CMS site:

image

Download full source code here:

 

Unzip and copy all files to Templates/DynamicContent folder then register the control in episerver.config:

<add description="Google Search" name="Google Search" type="GoogleSearch, EPiServer.Templates.Public" />

 

Dynamic Content is very useful feature for editors. Hope that next time I can do this with Google map.

Nov 17, 2010

Comments

Nov 25, 2010 08:41 AM

Nice work!

Nov 25, 2010 08:42 AM

Nice work!

Please login to comment.
Latest blogs
Optimizely community meetup - Sept 29 (virtual + Melbourne)

Super excited to be presenting this Thursday the 29th of September at the Optimizely community meetup. For the full details and RSVP's see the...

Ynze | Sep 27, 2022 | Syndicated blog

Preview multiple Visitor Groups directly while browsing your Optimizely site

Visitor groups are great - it's an easy way to add personalization towards market segments to your site. But it does come with it's own set of...

Allan Thraen | Sep 26, 2022 | Syndicated blog

The Report Center is finally back in Optimizely CMS 12

With Episerver.CMS.UI 12.12.0 the Report Center is finally re-introduced in the core product.

Tomas Hensrud Gulla | Sep 26, 2022 | Syndicated blog

Dynamic Route in ASP.NET Core When MapDynamicControllerRoute Does Not Work

Background Creating one of the add-on for Optimizely I had to deal with challenge to register dynamically route for the API controller. Dynamic rou...

valdis | Sep 25, 2022 | Syndicated blog