How to add a google custom search to your moodle site?
- This used to be a big question to me. And it took me a lot of time to configure it out. As moodlers know, moodle has Global search, however, I don't know how to install SOLR. Therefore, I thought of the way how to add google custom search to my moodle site. I searched it on the internet but no luck - there wasn't any thread. At first, I copied the search box from other websites and change my ID. Yeah, the search box appeared but didn't work. Finally, I found this doc from google support and I realized that I missed one thing. That was search results
- There are a variety ways of adding google custom search to your moodle site. However, here's the easiest way to do it.
1. Visit https://cse.google.com/cse/ to get your own code for your site. I recommend that in "Look and feel" you should choose Overlay.
2. In your Moodle site. Go to Home ► Site administration ► Appearance ► Additional HTML - Within HEAD
a. To make Search Box appear, you add your code like the following:
<div style="margin: 0px 45px;"> or <div> it's up to you
<gcse:searchbox>
<script>
(function() {
var cx = '010155820032300695210:aosguinfkri';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
</gcse:searchbox>
</div>
* P/S:
+ You can also put this code in html block
+ Remember to change
010155820032300695210:aosguinfkri
+ In your moodle site - [Site administration - Security - Site security settings] - Remember to TICK [Open to Google] - YES
b. To make Search Results appear, you add your code like the following:
<div>
<gcse:searchresults></gcse:searchresults>
</div>
- In a word, to make Google Custom Search work properly, you need two parts; search box and search results.
+ You're done! Enjoy your work!
* HERE IS THE RESULT
- Google Custom Search box
- Google custom search results in my moodle site:
- GOOD LUCK!
- There haven't been any guides of how to add Google custom search to Moodle on the internet so far. That's the reason you have to quote the source if you copy my thread or write another guide based on my thread "thaytro.net All rights reserved" - Be polite!
* UPDATE GOOGLE CUSTOM SEARCH
- Since 2020 "The Programmable Search Engine branding guidelines have been updated"
a. To make Search Box appear, you add your code like the following:
<div style="margin: 0px 45px;"> or <div> it's up to you
<div style="margin: 0 45px;"> or it's up to you
<script async src="https://cse.google.com/cse.js?cx=010155820032300695210:aosguinfkri"></script>
<div class="gcse-search"></div>
</div>
b. To make Search Results appear, you add your code like the following:
<div class="gcse-search"></div>
Thầy cho em hỏi là dòng này nghĩa là gì ạ "var cx = '010155820032300695210:aosguinfkri'". Và như em làm theo thầy thì trên thanh google thu được là dòng chữ "Tìm kiếm tùy chỉnh" em muốn sửa thành "Your search" thì làm thế nào ạ?
1. ''010155820032300695210:aosguinfkri' là ID của khung tìm kiếm khi tạo Search Engine của google. Nếu em cần thì vào đây tạo cho website của em nha!
2. Muốn thay dòng chữ "Tìm kiếm tùy chỉnh" em muốn sửa thành "Your search" thì làm thế nào?
- Muốn thay thì em phải chèn bằng cách khác sử dụng HTML và CSS. Thaytro.net đang sử dụng cách đơn gian nhất.
- Nếu style lại thì cũng hạn chế vì nếu sử dụng này là mình đang dùng html, css và js của google, nên chỉ tùy chỉnh được một số phần thôi!