Benutzerdefinierte Google -Search -API -Setup -Tutorial

Dieses Tutorial zeigt Ihnen, wie Sie eine benutzerdefinierte Google -Such -API in Ihr Blog oder Ihre Website integrieren und ein raffinierteres Sucherlebnis bieten als Standard -WordPress -Themen -Suchfunktionen. Es ist überraschend einfach! Sie können die Suche auf Ihre Website einschränken und das Display an die Ästhetik Ihrer Website anpassen.

Hier erfahren Sie:

1. Erhalten Sie Ihren Google -API -Schlüssel: Dies ist Ihr Authentifizierungsschlüssel.
2. Integrieren Sie Ihren Schlüssel: Fügen Sie den Schlüssel unten in den JavaScript -Code ein.
3. Passen Sie die Suche an: Geben Sie Ihren Domänennamen für seitenbeschränkte Suchanfragen an.
4. Style die Suche: Passen Sie das CSS an das Design Ihrer Website an.
5. Genießen Sie Ihre erweiterte Suche!

JavaScript -Code:

google.load("search", "1", {"language" : "en"});

function initialize() {
  var searchControl = new google.search.SearchControl();

  // Site-restricted web search
  var siteSearch = new google.search.WebSearch();
  siteSearch.setUserDefinedLabel("jquery4u.com"); // Replace with your domain
  siteSearch.setUserDefinedClassSuffix("siteSearch");
  siteSearch.setSiteRestriction("jquery4u.com"); // Replace with your domain
  searchControl.addSearcher(siteSearch);

  // Add other search types (Web, News, Blog, Image, Book, Video)
  searchControl.addSearcher(new google.search.WebSearch());
  searchControl.addSearcher(new google.search.NewsSearch());
  searchControl.addSearcher(new google.search.BlogSearch());
  searchControl.addSearcher(new google.search.ImageSearch());
  searchControl.addSearcher(new google.search.BookSearch());
  searchControl.addSearcher(new google.search.VideoSearch());
  // Optional: LocalSearch, PatentSearch

  // Tabbed display
  var drawOptions = new google.search.DrawOptions();
  drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);
  searchControl.draw(document.getElementById("searchcontrol"), drawOptions);
}
google.setOnLoadCallback(initialize);

HTML -Code:

<div id="searchcontrol"></div>

CSS -Code:

#searchcontrol, .gsc-control, .gsc-results { width: 600px; }
.gsc-input { width: 200px; } /* Increased input width for better usability */
.gsc-branding { display: none; } /* Hide "powered by Google" */
.gs-title a { color: orange; font-weight: bold; }
#searchcontrol a { color: orange; }

Denken Sie daran, "jquery4u.com" durch Ihren tatsächlichen Domänennamen zu ersetzen. Dieses verbesserte CSS erweitert auch das Sucheingangsfeld für die einfachere Eingabe.

Google -Suche API AJAX FAQ:

Dieser Abschnitt beantwortet gemeinsame Fragen zur Verwendung der Google -Search -API AJAX. Details zu Implementierung, Vorteilen, Einschränkungen, kommerzieller Nutzung, Fehlerbehebung, Anpassung, Optimierung, Preisgestaltung und Unterstützung finden Sie im ursprünglichen Artikel.

Das obige ist der detaillierte Inhalt vonBenutzerdefinierte Google -Search -API -Setup -Tutorial. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!