Intro
So I'm creating a website that will, among other things, contain a large number of details and lists of items. These items are of different types and will be spread out (categorized) throughout the site. Seeing as how I'm just a lone developer and this is a personal site, I have things I would like to spend my time on other than a fully customized search feature. How can I accomplish search with minimal effort? Google to the rescue! Using Google Custom Site Search, you can setup search on your website (using Google to crawl and index your site) fairly easily. Setting up custom search involves 2 things, from a high-level view: 1) Setup some sort of service that will crawl and index your website. 2) Create a search feature where users can search for and view results.For the remainder of this blog I am assuming you have a personal google account. If not you can create one. You don't need anything special, in fact I started this off with just a plain old gmail account. If you don't have a google account of some sort, go create one before you get too far.
There is one other alternative if you don't want to create a google account or if you don't have a website you want to search: skip the "Account Setup" section below and skip right to the code. You're welcome to create a custom search for my website, at least for learning purposes.
Account Setup
I'm going to assume that you already have a website you'd like to create custom search for. If not, hey maybe you've got a friend who has a site that could use it. Just keep in mind you will need a way to prove ownership of the site in the end, so be sure to get your friend's permission if you're not doing this on a site of your own. Anyways, here is how to setup your Google Custom Search account.- Go to this page: Custom Search - Create CSE
- Follow the instructions on that page
- You're now taken to a congratulatory page that tells you you've setup the custom search engine.
- Go to this page: Google Webmaster Tools
- Click the "Add a Site" button if your site isn't already listed on the page.
- Enter the url of your site/domain.
- Follow the remainder of the on-screen instructions from google, which will most likely have you log into your domain provider's account (quite frequently this is register.com) in order to set a server-side variable, proving you have administrative access to the domain.
Code
A search engine sucks if you don't have a way to search for things, and we haven't done that half yet. A quick note: we won't be doing any server-side code here. This is all client baby!Flip back over to the congratulatory page from the end of the process of setting up your Google Custom Search. As of now (2014) there's a button labeled "Get code". Click on that. This will show you some JavaScript that you can copy and paste into a webpage. Fire up your favorite text editor. Paste this code (or if you have your own site/script, by all means place that in the editor instead).
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Search Demo</title>
</head>
<body>
<h1>Search Demo</h1>
<div>some content before search</div>
<div>
<script>
(function() {
var cx = '003872741270381885457:moxcvku22ym';
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>
<gcse:search></gcse:search>
</div>
</body>
</html>
Now fire up the page in your web browser of choice. You should have a screen that looks like this. Not too bad looking, considering the very small effort involves so far. 
Go ahead and type something into the search box. If it's your own site, pick a word that you know is on the site. If you're doing my site, use "shadowrun" as your search term, and hit enter or click the search button. Your screen should now look similar to this:
Neat huh? That's all there is to it.
No comments:
Post a Comment