Intégrer Google sur votre blog WordPress

Google est aujourd’hui le moteur de recherche le plus pertinent disponible sur Internet. Que diriez-vous de l’utiliser à votre avantage pour améliorer la capacité de recherche sur votre site / blog ? Ce tutoriel a donc 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.

Capture décran - Création dun moteur de recherche personnalisée Google
Capture d’écran – Création d’un moteur de recherche personnalisée Google

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 ;
Capture décran - Saisie des informations nécessaires à la création du moteur
Capture d’écran – Saisie des informations nécessaires à la création du moteur

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 tutoriel, 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 aller plus loin, je vous invite à lire ces 2 tutoriels :

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. Honnêtement, ça donne une allure très professionnelle. Comme dirait l’autre, « that rocks ! »

Crédits photo : Tiger Pixel

39 commentaires

  1. Yves

    Mis à part que tu sélectionnes les blogs sur laquelle la requête de recherche est lancée, et qui est un sacré avantage (mais aussi ça peut être un inconvénient), y a t-il d’autres avantages que de rechercher par le biais du champ de recherches WordPress « classique » ou par le biais de Google « standard » ?

  2. Aurélien Denis

    Un autre avantage de taille : la recherche WordPress fonctionne quoiqu’il arrive alors que Google fonctionne par mots clés par rapport à son index. En fait, avec la recherche WordPress, tu peux inscrire n’importe quelle lettre et celui-ci te trouveras tous les articles utilisant celle-ci….pas très poussé donc. Google est donc nettement plus pertinent !

  3. SurfAnna

    Hello !
    Where do I put my code to embed on the results page ? I have created the /recherche page and pasted the code into the HTML of this page, but nothing shows up and the result are still displayed in a different page (like I had customized it before).
    thanks if you can help…

  4. SurfAnna

    Bon, ça y est, j’ai réussi à faire afficher la bonne page mais… il n’ y a rien dedans ! J’ai bien collé le code de résultat dans ma page recherche pourtant… et publié.
    Je vais attendre, puisque la nuit porte conseil. Il y a peut-être un délai avant que ça ne s’affiche ?

  5. Aurélien Denis

    @SurfAnna : tu n’aurais pas tenté de modifier le code fourni par Google, par hasard ? Le problème peut venir de ça – cela m’est déjà arrivé.

    Sinon, je te conseille de reprendre une par une les étapes car cela doit fonctionner.

    P.S : je peux te répondre en anglais ou en français.

  6. SurfAnna

    Damned, je suis faite !
    Oui, j’ai juste copier collé les bouts que je voulais… mais j’ai quand même revérifié 10 fois que tout correspondait ! Bref, tu as raison je vais faire un vrai copier-coller… Je reviendrai au rapport, Monsieur le Détective !

  7. calaestis

    Bonjour,

    Je trouve ton thème vraiment agréable, et ton blog m’a beaucoup servi mais je viens de voir qu’il y avait des drapeau permettant d’obtenir une traduction des pages. Utilises tu un plug in pour cela?

  8. Aurélien Denis

    @Li-An : le problème c’est que je ne vois pas le moteur de recherche Google sur ton blog mais seulement la barre de recherche traditionnelle de WordPress… As-tu insérer les bouts de code nécessaires ?

  9. Aurélien Denis

    @Li-An : c’est étrange en effet. Il doit y avoir une erreur dans un des paramètres. Aurais-tu modifié une partie du code fourni par Google ? Si c’est le cas, il est possible que l’erreur vienne de là.

  10. Aurélien Denis

    @Li-An : à vrai dire je n’utilise cette méthode d’affichage des résultats mais bon malgré tout je ne parviens pas à comprendre ce qui cloche. La page de recherche est-elle accessible de tous ? Je tâtonne pour essayer de trouver une solution… :?:

  11. Benjamin Denis

    @Samuel : Certainement, tu appliques à la div cse-search-results la propriété text-align:center et le tour est joué Ou autre solution, tu indiques une width (600px environ) puis un margin:13px auto;

    voilà voilà

  12. Samuel

    Ok je n’ai pas d’énormes connaissances du coup je comprends ce que tu veux me dire avec margin et text-align, mais je ne sais pas où le placer, mon code est celui-ci :

    <div id="cse-search-results"

    var googleSearchIframeName = « cse-search-results »;
    var googleSearchFormName = « cse-search-box »;
    var googleSearchFrameWidth = 600;
    var googleSearchDomain = « www.google.com »;
    var googleSearchPath = « /cse »;

    Merci pour ton aide !

  13. Benjamin Denis

    @Samuel : dans ta feuille de style CSS tu créés le style #cse-search-results et tu ajoutes les propriétés précédemment indiquées, ou plus simple, tu mets ceci :

    div style= »text-align:center » id….

    et normalement ça fonctionne

    PS : mets des vrais guillemets par contre, WP a mal interprété mon code

          1. Picool

            Donc oui : http://penspinning.fr
            J’ai rentré le code donc le moteur de recherche est présent (avec la prévisualisation ça marche désormais), mais n’importe quel requête ne donne rien
            Ca doit être un problème au niveau de la création de la page « recherche » mais je vois pas ce que je dois faire

  14. Timothée

    Bonjour,

    Merci pour ce tuto très bien fait et détaillé.
    J’ai cependant un problème. J’ai utilisé la méthode « résultats sur 2 pages » de Google CSE, cependant après de nombreux essais variés je me heurte au problème suivant : tant que j’affiche le formulaire et les résultats sur la même page tout va bien mais dès que je veux les afficher sur des pages différentes (en utilisant le code fourni par CSE pour cela) rien ne se passe et le mot « Loading… » apparait sans rien d’autre.

    Auriez-vous une idée du problème ?

    Page du formulaire : http://i-comptabilite.hrnet.eu/formulaire-moteur-google

    PS : j’ai testé avec le thème wordpress par défaut twtenty eleven et le problème reste le même.

  15. ALEX

    Avant tout, merci pour ce super article !! Par contre, j’ai un souci. En effet, j’arrive sans problème à insérer le moteur Google sur mon site mais par contre, sur ma sidebar, le cadre de recherche est minuscule et c’est le bouton “rechercher” qui prend le plus de place. J’espère me faire comprendre . Du coup, j’ai tenté d’aller dans les paramètres de google pour essayer de le personnaliser mais apparemment, impossible de faire ce que je souhaite : soit supprimer le bouton “rechercher” par exemple ou alors pouvoir avec le cadre de recherche sur une ligne et le bouton “rechercher” en dessous,…Merci d’avance !

Laisser un commentaire