Search code examples
searchgoogle-custom-search

Google Custom Search tabs

How can I create tabs to refine search results in Google Custom Search? An example is this: http://goo.gl/gftKp

Here, the results can be filtered as All Results, Blogs, Forum, Help, etc.. I am looking to do something like that. My website has different sections like articles, games, forum, gallery, etc.. How can I create tabs like these in the google custom search (free service) so users can filter the results and choose which section of the website they want to search?

Solution

  • I was searching for a solution for the same context few months back and at last found a solution.

    After adding refinements in google cse control panel you'll see refinements as 'filter labels' for your search. But this feature, ie matching labels is too broad.

    If your site has a specific path for each sections like,

    • articles under mysite/articles/
    • games under mysite/games/

    then, you can map these paths to each filter or refinement you created before.

    See the image below, I've added few refinements here as news,blog,media

    Here I've added a few refinements

    See the mapping below for each label/refinement

    mapping for each label

    and if you really want the refinement to appear like tabs..

    styling for refinements

    Happy 'custom search engin-ing' :)