Efektowna wyszukiwarka Google na twojej stronie Google AJAX Search API w praktyce

« 1 2

Modyfikacja wyglądu

Wygląd wyszukiwarki oraz wyników wyszukiwania modyfikujemy stylami CSS. Umożliwiają to liczne klasy zawarte w kodzie HTML, zwracanym przez Google. Najważniejsze są:

.gsc-search-box - formularz wyszukiwania,
.gsc-resultsHeader - nagłówek z ikonami zaznaczonymi na rysunku 4,
.gsc-result - pojedynczy wynik wyszukiwania,
.gsc-cursor-box - wskaźnik stronicowania wyników,
.gs-title - tytuł wyniku,
.gs-snippet - opis wyniku,
.gs-visibleUrl - adres URL wyniku.

Po zastosowaniu stylów z listingu 3:

[+]

Listing 3. Style CSS modyfikujące wygląd wyników wyszukiwania

CSS

 1. .gsc-search-box {
 2. border: 2px solid red;
 3. }
 4. .gsc-resultsHeader {
 5. border: 2px solid blue;
 6. }
 7. .gsc-result {
 8. border: 2px solid green;
 9. }
10. .gsc-cursor-box {
11. border: 2px solid yellow;
12. }
13. .gs-title {
14. font-family: "Trebuchet MS", sansserif;
15. }
16. .gs-snippet {
17. font-family: Georgia, serif;
18. }
19. .gs-visibleUrl {
20. font-family: "Courier New", mono
21. space;
22. }

Listing zwinięty - 22 linii

wyniki wyszukiwania będą wyglądały tak jak na rysunku 5. Do dokładnej analizy klas HTML w wynikach wyszukiwania warto wykorzystać Inspektora DOM. Pozwala on na wędrówkę po drzewie dokumentu.

Rys. 5. Wygląd wyników wyszukiwania po zastosowaniu stylów z listingu 3

W ten sposób poznamy dokładną strukturę zwracanego kodu HTML, wszystkie identyfikatory oraz klasy. Działanie inspektora DOM na wynikach wyszukiwania jest przedstawione na rysunku 6.

Rys. 6. Analiza struktury wyników wyszukiwania przy użyciu Inspektora DOM

Informacje o wykorzystaniu technologii Google

Licencja użytkownika usług Google AJAX Search API nakazuje umieszczenie logo Google na każdej stronie stosującej API. Zadanie to wykorzystujemy, wywołując metodę getBranding(), jak to pokazano na listingu 4. Jest to szczególnie istotne wtedy, gdy stosujemy style CSS, które ukrywają logo Google.

[+]

Listing 4: Dołączanie logo Technologia Google

JavaScript

 1. <html>
 2. <head>
 3. ...
 4. <script type="text/javascript">
 5.   google.load("search", "1");
 6.   function OnLoad()
 7. {
 8.   GSearch.getBranding(document.getElementById("branding"));
 9. }
10.   google.setOnLoadCallback(OnLoad);
11. </script>
12. </head>
13. <body>
14.   <div id="branding">Loading...</div>
15. </body>
16. </html>

Listing zwinięty - 16 linii

Hiperłącza

Przedstawiona na listingu 2 metoda execute() może być wywoływana ręcznie. Na przykład w obsłudze hiperłączy:

HTML

<a href="javascript:search.execute('Nikon D80');">Nikon D80</a>

W tym celu wystarczy wewnątrz metody OnLoad() zapamiętać referencję do obiektu search- Control. W takim przypadku możemy zrezygnować z wyświetlania formularza do wyszukiwania:

[+]

CSS

1. form.gsc-search-box {
2. display: none;
3. }

Listing zwinięty - 3 linii

Pamiętajmy, że w tym przypadku musimy samodzielnie wyświetlić logo Technologii Google.

[-]

Listing 5. Aktywacja wyszukiwarki hiperłączem

