Integrating Google Custom Search In Websites

In this article, we will learn how to integrate Google's Custom Search functionality in a website.

What is Google Custom Search?

As stated on Google's site,

"Google Custom Search enables you to create a search engine for your website, your blog, or a collection of websites. You can configure your engine to search both web pages and images. You can fine-tune the ranking, add your own promotions and customize the look and feel of the search results. You can monetize the search by connecting your engine to your Google AdSense account"

In simple words, with Google Custom Search, we can add a search box to our webpage and provide search results for the users visiting our site. So, we will start learning this step by step.

I assume that everyone has a Google account. If not, just create one here. 

Please note, If you are working for a company, then it will be better to create one account on behalf of your company rather than using your own personal account for this.

Step 1 - Open Google and search "Google Custom Search".

 

You will get the results. Just click on the first link.

Step 2 - When the page is opened, click on the blue tab at top right corner saying "Sign in to Custom Search Engine".

Step 3 - Now, you will be redirected to the login page. Just enter your credentials and click Sign in.

Now, you will be redirected to the Control panel of Search engine.

Step 4 - In Control Panel, there will be a textbox for entering your site address. This is to make results based on your website.

Step 5 - If you need results from multiple sites, you can enter those site URLs in auto-generated textboxes.

After filling in the details, click "CREATE" button.

Step 6 - Congratulations! Now, your Search Engine has been created. 

Step 7 - Now, go the menus in left side.

Clicking setup menu will provide you provisions to edit your Search Engine.

Step 8 - You can change the look & feel of your Search Engine, using Look and feel menu.

After updating the look and feel, click on Save & Get Code button.

Step 9 - You will get a script code. Copy that code.

Step 10 - Now, create a webpage in your project and paste the above copied code inside a div tag.

Step 11 -  Publish your page and open the URL.

Step 12 - Type something and click Search button in the right.

Here are the search results from the website, we gave the URL of, while creating the Search Engine.

Conclusion

In this article, we have learned how to integrate Google's Custom Search in a webpage. Hope this will be helpful for someone out there!