הטמעת תיבת חיפוש

אחרי שתיצרו את Programmable Search Engine, תוכלו להוסיף לאתר את Programmable Search Element. לשם כך עליך להעתיק קוד ולהדביק אותו ב-HTML של האתר במקום שבו ברצונך שמנוע החיפוש יופיע.

  1. בלוח הבקרה, לוחצים על מנוע החיפוש שבו רוצים להשתמש.
  2. בקטע בסיסי בדף סקירה כללית, לוחצים על קבלת קוד. צריך להעתיק את הקוד ולהדביק אותו בקוד מקור ה-HTML של הדף שלך, במקום שבו ברצונך שה-Programmable Search Element יופיע.

הרכיב <div class="gcse-search"></div> הוא placeholder – זה המקום שבו יתבצע עיבוד של רכיב החיפוש (תיבת החיפוש וגם תוצאות החיפוש).

<!-- כאן יש להזין את מזהה Programmable Search Engine שלך --> <script async src="https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga"></script> 
<div class="gcse-search"></div>

אפשר לנסות פריסות שונות

במקרים רבים, הגיוני שתיבת חיפוש תופיע בנפרד מתוצאות החיפוש. פריסה של שתי עמודות מאפשרת לך לעבד תיבת חיפוש באזור אחד של הדף (למשל, בסרגל הצד) ולהציג תוצאות באזור אחר (למשל, באזור הראשי של הדף).

כדי לשנות את פריסת המנוע, עוברים לקטע פריסה בדף מראה ותחושה בלוח הבקרה. לאחר בחירה ושמירה של הפריסה בת שתי העמודות בלוח הבקרה, יש לשנות גם את קוד ה-HTML של רכיב החיפוש.

<!-- כאן יש להזין את מזהה Programmable Search Engine שלך --> <script async src="https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga"></script> 
<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>

פריסה מעניינת נוספת היא האפשרות שמורכבת משני דפים. הכלי מאפשר לך להטמיע תיבת חיפוש משלך בדף אחד ולעבד את תוצאות החיפוש הרגילות בדף אחר באמצעות פרמטרים שבסרגל הכתובות.

בלוח הבקרה, בוחרים את פריסת שני הדפים ושומרים אותה. בדף אחד, מטמיעים תיבת חיפוש עצמאית ומשנים את המאפיין 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> יודע אילו תוצאות של שאילתות להציג.

אני רוצה לנסות

הבא...

ממשיכים אל הפעלת ההשלמה האוטומטית.