Wyszukiwarka po własnej stronie - szybko i bezpłatnie

Jeśli myślimy o wyszukiwarce internetowej to najczęściej mamy na myśli Google. A w momencie, kiedy na stronie mamy umieścić wyszukiwarkę to czemu nie skorzystać z dobrodziejstw, które oferuje ta usługa? Zwłaszcza teraz, kiedy można bezboleśnie umieścić wyniki wyszukiwania po naszej stronie praktycznie nadając im dowolny styl - przez co integracja strony zostaje zachowana. Zatem zapraszam do Google AJAX Search API.

Jak praktycznie wszystkie API Google'owe musimy wygenerować kod API i uruchomić API poprzez komendę google.load('search', '1'). Następnie obsługując zdarzenie wczytania się usługi uruchamiamy poszczególne wyszukiwarki (mamy dostęp także m.in. do wyszukiwarki obrazów, wideo itd.).

<script type="text/javascript" src="http://www.google.com/jsapi?key=KLUCZ_API"></script>

<script type="text/javascript">
google.load("search", "1");
function OnLoad() {
   ...
}
google.setOnLoadCallback(OnLoad);
</script>

Po załadowaniu usługi do dyspozycji otrzymujemy obiekt google.search.SearchControl. Jego zadaniem jest zarządzanie wyświetlaniem wyników. Do niego też podłączamy obiekty poszczególnych wyszukiwarek. Dla nas najważniejsze jest wyszukiwanie treści - więc inicjalizujemy jedynie obiekt WebSearch i dodajemy go do szukania.

function OnLoad() {
  var searchControl = new google.search.SearchControl();
  var webSearch = new google.search.WebSearch();
  searchControl.addSearcher(webSearch);
}

W celu ograniczenia wyszukiwania do domeny wykonujemy metodę setSiteRestriction, gdzie jako parametr podajemy domenę.

function OnLoad() {
  var searchControl = new google.search.SearchControl();
  var webSearch = new google.search.WebSearch();

  webSearch.setSiteRestriction('michalbiniek.blogspot.com');

  searchControl.addSearcher(webSearch);
}

Całość wiążemy z węzłem o zadanym identyfikatorze.

function OnLoad() {
  var searchControl = new google.search.SearchControl();
  var webSearch = new google.search.WebSearch();
  webSearch.setSiteRestriction('michalbiniek.blogspot.com');
  searchControl.addSearcher(webSearch);

  searchControl.draw(document.getElementById("content"));
}

Kolejnym etapem jest wyciągnięcie z adresu URL informacji o wyszukiwanym słowie i uruchomienie wyszukiwania. Ponieważ nie każdy lubi samemu parsować adres URL - można wykorzystać gotowe rozwiązanie jak np. jQuery URL Parser.

function OnLoad() {
  var searchControl = new google.search.SearchControl();
  var webSearch = new google.search.WebSearch();
  webSearch.setSiteRestriction('michalbiniek.blogspot.com');
  searchControl.addSearcher(webSearch);
  searchControl.draw(document.getElementById("content"));

  // parametr z szukaną frazą to q
  searchControl.execute($.url.param('q'));
}

W tym miejscu kończy się JavaScript a zaczynają style CSS. Struktura poszczególnych wyników jest podana w dokumentacji Google, dzięki czemu można mniej więcej rozeznać się w klasach generowanego kodu HTML. Jednak lepiej samemu sprawdzić co zostało wygenerowane, bo czasami dokumentacja nie nadąża za zmianami w API. A oto przykładowy wycinek z dokumentacji dla wyniku z wyszukiwarki WebSearch:

<div class="gs-result gs-webResult">

  <!-- Note, a.gs-title can have embedded HTML
  // so make sure to account for this in your rules.
  // For instance, to change the title color to red,
  // use a rule like this:
  // a.gs-title, a.gs-title * { color : red; }
  -->
  <div class="gs-title">
    <a class="gs-title"></a>
  </div>
  <div class="gs-snippet"></div>

  <!-- The default CSS rule has the -short URL visible and
   // the -long URL hidden.
   //
   // If you want to reverse this, use a rule like:
   // #mycontrol .gs-webResult .gs-visibleUrl-short { display:none; }
   // #mycontrol .gs-webResult .gs-visibleUrl-long { display:block; }
  -->
  <div class="gs-visibleUrl gs-visibleUrl-short"></div>
  <div class="gs-visibleUrl gs-visibleUrl-long"></div>
</div>

Domyślnie Google nadaje elementom odpowiednie style - jeżeli chcemy, aby Google nie dodawał nic od siebie możemy podać parametr nocss podczas ładowania biblioteki google.load('search', '1', {'nocss': true}).

Gotowa całość wyszukiwarki wygląda mniej więcej tak:

HTML

<html>
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi?key=KLUCZ_API"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>  
    <script type="text/javascript" src="jquery.url.js"></script>
    <script type="text/javascript">
      // zawartość w bloku poniżej
    </script>
  </head>
  <body>
    <div id="content">
    </div>
  </body>
</html>

JavaScript

google.load("search", "1");
function OnLoad() {
  var searchControl = new google.search.SearchControl();
  var webSearch = new google.search.WebSearch();
  webSearch.setSiteRestriction('michalbiniek.blogspot.com');
  searchControl.addSearcher(webSearch);
  searchControl.draw(document.getElementById("content"));
  searchControl.execute($.url.param('q'));
}
google.setOnLoadCallback(OnLoad);

I w ten oto szybki i łatwy sposób mamy w pełni profesjonalną wyszukiwarkę po stronie. Warto pamiętać, że jeżeli śledzimy wyniki wyszukiwań w Google Analytics'ie to zapytania idą jako AJAX - czyli sami musimy obsłużyć akcję zliczania poprzez wywołanie adresu z parametrem słowa szukanego (oczywiście oprócz tego pierwszego). Wówczas warto skorzystać z funkcji callback'owych - do obsługi zdarzenia wyszukiwania. Oczywiście, żeby nie zliczyć podwójnie wyszukiwania pierwszego słowa, dodamy flagę, która sprawdza, czy zdarzenie wykonuje się po raz pierwszy.

var first = true;
function OnLoad() {
  var searchControl = new google.search.SearchControl();
  var webSearch = new google.search.WebSearch();
  webSearch.setSiteRestriction('michalbiniek.blogspot.com');
  searchControl.addSearcher(webSearch);
  searchControl.draw(document.getElementById("content"));
  searchControl.execute($.url.param('q'));

  searchControl.setSearchCompleteCallback(this, function(form) {
    if (first) {first = false; return;}
    var searchWord = form.input.value;
    _gaq.push(['_link', '/search.html?q='+searchWord]);
  });
}

Na koniec przykład z działającą wyszukiwarką po domenie michalbiniek.blogspot.com.