Google Custom Search Plugin

Google Custom Search plugin allows you to add a search box to your site for a custom search provided by Google and shown in your own blog. The advantage of using this plugin is that the search results will be provided by Google and their great search engine. The results are drawn from only the websites you specify when setting your search engine up at Google. You will also be able to earn money from the ads Google shows in the search results.

What you need to do:

  1. Create a custom search engine at Google, entering your blog in the list of sites to search.
  2. After doing that, you will be able to manage your engine.
  3. Choose the look and feel of your search box and search results, matching your blog's design
  4. Go to the code tab, choose "Host results on your website" and "iframe".
  5. Enter your blog address/generic.cfm as the URL where the results should appear
  6. Choose the ads placement
  7. Copy the Search Box code and the Search Results code and save for later.
  8. Active the plugin in your blog admin
  9. Go to Settings > Google Search
  10. Paste the Search Box code and the Search Results code in the text areas provided.

You can paste the box code as is or customize the HTML to match your blog's design.

13 Comments

  1. Mark Aplet
    Mark Aplet
    October 11, 2008
    That's awesome Laura! It was pretty easy to set up. Just a Note: You may want to link to this page from your blog post. It took me 10 minutes to find this page again once I lost it the first time.
  2. Laura
    Laura
    October 12, 2008
    Yes, somehow, the post lost the link it was supposed to have at the end.
  3. jonese
    jonese
    February 27, 2009
    Does this work with 1.3.1? i tried to implement it after a 1.3.1 update and i can't get it too remember the google code...
  4. jonese
    jonese
    February 27, 2009
    ok i got it working. for some reason the code folder and associated code_<string>.txt file wasn't getting created.. manually created and viola it works
  5. Laura
    Laura
    February 27, 2009
    I'm glad you got it working. I'll check to see if there is anything wrong with the file saving just in case.
  6. Greg
    Greg
    June 23, 2009
    Haa anyone been able to style the search box to match their site?
  7. Mark Aplet
    Mark Aplet
    June 23, 2009
    @Greg You can style the search form any way you need too using CSS.
  8. Greg
    Greg
    June 23, 2009
    I only know how to use css on html forms. This Google Custom search is called via js like this:

    google.load('search', '1'); google.setOnLoadCallback(function(){ new google.search.CustomSearchControl('...

    How would a guy style something like that?
  9. Laura
    Laura
    June 24, 2009
    Greg,
    There is only a javascript file that gets included after the actual form. There is a <form> tag and inputs you can style. The javascript is not really needed for the form to work (although I don't know whether Google's terms force you to leave it there), so you can remove it and that would remove Google's branding. You can see in this same page that the form has been styled to match this site.
  10. Mark Aplet
    Mark Aplet
    June 25, 2009
    If you use firebug, and firefox, you can view the "rendered" html. This is different than the html you see when you do a view source. JS can of course effect the DOM after the page has loaded adding html that the browser understands and styles that you would not otherwise see.
  11. Greg
    Greg
    June 25, 2009
    Laura/Mark, I don't understand. I don't have any form tag in my code. I have this:

    <!-- Google Custom Search Element -->
    <div id="cse" style="width:100%;">Loading</div>
    <script src="http://www.google.com/jsapi"; type="text/javascript"></script>
    <script type="text/javascript">google.load('search', '1'); google.setOnLoadCallback(function(){ new google.search.CustomSearchControl('013959616596213686306:iusd9b2bolo').draw('cse'); }, true); </script>

    http://luceconsulting.net/
  12. Mark Aplet
    Mark Aplet
    June 25, 2009
    Greg, I emailed you.

    Please take this to the forum where people can help you. This page is not read by many people.
  13. Pritesh
    Pritesh
    October 05, 2009
    I don't know why but it doesn't create IFrame for me. When I search for any tag it just give me blank

    Try http://blog.thecfguy.com/ to see problem. can you please let me know where I am doing wrong?

Leave a Reply