เมื่อสร้าง Programmable Search Engine แล้ว คุณจะเพิ่มองค์ประกอบ Programmable Search ลงในเว็บไซต์ได้ ในการดำเนินการ คุณจะต้องคัดลอกโค้ดและวางลงใน HTML ของเว็บไซต์ในตำแหน่งที่ต้องการให้เครื่องมือค้นหาปรากฏ
- ในแผงควบคุม ให้คลิกเครื่องมือค้นหาที่คุณต้องการใช้
- ในส่วนพื้นฐานของหน้าภาพรวม ให้คลิกรับโค้ด คัดลอกโค้ดแล้ววางลงในซอร์สโค้ด HTML ของหน้าเว็บที่คุณต้องการให้องค์ประกอบ Programmable Search ปรากฏ
องค์ประกอบ <div class="gcse-search"></div>
เป็นตัวยึดตำแหน่ง ซึ่งจะแสดงองค์ประกอบการค้นหา (ทั้งช่องค้นหาและผลการค้นหา)
<div class="gcse-search"></div>
การลองใช้เลย์เอาต์แบบต่างๆ
ในหลายกรณี การที่ช่องค้นหาปรากฏอย่างอิสระจากผลการค้นหาเป็นเรื่องที่ดี เลย์เอาต์แบบ 2 คอลัมน์ช่วยให้คุณแสดงช่องค้นหาในพื้นที่หนึ่งของหน้าเว็บ (เช่น ในแถบด้านข้าง) และแสดงผลการค้นหาในอีกพื้นที่หนึ่ง (เช่น พื้นที่หลักของหน้าเว็บ)
หากต้องการเปลี่ยนเลย์เอาต์ของเครื่องมือ ให้ไปที่ส่วนเลย์เอาต์ของหน้ารูปลักษณ์ในแผงควบคุม หลังจากเลือกและบันทึกเค้าโครง 2 คอลัมน์ในแผงควบคุมแล้ว คุณยังต้องเปลี่ยนโค้ด HTML สำหรับองค์ประกอบการค้นหาด้วย
<div style="border: 1px solid blue;">
Area 1 (for example a sidebar)
<div class="gcse-searchbox"></div>
</div>
<div style="border: 1px solid red;">
Area 2 (for example main area of the page)
<div class="gcse-searchresults"></div>
</div>
เลย์เอาต์ที่น่าสนใจอีกรูปแบบคือตัวเลือกแบบ 2 หน้า ซึ่งจะช่วยให้คุณใช้ช่องค้นหาของคุณเองในหน้าหนึ่งและแสดงผลการค้นหามาตรฐานในอีกหน้าหนึ่งได้โดยใช้พารามิเตอร์ในแถบที่อยู่
เลือกและบันทึกรูปแบบ 2 หน้าในแผงควบคุม ใช้ช่องค้นหาแบบสแตนด์อโลนในหน้าหนึ่ง โดยเปลี่ยนแอตทริบิวต์ resultsUrl
ให้ชี้ไปยัง URL ที่ต้องการแสดงผลการค้นหา
<script async src="https://cse.google.com/cse.js?cx=YOUR_ENGINE_ID"></script>
<div class="gcse-searchbox-only" data-resultsUrl="YOUR_RESULTS_PAGE_URL"></div>
ในการใช้หน้าผลการค้นหาแบบสแตนด์อโลน ให้วางข้อมูลโค้ดของผลลัพธ์ลงในหน้าผลลัพธ์ของคุณ:
<script async src="https://cse.google.com/cse.js?cx=YOUR_ENGINE_ID"></script>
<div class="gcse-searchresults-only"></div>
ตอนนี้คุณสามารถเรียกใช้ผลการค้นหาในหน้านี้โดยการส่งอาร์กิวเมนต์ "q" ใน URL ดังนี้
https://my-results-page-url.com/?q=myQuery
จดพารามิเตอร์ q=myQuery ในแถบที่อยู่ - วิธีนี้จะช่วยให้องค์ประกอบ <div class="gcse-searchresults-only"></div>
รู้ว่าจะแสดงผลการค้นหาใด