World is now on Opti ID! Learn more

dobachlinh@gmail.com
Nov 17, 2010
  4439
(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
Open Optimizely CMS in a New Tab – Instantly

Speed up your Optimizely CMS workflow with this free Chrome Extension. Instantly open the live view of the page you're editing – no right click, op...

Andy Blyth | Jul 18, 2025 |

Creating Quick Actions for ContentReference Images with a Custom Dojo Module

Credit note: This article is inspired by the  edit link in dojo  module, with extra features added. We received a request from our customer to...

Manoj Kumawat | Jul 18, 2025

Password protect your Optimizely CMS content

Want to share some private content on your website with basic password protection? You can do this with an Optimizely form and Audience based...

Brian Gerby | Jul 17, 2025 |

Importing Form Submission Data into Optimizely Forms Using DdsPermanentStorage

Recently, we needed to import a large number of records from a third-party system into Optimizely Forms . The data was available in CSV format, and...

Pawan Singh | Jul 16, 2025