« 40 nouveaux habillages disponibles | Accueil | Enrichissez le contenu de vos notes TypePad »

12/09/2008

Moteur de recherche personnalisé et AJAX

Proposer un moteur de recherche sur son blog est souvent un casse-tête en terme d'ergonomie et d'organisation du blog.

Sur TypePad, vous pouvez notamment :
- vous en remettre à un Widget, type Blogbar ou Rollyo, simple à configurer et installer sur le blog, sans nécessiter de connaissances techniques particulières,
- faire appel à une recherche Google depuis votre blog, via un copier/coller de HTML dans une TypeListe de Notes,
- mieux encore, via les Moteurs de recherche personnalisés de Google, vous pouvez créer votre propre index de recherche (par exemple une sélection de sites et blogs de votre réseau) puis là encore faire appel à un copier/coller de HTML/JS dans une TypeListe de Notes.
Mais côté ergonomie, la page de résultats appelée sera toujours différente de votre blog ce qui peut s'avérer frustrant, voir déroutant pour des lecteurs peu avertis.
Image_8 Alors, si vous êtes motivés, disposez d'un compte TypePad pro et d'un minimum de connaissance technique et un peu de patience, nous vous proposons un petit tutoriel pour obtenir le résultat visible sur le Blog de la Communauté, à savoir :
- Un moteur de recherche personnalisé (reprenant uniquement les informations de Tout sur TypePad, Blogs à la Une, Blog de la Communauté et Portail des blogs),
- Une utilisation de l'Ajax Search API,
- Une présentation des résultats dans votre colonne de contenu (transparence complète pour l'utilisateur).

Envie de tenter votre chance ?

Pré-requis :
- Un Moteur de recherche personnalisé Google (gratuit et à configurer ici : http://www.google.com/coop/cse/?hl=fr)
- Une clé API pour l'AJAX API Google (rendez-vous ici : http://code.google.com/intl/fr/apis/ajaxsearch/key.html)
- Un compte TypePad Pro en habillage avancé

Dans votre administration de moteur personnalisé, veillez à bien spécifier dans la sous-rubrique "code" que vous souhaitez héberger les résultats sur votre site web via "la superposition". Déclarez alors l'URL du compte sur lequel le moteur sera utilisé.
Image_5
1ère étape : Création d'un nouveau module de gabarit dans TypePad

Ce module sera appelé dans notre colonne latérale, dans notre exemple, il s'appelle "ajaxkey-sidebar".
Tous les éléments relatifs à notre moteur de recherche vont y figurer.
Pour que cela fonctionne, sur votre blog vous n'aurez que quelques ajustements à faire (notamment changer la clé API et l'id du moteur de recherche, ces éléments étant attachés à un site et un seul).

A. Appel à la clé API pour la recherche Web
Collez le code suivant :

<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=MA_CLE_API_GOOGLE" type="text/javascript"></script>

en remplaçant (MA_CLE_API_GOOGLE) par la clé qui vous sera attribué par Google.

B. Génération du formulaire de recherche
Dans notre exemple, nous n'avons pris que la recherche web de Google, vous pouvez aussi ajouter une recherche Vidéo ou Géographique. Vous trouverez ainsi le détail de toutes les options possibles ici http://code.google.com/apis/ajaxsearch/documentation/reference.html
Le code à coller dans votre module de gabarit est le suivant :

<script type="text/javascript">
  var coreSearch;

  function SolutionLoad() {
  var alphaRoot = document.getElementById("alpha"); // emplacement du set de résultat à afficher dans la colonne centrale
  var controlRoot = document.createElement("div");
  alphaRoot.insertBefore(controlRoot, alphaRoot.firstChild);

    // création du formulaire de recherche
    coreSearch = new GSearchControl();
    coreSearch.setLinkTarget(GSearch.LINK_TARGET_SELF);
    coreSearch.setResultSetSize(GSearch.LARGE_RESULTSET);

    // modèle tabulé pour prévoir d'autres index de recherches à venir
    var searchFormElement = document.getElementById("searchform");
    var drawOptions = new GdrawOptions();
    drawOptions.setSearchFormRoot(searchFormElement);
    drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED);

    // identification des sources de recherche
    var searcher = new GwebSearch();
    searcher.setSiteRestriction("MON_ID_DE_SITE");
    coreSearch.addSearcher(searcher);

    coreSearch.draw(controlRoot, drawOptions);
  }

  function doCoreSearch(q) {
    coreSearch.execute(q);
  }

  registerLoadHandler(SolutionLoad);

  function registerLoadHandler(handler) {
    var node = window;
    if (node.addEventListener) {
      node.addEventListener("load", handler, false);
    } else if (node.attachEvent) {
      node.attachEvent("onload", handler);
    } else {
      node['onload'] = handler;
    }
    return true;
  }