JavaScript

 1. <html>
 2. <head>
 3. ...
 4. <script type="text/javascript">
 5.   google.load("search", "1");
 6.   var search;
 7.   function OnLoad()
 8. {
 9.   GSearch.getBranding(document.getElementById("branding"));
10.   options = new GsearcherOptions();
11.   options.setExpandMode(GSearchControl.EXPAND_MODE_OPEN);
12.   var searchControl = new google.search.SearchControl();
13.   searchControl.addSearcher(new google.search.WebSearch(), options);
14.   searchControl.draw(document.getElementById("searchcontrol"));
15.   search = searchControl;
16. }
17. google.setOnLoadCallback(OnLoad);
18. </script>
19. <style type="text/css">
20. form.gsc-search-box {
21. display: none;
22. }
23. table.gsc-resultsHeader {
24. display: none;
25. }
26. #branding {
27. width: 110px;
28. }
29. </style>
30. </head>
31. <body>
32. <div id="branding">Loading...</div>
33. <div>
34. <a href="javascript:search.execute(&#8216;Nikon D80&#8217;);">Nikon D80</a>
35. </div>
36. <div id="searchcontrol"></div>
37. </body>
38. </html>

Listing zwinięty - 38 linii

Usługa REST

Google AJAX Search API pozwala na przeszukiwanie zasobów wyszukiwarki Google nie tylko z wykorzystaniem JavaScriptu, ale także przy użyciu skryptów wykonywanych po stronie serwera, a więc w PHP, Perlu, Ruby czy Pythonie. Wyszukiwanie w sieci WWW realizuje skrypt o adresie: http://ajax.googleapis.com/ajax/services/search/web

Ma on dwa obowiązkowe parametry: v oraz q. Parametr v ustala wersję oprogramowania (obecny interfejs Google AJAX Search API jest opatrzony numerem wersji 1.0), zaś q zawiera wyszukiwaną frazę. Adres: http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=ala zwróci wyniki wyszukiwania słowa ala w formacie JSON.

Listing 6 przedstawia skrypt, który wyszukuje frazę phpDocumentator.

[+]

Listing 6. Dostęp do zasobów Google z poziomu PHP

PHP

 1. <?php
 2.   $url =
    "http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=phpdocumentator";
 3.   $ch = curl_init();
 4.   curl_setopt($ch, CURLOPT_URL, $url);
 5.   curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
 6.   curl_setopt($ch, CURLOPT_REFERER, "http://gajdaw.pl");
 7.   $body = curl_exec($ch);
 8.   curl_close($ch);
 9.   $json = json_decode($body);
10.   echo $json->responseData->results[0]->url;
11.   echo $json->responseData->results[0]->title;
12.   echo $json->responseData->results[0]->content;
13. ?>

Listing zwinięty - 13 linii

Korzystając z biblioteki CURL, przekazujemy informacje o adresie, z którego nadchodzi żądanie (REFERER). Odebrane wyniki konwertujemy na obiekty:

$json = json_decode($body);

po czym wyświetlamy:

PHP

echo $json->responseData->results[0]->url;

Wszystkie wyniki wyszukiwania są zawarte w kolejnych elementach tablicy $json->responseData->results. Każdy wynik ma następujące składowe:

unescapedUrl
url
visibleUrl
cacheUrl
title
titleNoFormatting
content

Odebrane wyniki możemy wyświetlić, stosując dowolny kod HTML, jak to zostało przedstawione na rysunku 7.

Rys. 7. Wyniki wyszukiwania odebrane w PHP

Ładowanie bibliotek

Warto zwrócić uwagę, że w ramach usług Google AJAX Search API firma Google zapewnia dostęp nie tylko do własnego kodu, ale także do najpopularniejszych bibliotek JavaScript. Funkcja load(), której użyliśmy na listingu 1:

google.load("search", "1");

