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 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
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 aller plus loin, je vous invite à lire ces 2 tutoriels :
- Intégrer votre moteur de recherche Google dans Firefox, IE8 et plus : un guide complet pour vous apprendre comment proposer à vos visiteurs le moyen d’utiliser votre plugin de recherche via le navigateur ;
- Ajouter votre plugin de recherche personnalisé Google à l’annuaire Mycroft : apprenez comment soumettre votre moteur de recherche au projet Mycroft ;
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 ! »
33 commentaires pour “Intégrer Google sur votre blog WordPress”
Laisser un commentaire
Retrouvez des performances optimales sous Windows Vista avec ce guide gratuit réunissant les meilleures astuces pour optimiser Vista.
Télécharger e-Book "Booster Windows Vista"
Télécharger GRATUITEMENT l'ensemble des thèmes packs pour Windows 7 proposés sur Protuts.net.
Accéder aux thèmes
L'équipe Protuts.net a lancé le projet WordPress Channel, LA chaîne des tutoriels WordPress francophone multi-diffusion (iTunes, YouTube, DailyMotion, Facebook).
Accéder à WordPress Channel
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 » ?
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 !
[...] la recherche d’information pour les lecteurs (nouveaux widgets, mise en avant de la fonction de recherche Google) [...]
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…
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é.
Il y a peut-être un délai avant que ça ne s’affiche ?
Je vais attendre, puisque la nuit porte conseil.
@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.
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 !
@SurfAnna : normalement le problème devrait venir de là. Google n’aime pas que l’on essaie de modifier son code source…
Ayé, j’ai tout recopié / collé et ça marche ! merci pour tes bons conseils…
@SurfAnna : avec plaisir !
[...] Enfin, vous avez la possibilité de remplacer l’outil de recherche WordPress, situé dans la barre de navigation, par un moteur Google dédié à votre site / blog. Pour en savoir plus, consultez “Intégrer Google sur votre blog“. [...]
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?
@calaestis : oui, j’utilise le plugin Global Translator. J’ai d’ailleurs écris un article à ce sujet disponible ici : Créer un blog WordPress multilingue à l’aide de Global Translator. Bonne lecture !
Je viens de tenter le coup et j’obtiens avec le moteur des « pas de résultat » avec quelques tests. Un peu énervant…
@Li-An : pourrais-tu me donner l’adresse où se trouve ce moteur pour que je regarde ? Le site concerné est-il bien indexé par Google ?
Tu peux le tester là… A priori le site est bien indexé.
@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 ?
Oh, je suis désolé, je pensais avoir copié l’adresse de la page en question…
http://www.li-an.fr/blog/?page_id=3524
@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à.
Non, j’ai bêtement copié… C’est un peu mystérieux. J’ai testé toutes les écritures possibles pour le site mais ça ne donne rien dans les tests.
@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…
Oh, je ne te demande pas de résoudre ce problème étrange
. Je n’ai pas fait de lien vers la page en question mais elle est publique.
@Li-An : ah ben on peut toujours essayer !
[...] Intégrer Google sur votre blog : sans moteur de recherche vous ne pourrez pas faire grand chose… ; [...]
[...] : au préalable, il est nécessaire de mettre en oeuvre ce tutoriel sur l’intégration d’un moteur de recherche Google personnalisé sur votre blog car la suite de cet article est basé [...]
En suivant le tuto là ça a finalement fonctionné: http://buddypress.org/blog/community/google-custom-search-for-buddypress-wpmu/ (je pense donc que les adresses que je donnais n’étaient pas assez explicites)
@Li-An : si tout fonctionne alors tant mieux ! Et merci pour ce lien de qualité.
Excellent article, je viens de le mettre en place sur mon site. Tu saurais comment centrer le contenu de la page affichant les résultats de la recherche ?
Mercu
@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à
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 !
@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
Ok j’ai pigé, ça marche super merci ! Et merci pour tes articles !
Samuel
[...] La fichier searchform.php contient le code du moteur de recherche personnalisé Google. Ouvrez-le et collez-y votre propre code fourni par Google. Pour en savoir plus, consulter le tutoriel Intégrer Google à votre blog WordPress. [...]