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

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

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

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

<!-- Insert your your Programmable Search Engine ID here --> &lt;script async src=&quot;https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga&quot;&gt;&lt;/script&gt; 
<div class="gcse-search"></div>

התנסות בפריסות שונות

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

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

<!-- Insert your your Programmable Search Engine ID here --> &lt;script async src=&quot;https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga&quot;&gt;&lt;/script&gt; 
<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> יודע אילו תוצאות של שאילתות להציג.

רוצים לנסות?

הבא...

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