Integrate Google Search on your WordPress blog

by Maigret. 38 Comments -

What would you use to your advantage to improve the ability to search your site / blog? This tutorial’s goals are the integration of a Google Custom Search Engine on your blog. We are going to harness the power of Google and provide a professional touch to your blog.

This guest article was written by Maigret, a French blogger which maintains a PC related blog.
Have some web development, web design or blogging skills? Contribute to CatsWhoCode!

Creation of the Google Custom Search Engine

As a first step, we must create a custom search engine. To do this, go to Google Custom Search.

Now click on the button to the right entitled: Creating a Custom Search Engine. If you are not logged in, enter your address and your password for your Google account and then log.

Capture décran - Création dun moteur de recherche personnalisée Google

We now proceed in completing the form:

  • General information here, nothing special that does not require an additional explanation. Just follow the instructions;
  • Types of research: you can choose between 3 options. In our situation where it is integrating a search engine on a blog, will focus on the default ie Only sites I select;
  • Site selection: We must now specify the sites to explore.
    • If your blog is at the root of your site, simply register your domain name (without http://). For example, monblogwordpress.com ;
    • If your blog is not located at the root of your site, then enter the location of it by adding the following syntax like: mysite.com / wordpress * * ;
    • A final event is designed for users with WordPress makes sure that the URL displayed – for example, monsite.com / wordpress, displayed this way: wordpress.mysite.com. In this scenario, the situation prevailing No. 1 ;

Capture décran - Saisie des informations nécessaires à la création du moteur

Finally, accept the conditions of use and click Next.

Google confirms the creation of your custom search engine. Note that you can send you a confirmation email to your Gmail account. Validate by clicking Finish.

Obtaining the code to insert

In this second part, we will see how to generate the code to insert into your blog to integrate your custom search engine.

If you have followed the steps above, you should now be on a home page for the management of your search engine.

So we need to get the code of the engine. To do this, click Control Panel. Many options are proposed. We see the most important result of this tutorial, but feel free to browse among the various tabs.

Go to the Sites tab. It is very important because we will check that the engine is not configured to search only on your blog and not on the links that would be likely to find it. To check this, click the URL of your blog and check if you have not already, the first option on all pages whose address contains this URL. Confirm via the Save button.

Now to the appearance of the engine. To do this, open so the Graphics tab. Here you are free to choose an engine using JavaScript (enabled by default) or not and to change the color-coded links, text, borders, etc.. Of course, remember to save the changes via the Save button in each module.

Let’s contiune to the final step: getting the code. Go to the Code tab and choose among various options for accommodation search results:

  • Accommodation is at your expense and the results are an integral part of the blog (the most significant for the visitors by me):
    • Iframe method: you view the search engine where you want on your blog (header, navigation bar, sidebar – so it is visible on every page) and generate the results on a page dedicated to this purpose ;
    • Overlay method: the results appear on the same page as the search in the manner of a pop-up on the page (or image lightbox). Not very practical from an ergonomic because I do not think users are very comfortable to browse the different results … this is only my opinion ;
  • Google created a page to accommodate the results. In other words, you do not take care of the results ;

Preferring the first option iframe, I will describe the process.

In section specify the details of search results, enter the URL that displays the search results. For example,http://monblog.com/search. Do not forget to create the page !

Like all Google programs it supports Adsense advertising system that allows you to be paid if your visitors click on advertisements. Here, you choose the location thereof. Note that you can enroll via a tab Adsense Monetizing whose procedure is to provide its Adsense identifying and validating the confirmation e-mail.

Attention, it is recommended to have a display at the top and bottom for the simple reason that the other two options require a considerable width of the page (over 600 pixels if I remember rightly, excluded sidebar). 
Of course, you can then change the dimensions but nevertheless requires a minimum value. Similarly, it is impossible to use your own CSS styles.

Insert code

This fact, it only remains for you to copy and paste the 2 pieces of code.

The first concerns the search engine.

In the case of a WordPress blog, you can:

  • Or, insert it in the sidebar (side column) by inserting a text widget in which you copy the code in question ;
  • Or, insert it into searchform.php accessible from the menu and then Theme Editor. Open the page cited, then remove all the text and paste the Google code. Of course, everything depends on whether the location of the search for you (to change it through the CSS);

Other possibilities exist without a doubt, but I have not had the opportunity to try, therefore impossible for me to explain.

The second code concerning the display of search results.

Having created a new page, view the source of it and paste the code obtained. Do not forget to publish the page.You will notice that the width of the tag allows you to specify the page width of the results by size ranges regulated by Google (see above).

To admire the result, open your blog and then do a search. If everything works, it should appear on the page specified above.

  • http://moukadesign.altervista.org Salmen

    y a longtemps que je cherche un tutoriel comme ça…
    Merci
    Grazie

  • http://www.maigretsblog.com/ Maigret

    @Salmen : et tu peux aussi le consulter en français sur mon blog si ça peut te faciliter la tâche (mais c’est bien d’apprendre l’anglais aussi ;) ) !

  • http://moukadesign.altervista.org Salmen

    Sorry…the next i will comment in english….:)

  • http://www.maigretsblog.com/ Maigret

    @Salmen : no problem for me, I can answer in both languages. :)

  • http://www.0window.com/blog/ Catrin W

    Thanks for the tutorial.. The problem with google’s custom search engine comes when you want to integrate results on your blog, because they have pretty high minimum width requirement so usually restructuring of that page is needed.

  • Pingback: links for 2009-01-11 | Links | WereWP

  • http://www.booshonline.com David Hobson

    Thanks for the tutorial this is something i have been considering doing.

  • http://www.aytemir.com Tschai

    And you could also use “Adsense for search” with it…right?

  • http://www.wprecipes.com Jean-Baptiste Jung

    @Tschai: Exactly :)

  • http://achi-mumut.blogspot.com achi-mumut

    this is a great tutorial. I will try it and implement to blogs. thanks for sharing this valuable staff

  • http://www.maigretsblog.com/ Maigret

    @all : thanks everybody for your comments ! :cool:

    @Catrin W : I don’t really know if it is allowed by Google or if it works but you could try to modify var googleSearchFrameWidth in the search results page.

  • http://www.morrisonsoftdesign.com/with_fl/index-5.html John

    Great information, thanks! I learn something every time I visit.

  • http://www.internetmarketingcentral.info Valentino

    I’ve learned a lot from this post. Thank you so much!

  • http://economy-business-dinta22.blogspot.com dinta

    Thanks for your tutorial, it’s very useful for me.

  • http://hadikurnia.blogspot.com Hadi Kurniawan

    Great idea but i haven’t wordpress blog yet, still using blogger… But It nice to integrate them

  • http://www.pos-versand.at/bondrucker/index.html Janet Bondrucker

    Thanks for this nice info.

  • http://hayespotter.com Hayes Potter

    ooooo fancy, nice work maigret.

  • http://www.maigretsblog.com/ Maigret

    Thank you very much for your nice comments ! :)

  • http://www.netage.co.za Ruby

    Thank you for taking the time to compose this brilliant tutorial. It’s amazing.

  • http://ezinearticles.com/?Remove-Antivirus2009---Learn-How-to-Remove-Antivirus2009-in-One-Quick-Step&id=1730157 remove antivirus2009

    I have used this in the past it is excellent!

  • http://www.zurpit.com Classifieds

    This is a great tutorial, having Google search on your site is very helpful especially if the site gets cached often and a lot of the pages are indexed in Google. Their algorithm is one of the bests and it works great on the sites

  • http://www.digitalthirdcoast.net/ SEO Chicago

    Great post, i think this is really cool, i like the fact that google has their custom searches now, i also like the adsense search that pays you. thanks for the tip.

  • http://techniquestips.com docran

    Wow, great. I`ve been searching a tutorial about google custom search in wordpress and now i got it. Thanks, great tutorial, of course I`ll practice it.

  • http://www.ridex.pl Firany

    Is that true that if you put Google search engine your sites will be indexed faster? I heard that you can force googlebot to visit and index your site when you have this search engine on your site. Anyone knows?

  • http://www.caviteniofilipino.blogspot.com Cavite Philippines

    @Firany

    Nobody knows, some say yes some say’s no. I think, it is better to test it on our own so we can have a better judgment IF this thing can make our sites index faster by g00gle.

    Oh, if you finish testing it, please do inform us the result. :-) .

  • http://drivelocity.com drivelocity

    I didn’t see an explanation in your article regarding any benefits of doing this over using the built in WordPress search widget…

  • http://www.maigretsblog.com/ Maigret

    @Firany : I never heard about it… I believe it’s a Google myth…

    @drivelocity : WordPress built-in search is so bad whereas Google is extremely pertinent. Try it and you’ll see the difference ! ;)

  • http://www.itop10.com top 10

    Google Search can earn you some extra bucks. I would recommend everyone to add this on your blog.

  • http://fazreen.com fazreen

    now, google search has integrated with adsense

  • http://howtomakeeasymoneyoninternet.blogspot.com/ Make Money On Internet

    I’m using adsense to make money on my blog, but I’m also trying my luck in affiliate marketing, it seems though it really works out well. Although I still have to learn more about increasing your CTR rate.

  • http://www.man-women-jeans.com/ Link building services

    Now this is exactly what I wanted to do.i came across few other articles but it didn’t help at all. this one is just spot on. Thanks a bunch for the information. Your site is great. Cheers

  • http://www.solarpowertoptips.com/future-of-solar-energy.aspx Future Solar Energy

    Thanks. Great post.

  • http://kampanye-damai-pemilu-indonesia-2009.com Kampanye Damai

    Thanks for your sharing, I always get difficult in setting the search result page for google custom search. This tutorial will show me how the way

  • http://www.w3capps.info zenith

    thanks for sharing.:)

  • http://chandrawijaya.com Chandra Wijaya

    Its great tricks.. thanks for sharing..

  • Pingback: How To Combine Google Custom Search and AdSense with the Default WordPress Search | @Zemalf

  • http://thoushallblog.com Yan Susanto

    I have a Q: I don’t like to see a border within the ads but even though, I’ve specified the border color as #FFFFFF but in vain.

    Anyone has any suggestion?

    Yan

  • Pingback: 10 tips to finally make money with Google Adsense