</script>

Cette partie du code va permettre l'exécution de la recherche, l'affichage de la boîte de recherche et l'emplacement du set de résultats obtenu (la colonne #alpha dans notre exemple, libre à vous, fonction de votre design, de vos envies de spécifier un emplacement différent).
Il vous faut remplacer "MON_ID_DE_SITE" par l'id de votre moteur de recherche personnalisé. Ce code vous est donné dans la rubrique "Options avancées" de votre panneau de configuration du moteur de recherche personnalisé choisi.

Image_4

Il figure dans la sous-rubrique "Contrôle avancé des résultats de recherche à l'aide de l'API de recherche AJAX".
A titre d'exemple l'id de celui utilisé sur communaute.typepad.fr est 011722708300736722380:t-f9dq7lg-o. Vous devriez retrouver cet id depuis l'URL de la page d'accueil de votre moteur personnalisé (?cx=MON_ID_DE_SITE&hl=fr).

C. Emplacement de la boîte de recherche sur votre colonne latérale
Pour permettre le chargement de la boîte de recherche, nous allons finir par l'ajout d'un peu de HTML, comme vous le feriez pour un module de colonne latérale.

<!-- google search -->
<h2 class="module-header">Google Search</h2>
<div id="searchform">Loading...</div>

C'est dans cette zone que se chargera la boîte de recherche définie en B. Vous pouvez évidemment changer le titre.

2ème étape : Appliquer un style à l'ensemble
Pour cela, il suffit de s'appuyer sur la feuille de style générée en habillage avancée.
En en-tête de cette feuille de style, ajoutez les lignes suivantes :

@import url(http://www.google.com/uds/css/gsearch.css);
@import url(http://www.google.com/uds/css/gsearch_darkgrey.css);

Ce sont les styles par défaut proposés par Google. Pour les besoins de communaute.typepad.fr, nous les avons légèrement stylés. Vous pouvez appliquer vos propres styles en suivant la référence des classes donnée ici : Référence des styles
A titre d'exemple nous vous livrons ceux appliqués pour le blog Communauté :

/* Custom search  alpha colonne */
  #searchform { width : 100%; margin-bottom : 8px;}
  #alpha .gs-result .gs-title,
  #alpha .gs-result .gs-title * {
    color : #FF9933;
  }

  #alpha .gsc-resultsHeader {
    border-bottom-color : #636363;
  }

  #alpha .gsc-control {
    width : 100%;
  }

  #alpha .gsc-tabHeader.gsc-tabhActive {
    border-left: 1px solid #636363;
    border-right: 1px solid #636363;
    border-top: 2px solid #FF9933;
    background: #e9e9e9;
  }

  #alpha .gsc-tabHeader.gsc-tabhInactive {
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-top: 2px solid #636363;
    background: black;
  }

Ce code est à copier/personnaliser en fin de feuille de style.

3ème étape : charger le module de gabarit dans votre colonne latérale
C'est la partie la plus simple, il suffit d'éditer votre gabarit de colonne latérale (sidebar.inc dans notre exemple) et d'y coller l'appel à votre module de gabarit fait lors de la 1ère étape soit :

<$MTInclude module="ajaxkey-sidebar"$>

Placez-le à l'endroit désiré, en veillant bien à ne pas le placer au milieu d'un module existant.

Pour finir, il ne nous reste plus qu'à republier l'intégralité du blog et c'est terminé !

TrackBack

URL TrackBack de cette note:
https://www.typepad.com/services/trackback/6a00d83451c82369e2010534a4867c970c

Voici les sites qui parlent de Moteur de recherche personnalisé et AJAX :

Commentaires

Les commentaires sont modérés, ils n'apparaîtront qu'après validation par l'auteur.

Créez votre blog !

Solution complète. Aucune installation. Simple et puissant.

Nos recommandations

    Statut TypePad