Google Custom Search element control API adalah program aplikasi antarmuka (application programming interface - API) yang mengatur fungsi dan properties yang ada pada Google Custom Search Engine (Google CSE). Custom Search element kini telah diperbarui, Google Custom Search Element Control API Versi 2.
Versi ini menawarkan beberapa sintaks yang tidak banyak memerlukan pengetahuan mengenai JavaScript. Custom Search element yang berupa search box dan results pages, ditampilkan dari pengaturan yang tersimpan pada server Google Custom Search Engine (CSE) bersama dengan kustomisasi dari pengguna Google CSE. Perubahan element ini tidak berpengaruh pada settingan akun CSE Anda. Anda cukup mengganti kode Google CSE versi lama yang ada pada situs Anda dengan versi terbaru.
Kode JavaScript custom search element Versi 2 di load secara asynchronous, jadi bisa menurunkan load time halaman situs Anda. Custom Search Control API ini telah support untuk browser Firefox 1.5+, IE6+, Safari, Opera 9+, dan Chrome.
Tipe Custom Search Element
Tipe Custom Search Element terdiri dari 4 macam. Hal inilah yang menjadi perbedaan dengan Custom Search Element versi lama. Karena Anda dapat memisahkan antara elemen search box dan Results page.
- standard <gcse:search>: search box dan search result ditampilakan bersamaan.
- 2 kolom <gcse:searchbox> dan <gcse:searchresults>: search box dan search result tampil terpisah.
- Hanya searchbox <gcse:searchbox-only>: Hanya menampilkan search box.
- Hanya search results <gcse:searchresults-only>: Hanya menampilkan search result.
Berikut Contoh sederhana kode Google CSE dengan Custom Search Element Control API:
- Tempatkan kode berikut sebelum kode </body> website Anda
<script>
(function() {
var cx = '123:456';// kode ID Google CSE Anda
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
})();
</script>
Jangan lupa untuk mengganti kode ID CSE dalam kode tersebut, dengan kode ID Google CSE Anda.
- Kemudian tempatkan kode berikut di situs Anda, dimana search box dan result page akan di tampilkan.
<gcse:search></gcse:search>
Kode di atas akan menampilkan result page dengan url query dengan parameter q (default), misalnya http://www.example.com?q=lady+gaga.
HTML5-valid div tags
Anda dapat menggunakan tag div untuk menampilkan kotak pencarian dan/atau hasil pencarian. Contoh kodenya seperti ini:
<div class="gcse-search" data-resultsUrl="http://www.example.com" data-newWindow="true" data-queryParameterName="s" ></div>
Custom Search Element Control API Versi 2 terbaru
google.search.cse.element merupakan objek terbaru dari Custom Search Element versi 2. Ada 4 metode yang digunakan yaitu:
- google.search.cse.element.render()
- google.search.cse.element.go()
- google.search.cse.element.getElement()
- google.search.cse.element.getAllElements()
Dengan metode google.search.cse.element.render() Anda dapat menggunakan tag div ID untuk menampilkan CSE.
Menggunakan Javascript untuk menampilkan element
Anda dapat menggunakan API JavaScript untuk mempercepat load halaman dengan menetapkan value “explicit“. Value explicit untuk metode google.search.cse.element.render() atau google.search.cse.element.go().
window.__gcse = {
parsetags: 'explicit',
callback: myCallback
};
Contoh penggunaan Javascript untuk Custom Search Element Control API Versi 2 terbaru dengan menggunakan metode google.search.cse.element.getElement(), eksekusi query “news”, dan penempatan gname “test”.
<gcse:search gname="test"></gcse:search>
<script>
var myCallback = function() {
if (document.readyState == 'complete') {
var element = google.search.cse.element.getElement('test');
element.execute('news');
} else {
google.setOnLoadCallback(function() {
var element = google.search.cse.element.getElement('test');
element.execute('news');
},true);
}
};
window.__gcse = {
parsetags: 'onload',
callback: myCallback
};
(function() {
var cx = '123:456';// kode ID Google CSE Anda
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
})();
</script>
Dokumentasi lengkap untuk atribut/properti elemen custome search ini bisa dipelajari melalui halaman situs Google Developer Custom Search Element Control API v2New!.