HTML Logo by World Wide Web Consortium ( Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS. ocPortal 9 is superseded by Composr 10.

Head over to for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.

Adding GCSE - My experience (GCSE Google's Custom Search Engine)

Login / Search

 [ Join | More ]
 Add topic 
Item has a rating of 5 (Liked by Guest)  
#106179 (In Topic #20722)

Fan in action

Adding Google

Yesterday, I was asked to look at predictive text not working on CSE. My first thought was OMG I don't even know what CSE is (or more correctly what is he talking about). Obviously now I do and the good news only a day, not even that, after and I'm putting this up. It's pretty easy.

CSE (or GCSE as I call it to  distinguish it from other CSE's such as Certificate of Secondary Education, yep I got some them, but also have the odd GCSE oops) is a means of doing restricted searches on listed websites using google's search engine/technology/servers. As an example, FLWG out site is about Family Law and related topics. So we have GCSE setup to search some specific sites, including our own. It's pretty fast, customisable and pretty easy to incorporate. You basically copy the two generated files (HTML and CSS which you can simply combine into one file) from your "Custom Area" (available after joining up and setting up (someone else did that side, although it looks pretty simple))

The main issue I had was with fitting this code in as the results appeared below left/right blocks, leaving loads of white space and also requiring users to scroll down for the results (I even thought there weren't any at first and had thoughts of giving up :)).

To get around this problem I looked at deleting all the blocks any way the solution I came up with was to create a new Zone, strip all blocks including the menu (this could be used for other third party "drop ins" that don't fit in). Then edit zone_menu and remove the zone I created. Then drop the code into the appropriate directory/folder. Lastly I just edited a menu (from another zone) to link to the google search page.

As this is intended to help others. I'll now go through the process in more detail (I'm assuming that you've looked into GCSE and joined and set-up your search engine, but will use FLWG's for examples).

1) Using your favourite code editor (notepad could be used but that can be problematic when naming files). I use textpad, which is free to evaluate.

2) Add the following lines:


<div class="googlecsescript">

(Note you will be inserting the first block of code between the 1st and 2nd line and the second block of code between the 3rd and 4th line. Hence the easy to determine (I think) class names.)

3) Go to the your Google CSE's Custom Search Area.

4) Select your search engine.

5) If not in the "Basics" tabe then click on the "Basics" tab.

6) Click on the "Receive code" button. (Mid right)

7) If you want the "Advanced Features" then click on the "Obtain the V1" link at the bottom.

8) Copy the code from the grey box and paste it into your favourite code editor immediately after the line (note after the delimiting ">") that includes class=googlecsescript and before the closing div tag (save it as you like if you like).

9) Click on the blue box entitled "Next: Obtain Code for Search Results" and copy the code (just 1 line).

10) Add this code (just 1 line) immediately after the line that includes class=googlecseresultsbox.

11) You needn't follow this step but I think it will improve the speed. Click on the CSS Source File link and copy the code.

12) Only if you followed step 11. Place this code immediately before the line that includes class=googlecseresultsbox.

13) Temporaily save the code with a name of your choice with .htm as the file extension (Note! you cannot name this file .html it MUST BE .htm or least when you copy it into the respecftive directory/folder).

14) Select Admin Zone/Structure/Zones  and then click on Add Zone and create a new zone with a meaningful name of your choice (for this I'll assume that TUWZONE is meaningful and thus TUWZONE will reflect this zone in subsequent steps).

15) When the Zone is created and the Zone is displayed click on edit in Zone Editor (bottom left by default).

16) Click on the Edit tab above the zome menu (Note not the edit tab for the page, the zone menu will likely have the warning "missing menu (zone_TUWZONE_menu you may add it")

17) In turn double click each of the grey boxes (4 by default) (note if can be a little awkward doing this as the panel dynamically resizes when the mouse moves over it), when the pop-up appears scroll down and check Remove and then click on the Save button on the pop-up (Note! not the save button the the page).

18) When all boxes have been cleared from the menu click on the Save button.

19) Select Admin Zone/Structure/menu management.

20) Select zone_menu from the list and then click on the Choose button.

21) Click the respective Delete button for TUWZONE (stops the zone being displayed in the zone menu).

22) Now copy/ftp (as required/unique to your installastion ie how you normally copy files, which may include saving them as uUNIX files from windows) the code file saved as above (the one that MUST have the .htm extension) into <pppp>/TUWZONE/pages/custom_html/EN  (Note <pppp> is the path to the root directory of your ocPortal installation).

23) Using Admin Zone/Structure/Site Tree Editor (note you will likely be in Admin Zone) select TUWZONE and you should see HTML:your_file

24) Add links as required using TUWZONE:your_file

25) Hopefully happy Searching.

Please accept my apologies should any of the above steps be incorrect or to confusing.

Expand: More!! More!!

Example of the Embedded CSE with results:

Regards, Mike.
Back to the top
There are too many online users to list.
Control functions:

Quick reply   Contract

Your name:
Your message: