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.
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 ;
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.
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.
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.