pozwala na załadowanie bibliotek jQuery, prototype, script.aculo.us, MooTools oraz dojo:

[+]

1. google.load("jquery", "1.2.3");
2. google.load("prototype", "1.6");
3. google.load("scriptaculous", "1.8.1");
4. google.load("mootools", "1.11");
5. google.load("dojo", "1.1.1");

Listing zwinięty - 5 linii

Skrypt przedstawiony na listingu 7 nie wymaga umieszczania na serwerze biblioteki jQuery, co pozwoli zmniejszyć obciążenie łącza.

[+]

Listing 7. Google API: Ładowanie biblioteki jQuery

JavaScript

 1. <html>
 2. <head>
 3. ...
 4. <script type="text/javascript">
 5.   google.load("jquery", "1.2.3");
 6. </script>
 7. <script type="text/javascript">
 8.
    $(document).ready(function(){$(&#8216;p&#8217;).mouseover(function(){$(this).add
    Class(&#8216;inny&#8217;);});
 9.   $(&#8216;p&#8217;).mouseout(function(){
10.   $(this).removeClass(&#8216;inny&#8217;);
11.   });
12.   });
13. </script>
14. </head>
15. <body>
16.   <p>Wskaż tekst myszką!</p>
17. </body> </html>

Listing zwinięty - 17 linii

Jak widać, Google AJAX Search API zezwala na dużą dowolność w konstruowaniu własnej wyszukiwarki, zarówno w kwestii jej osadzenia na stronie, jak i doboru uruchamianych skryptów. Jest to idealne rozwiązanie dla każdego webmastera, który chciałby wzbogacić swój serwis o wyszukiwarkę od firmy Google.

15 grudnia 2008

« 1 2

Powiązane publikacje

Google TV - internet w telewizorze

Ciekawe patenty na AJAX-a

Skomentuj
ten artykuł

Komentarzy: 2

piątek, 19.12.2008 11:18Adrian J

To pozwala na przeszukanie tylko internetu. Jednak jest pewien przypadek jest pewnie jakas funkcja ktora pozwoli na przeszukanie w googlach wedlug slowa tylko twojej strony www. Trzeba po prostu przejrzec API Googla dla tego modulu. Np jak wpiszesz w wyszukiwarce "wifi site:http://wifi.owe.pl" wyszuka wszystkie wyniki dla slowa wifi ze strony wifi.owe.pl

wtorek, 16.12.2008 22:56rafał

Czy pozwala to na przeszukiwanie tylko internetu czy też własnej strony jak starsze rozwiązania.
Nie wiem czemu ale pana artykuły zawsze ciężko mi się czyta, takie lekko chaotyczne i niedopowiedziane

Zobacz wszystkie komentarze »

Autor

Włodzimierz Gajda

Artykuły tego autora:

» Ćwiczenia w programowaniu aplikacji...
[INTERNET Maker]
» MathML - matematyka na stronach WWW
[INTERNET Maker]
» Propel - porady jak rozwiązać podstawowe...
[INTERNET Maker]
» AJAX Kurs od podstaw - jQuery
[INTERNET Maker]
» Poznaj Yahoo! API
[INTERNET Maker]

Pozostałe publikacje

Pokaż, do czego używasz Linuksa - i wygraj!

Novell wraz z grupą partnerów zaprasza wszystkich chętnych do udziału w międzynarodowym konkursie (www.howdoyoulinux.com) na krótki film wideo w najciekawszy sposób przedstawiający zastosowania systemu Linux.

Polecamy:

Na skróty:

Nasze serwisy:

Efektowna wyszukiwarka Google na twojej stronie Google AJAX Search API w praktyce

Modyfikacja wyglądu

Informacje o wykorzystaniu technologii Google

Hiperłącza

Usługa REST

Ładowanie bibliotek

Autor

Włodzimierz Gajda

Pozostałe publikacje

Pokaż, do czego używasz Linuksa - i wygraj!

Newsletter