Ce tutorial a pour objectif l’intégration d’un moteur de recherche personnalisé Google dans votre blog. Nous allons donc mettre à profit la puissance de Google et donner ainsi une touche professionnelle à votre blog.

Création du moteur de recherche personnalisé Google

Dans un premier temps, il nous faut créer un moteur de recherche personnalisé. Pour ce faire, rendez-vous sur : Google Recherche personnalisée.

Cliquez à présent sur le bouton situé à droite intitulé : Créer un moteur de recherche personnalisé. Si vous n’êtes pas identifié, inscrivez votre adresse et votre mot de passe correspondant à votre compte Google puis ouvrez une session.

Procédons maintenant au remplissage du formulaire :

• Informations générales : ici, rien de particulier qui ne requiert une explication supplémentaire. Suivez simplement les instructions ;
• Types de recherches : vous avez le choix entre 3 possibilités. Dans notre situation où il s’agit d’intégrer un moteur de recherche sur un blog, on privilégiera l’option par défaut c’est-à-dire Uniquement les sites que je sélectionne ;
• Sélection des sites : il nous faut désormais spécifier les sites à explorer.
  • Si votre blog se situe à la racine de votre site, inscrivez tout simplement votre nom de domaine (sans le http://). Par exemple, monblogwordpress.com ;
  • Si votre blog n’est pas situé à la racine de votre site, inscrivez alors l’emplacement de celui-ci en rajoutant la syntaxe suivante telle que : monsite.com/*wordpress* ;
  • Un dernier cas s’adresse aux utilisateurs WordPress ayant fait en sorte que l’URL affiché - par exemple, monsite.com/wordpress, s’affiche de cette manière : wordpress.monsite.com. Dans ce cas de figure, la situation n°1 prévaut ;

Pour finir, acceptez les conditions d’utilisation et cliquez sur Suivant.

Google vous confirme la création de votre moteur de recherche personnalisé. Notez que vous avez la possibilité de vous envoyer un e-mail de confirmation sur votre compte Gmail. Validez en cliquant sur Terminer.

Obtention du code a insérer

Dans cette seconde partie, nous verrons comment générer le code à insérer dans votre blog en vue d’intégrer votre moteur de recherche personnalisé Google.

Si vous avez bien suivi les étapes précédentes, vous devriez désormais être sur une page d’accueil permettant la gestion de vos différents moteurs de recherche.

Il nous faut donc obtenir le code du moteur. Pour cela, cliquez sur Panneau de configuration. De nombreuses options y sont proposées. Nous en verrons les plus importantes pour la suite de ce tutorial, mais n’hésitez pas à fureter parmi les différents onglets proposés.

Rendez-vous dans l’onglet Sites. Celui-ci est très important car nous allons vérifier que le moteur est configuré pour ne rechercher uniquement sur votre blog et non pas sur les liens qu’il serait susceptible d’y trouver dessus. Pour vérifier cela, cliquez sur l’URL de votre blog et cochez, si ce n’est déjà fait, la première option intitulée Toutes les pages dont l’adresse contient cette URL. Validez via le bouton Enregistrer.

Passons maintenant à l’apparence du moteur. Pour cela, ouvrez donc l’onglet Éléments graphiques. Ici, libre à vous de choisir un moteur utilisant JavaScript (activé par défaut) ou non et de modifier le code de couleurs des liens, du texte, des bordures, etc. Bien entendu, n’oubliez pas de sauvegarder les modifications apportées via le bouton Enregistrer figurant dans chaque module.

En route pour la dernière étape : l’obtention du code. Rendez-vous dans l’onglet Code et choisissez parmi les différentes options d’hébergement des résultats de recherche :

• L’hébergement est à votre charge et les résultats font donc partie intégrante du blog (la plus appréciable pour les visiteurs selon moi) :
  • Méthode iframe : vous affichez le moteur de recherche où vous le souhaitez sur votre blog (header, barre de navigation, sidebar - de sorte qu’il soit visible sur toutes les pages) et générez les résultats sur une page dédié à cet effet ;
  • Méthode de la superposition : les résultats s’affichent sur la même page que la recherche à la manière d’un pop-up sur la page (ou d’une image lightbox). Pas très pratique d’un point de vue ergonomique car je ne pense que les utilisateurs soient très à l’aise pour parcourir les différents résultats… ce n’est que mon avis ;
• Google créée une page pour héberger les résultats. Autrement dit, vous ne vous occupez pas de la partie résultats ;

Préférant la première solution iframe, je vous en décris le processus.

Dans la section Spécifier le détail des résultats de recherche, indiquez l’URL où s’afficheront les résultats de la recherche. Par exemple, http://monblog.com/recherche. N’oubliez pas de créer la page concernée !

Comme tout les programmes Google, celui-ci prend en charge le système publicitaire Adsense qui vous permet d’être rémunéré si vos visiteurs cliquent sur les publicités. Ici, vous devez choisir l’emplacement de celles-ci. Notez que vous pouvez affilier un compte Adsense via l’onglet Monétisation dont la procédure consiste à fournir son identifiant Adsense et de validez la confirmation par e-mail.

Attention, il est recommandé d’opter pour un affichage en haut et en bas pour la simple raison que les deux autres formules nécessitent une largeur de page considérable (supérieure à 600 pixels j’y je me souviens bien, sidebar exclue !).
Bien sûr, vous pourrez par la suite varier les dimensions mais Google impose néanmoins une valeur minimale. De même, il est impossible d’imposer des styles CSS non pris en charge.

Insertion du code

Ceci fait, il ne vous reste plus qu’à copier/coller les 2 bouts de code.

Le premier concerne le moteur de recherche.

Dans le cas d’un blog WordPress, vous pouvez :

• Soit, l’insérer dans la sidebar (colonne latérale) en insérant un widget texte dans lequel vous copierez le code en question ;
• Soit, l’insérer dans searchform.php accessible depuis le menu Thème puis Éditeur de thème. Ouvrez la page citée, supprimez tout puis collez-y le code Google. Bien entendu, tout dépend si l’emplacement de la barre de recherche vous convient (pour le modifier passer par la feuille de style CSS) ;

D’autres possibilités existent sans aucun doute, mais je n’ai pas eu l’occasion de les essayer, impossible donc pour moi de vous les exposer.

Le second code concerne l’affichage des résultats de recherche.

Après avoir créée une nouvelle page, affichez la source de celle-ci et collez-y le code obtenu. N’oubliez pas de publier la page. Vous remarquerez que la présence de la balise width vous permet d’indiquer la largeur de la page de résultats selon les fourchettes de taille réglementées par Google (voir paragraphe précédent).

Pour admirer le résultat, ouvrez votre blog puis effectuez une recherche. Si tout fonctionne, elle devrait s’afficher dans la page spécifiée plus haut.