30 juin 2008
Inclure un moteur de recherche Google sans pub sur son blog
Etiquettes: google, normal ou avancé, recherche
Mode: normal et avancé
Note: ce qui suit n'est utilisable que si votre blog est indexé par Google. Donc vous ne pourrez pas mettre cela en place à la création du blog.
Pour vérifier que votre blog est indexé, tapez son adresse complète dans la page de recherche Google, s'il vous trouve, c'est bon.
Sinon, vous pouvez soumettre votre adresse ici.
Google propose un service appelé "moteur de recherche personnalisé".
Il permet d'intégrer très facilement un moteur de recherche sur un site, selon plusieurs méthodes.
Je vais décrire celle que j'utilise ici, un champ de recherche sur la page, et l'affichage des résultats sur une page hébergée par Google.
Tout d'abord, il faut avoir un compte Google. Si vous n'en avez pas déjà un, c'est ici que ça se passe pour s'inscrire.
Ensuite, on va se rendre sur cette page et cliquer sur le gros bouton "créer un moteur de recherche personnalisé".
On arrive sur la page de création où il suffit de remplir les champs.
Il faut au moins un nom, une description et un site à explorer.
Pour que le moteur ne recherche que sur son propre blog, sous types de recherches on laisse coché le bouton "uniquement les sites que je sélectionne" et en-dessous dans site à explorer on mets l'adresse de son blog, par exemple http://webbricolo.canalblog.com (exemple pris totalement au hasard).
Enfin, sous sélectionner une édition, on va laisser cocher "standard" pour avoir la version gratuite. Si vous ne voulez pas voir les liens commerciaux dans les résultats de recherche, cochez la case "Ne pas diffuser d'annonces sur les pages de résultats". Il faut juste avoir conscience qu'on n'en a pas le droit en tant que personne individuelle (option réservée
aux organisations à but non lucratif, aux établissements d'enseignement
et aux administrations) et qu'il peut donc y avoir des conséquences (reste à savoir lesquelles).
La page suivante vous propose de tester votre moteur, cela permet de voir s'il n'y a pas eu d'erreur dans la saisie de l'adresse du site par exemple (note, cela peut demander un peu de temps avant d'être opérationnel, si ça ne fonctionne pas du premier coup tentez une deuxième fois avant de revenir en arrière).
Si c'est ok, on clique sur "terminer" et on est redirigé vers la page d'administration de ses moteurs de recherche. Cette page se présente comme ça:
Vous remarquerez qu'on peut créer plusieurs moteurs personnalisés (un pour chaque blog qu'on possède par exemple).
Pour chaque moteur on a le menu:
page d'accueil:
lien vers la page d'accueil du moteur. En effet, on peut utiliser une page à part au lieu d'intégrer un champ de recherche sur son blog. Cette page indique le nom du moteur, et diverses autres infos. Une image valant mieux qu'un long discours:
Cela peut être utile à ceux qui sont en mode normal et qui ne veulent pas s'embêter à essayer de placer le code dans une colonne. Il suffit de mettre un lien vers cette page.
Panneau de configuration:
C'est là qu'on va choisir la façon d'intégrer le moteur à son site, et qu'on va pouvoir personnaliser un peu l'apparence de la page de résultats.
Une fois dans le panneau de configuration, on va aller dans "éléments graphiques" dans le menu horizontal du haut.
En premier on peut choisir l'apparence du champ de recherche.
Ensuite, on va définir les couleurs de la page de résultats, et on peut y ajouter un logo.
Pour récupérer le code du champ de recherche, on va aller dans "code".
Là on trouve un truc qui ressemble à ça:
<form action="http://www.google.com/cse" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="007086346091578081264:zxeg9uy-4f8" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="Rechercher" />
</div>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box〈=fr"></script>
size="31" défini la largeur du champ de recherche, à adapter suivant là où vous mettez le vôtre. Par exemple, moi j'ai mis size="25" pour qu'il entre dans la largeur de ma colonne.
value="rechercher" défini le texte qui s'affiche sur le bouton. Moi j'ai mis value="Trouver".
On peut mettre une valeur par défaut dans le champ, qui s'effacera quand on cliquera dessus (ça aura aussi l'avantage de faire disparaître le logo Google si on a choisi la présentation avec filigrane). Pour cela, on va ajouter les attributs value et onclick à l'input adéquat, par exemple:
<input type="text" name="q" size="25" value="recherche" onclick="if (this.value=='recherche') this.value=''"/>
Enfin, on peut appliquer un style sur le div afin de le positionner, ou d'ajouter un fond, etc.
Au final, et pour exemple, voici le code utilisé sur ce blog:
<form action="http://www.google.com/cse" id="cse-search-box">
<div >
<input type="hidden" name="cx" value="007086346091578081264:zxeg9uy-4f8" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="25" value="rechercher dans ce blog" onclick="if (this.value=='rechercher dans ce blog') this.value=''"/>
<input type="submit" name="sa" value="Trouver sur ce site" />
</div>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box〈=fr"></script>
Bien sûr, il faudra recopier le code sur toutes les pages où on veut que le champ apparaisse.
Lien complémentaire: comment placer un code dans une colonne en mode normal chez Alérion.
