Recherche personalisée avec l'API Ajax Google

J’ai ajouté une recherche personalisée à ma page à l’aide de l’API Ajax de Google. Ce qui m’appparaissait simple au premier coup d’oeil, en consultant les nombreux exemples fournis, s’est quelque peu compliqué par la suite lorsque j’ai mis la main à la pâte. Je présente ici la démarche qui s’applique à mon cas mais à d’autres aussi certainement. Le résultat est visible sur ma page dans la colonne de gauche.

1Obtenir la clé de base pour l’API Goggle.  Cette clé est nécessaire pour toutes les applications développées avec l’APi Google, elle sert à vous identifier,  et n’est valide que pour un domaine à la fois.

2:  Sur votre blogue ou page web, il vous faut ajouter un script qui défini la recherche personalisée souhaitée. L’éventail des possibilités est très grand et les subtilités du script abondent – on a qu’à consulter les échanges du Groupe de discussion de l’API Google pour s’en rendre compte.

Si vous n’avez pas accès au thème de votre page web (c’est le  cas par exemple pour les utilisateurs de wordpress.com) vous devrez placer le script sur une page publiée ou encore dans un widget texte acceptant le code html. Aussi, dans ce cas, vous devrez inclure dans le script la description du style CSS pour la présentation du contrôle sur la page. Dans mon cas, j’importe le style à partir de mon serveur [@import url(../mygsearch.css)]. La feuille de style que j’utilise est la suivante: [mygsearch.css]. Il est aussi possible d’importer dans votre script la feuille de style utilisée par Google:

< style type="text/css">
@import url(http://www.google.com/uds/css/gsearch.css);
< /style>

3:  Le script ajouté à ma page est le suivant, le code est commenté pour mieux le comprendre:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Using Query - Google AJAX Search API Sample</title>
/* début du style */
<style type="text/css">
@import url(../mygsearch.css);
body *, table *,
body {
}
/* largeur du contrôle et marge à gauche */
.search-control { margin: 5px; }
.gsc-control { width : 300px; }
/* forme longue de l'url comme résultat */
.gsc-webResult div.gs-visibleUrl-long {
display : block;
}
.gsc-webResult div.gs-visibleUrl-short {
display : none;
}
</style>
/* fin du style */
/* appel de la recherche sur Google avec votre clé API */
<script src="http://www.google.com/uds/api?file=uds.js&v=0.1&key= votre clé API Google"></script>
<script language="Javascript" type="text/javascript">//<![CDATA[
function OnLoad() {
/*mode de présentation sur la page - tabulation */
var tabbed = new GSearchControl();

/* termes addidionnels définissant la recherche */
searcher = new GwebSearch();
/* libellé pour la tabulation */
searcher.setUserDefinedLabel("VolvoxSoft");
/* restreindre la recherche à quelques domaines seulement */
searcher.setSiteRestriction("volvoxsoft.com/ OR volvox.wordpress.com/");
/* si nécessaire, ajouter des domaines à ignorer */
searcher.setQueryAddition("-site:http://xooit.org/~*");
tabbed.addSearcher(searcher);

/* recherche sur les sites de news */
searcher = new GwebSearch();
searcher.setUserDefinedLabel("News");
searcher.setQueryAddition("in the news");
tabbed.addSearcher(searcher);

/* recherche d'un type de fichier */
searcher = new GwebSearch();
searcher.setUserDefinedLabel("Pdf");
searcher.setQueryAddition("filetype:pdf");
searcher.setSiteRestriction("volvoxsoft.com/ OR volvox.wordpress.com/");
tabbed.addSearcher(searcher);

/* recherche d'images */
searcher = new GimageSearch();
searcher.setUserDefinedLabel("Images");
searcher.setSiteRestriction("volvoxsoft.com/ OR volvox.wordpress.com/");
tabbed.addSearcher(searcher);

var drawOptions = new GdrawOptions();
drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED);
/* search_control_tabbed est mon élément de style contenant le formulaire de recherche */
tabbed.draw(document.getElementById("search_control_tabbed"), drawOptions);
/*  terme à chercher initialement, ou rien */
tabbed.execute("volvox globator");
}
/* fin de la fonction API Ajax et fermeture du script */ GSearch.setOnLoadCallback(OnLoad);
//]]>
</script>
</head>
<body>
/* si le script est en erreur c'est l'avertissement 'Loading...' qui apparait */
<div id="search_control_tabbed">Loading...</div>
</body>
</html>

Vous pouvez adapter ce script selon vos besoins ou en créer un de toute pièce à partir des exemples et de la documentation fournie par Google ou par les usagers du Groupe de discussions de l’API.

Alternative:

Comme alternative à l’élaboration d’un script de toute pièce, il est possible de créer rapidement un moteur de recherche [guidé par Google: Google Custom Search Control & Google Custom Search] et d’utiliser la clé l’identifiant dans un court script. J’ai testé cette façon de faire pour me rendre compte que les possibilités sont beaucoup moindres que la façon précédente. Claude Lafrenière [Le Climenole] aborde le sujet du moteur de recherche Google personalisé à la section 3d de cet article. En fin de procédure, vous obtenez de Google un clé identifiant votre contrôle (CSE), cette clé est insérée dans un court script placé sur votre page. Dans ce cas, c’est Google qui bâti la fonction de recherche à l’aide des indications que vous lui donnez, le détail du script est conservé dans son serveur et vous n’y avez pas directement accès. Le code à insérer sur votre page se limite à appeler le contrôle et à le présenter.

Exemple:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Tabbed Mode - Google AJAX Search API Sample</title>
<style type="text/css">
body *, table *,
body {
}
#search_control_tabbed .gsc-control { width : 300px; }
.search-control { margin: 5px; }
</style>
/* clé API Google */
<script src="http://www.google.com/jsapi?key=votre clé API" type="text/javascript"></script>
<script language="Javascript" type="text/javascript">//<![CDATA[
google.load("search", "1" , {"nooldnames" : true}, {"nocss" : true}, {"language" : "fr"});

function init() {
/* Contrôle identifié par sa clé (CSE) */
var customSearchControl = new google.search.CustomSearchControl('clé identifiant le contrôle');
/* Insérer le contrôle dans la balise appropriée du style */
customSearchControl.draw('search_control_tabbed');
/* recherche initiale ou rien */
customSearchControl.execute('');
}
google.setOnLoadCallback(init);
//]]>
</script>
</head>
<body>
<div  id="search_control_tabbed">Loading</div>
</body>
</html>

Plus d’information:

Google AJAX API Playground: toutes les références utiles pour bâtir sa propre fonction de recherche exploitant les possibilités d’AJAX et de l’API Google.

API Code Playground: quelques exemples d’application du langage API de Google.

Google AJAX API: le tout AJAX API de Google (recherche, cartographie etc.)

Commentaires

  1. mac97000 a écrit:

    Bonjour,

    je possède une base de données dans laquelle j’enregistre différentes informations qui peuvent être rédigées dans différentes langues.

    Au moment de l’affichage je souhaite faire un tri par langue.

    Comme je ne suis pas à l’origine de l’insertion dans la base, je n’ai pas de moyen d’ajouter un critère ou un champ langue.

    Savez vous si il est possible de détecter la langue du texte et de l’afficher seulement si il est en français ?

    Merci d’avance.

Exprimez vous!

*