Ce tutorial a pour objectif l’intégration d’un moteur de recherche personnalisé Google dans votre blog. The tutorial is aimed at integrating a custom search engine Google in your blog. Nous allons donc mettre à profit la puissance de Google et donner ainsi une touche professionnelle à votre blog. We are going to harness the power of Google and give a professional touch to your blog.

Création du moteur de recherche personnalisé Google Creation of custom search engine Google

Dans un premier temps, il nous faut créer un moteur de recherche personnalisé. In a first step, we must create a custom search engine. Pour ce faire, rendez-vous sur : Google Recherche personnalisée . To do this, go to: Google Personalized Search.

Cliquez à présent sur le bouton situé à droite intitulé : Créer un moteur de recherche personnalisé . Click this button to the right titled: Create a custom search engine. Si vous n’êtes pas identifié, inscrivez votre adresse et votre mot de passe correspondant à votre compte Google puis ouvrez une session. If you are not logged in, enter your address and password for your account Google then open a session.

Procédons maintenant au remplissage du formulaire : Procédons now filling the form:

• Informations générales : ici, rien de particulier qui ne requiert une explication supplémentaire. General information: here, no individual who does not require an additional explanation. Suivez simplement les instructions ; Just follow the instructions;
• Types de recherches : vous avez le choix entre 3 possibilités. Types of research: you have the choice between 3 possibilities. 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 ; In our situation where it is integrating a search engine on a blog, will focus on the default ie Only sites that I select;
• Sélection des sites : il nous faut désormais spécifier les sites à explorer. Selection of sites: we must now specify the sites to explore.
  • Si votre blog se situe à la racine de votre site, inscrivez tout simplement votre nom de domaine (sans le http://). If your blog is at the root of your site, simply register your domain name (without http://). Par exemple, monblogwordpress.com ; For example, 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* ; If your blog is not located at the root of your site, then register the location of it by adding the following syntax such as: 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 . A final event is aimed at users with WordPress makes sure that the URL displayed - for example, monsite.com / wordpress, appears this way: wordpress.monsite.com. Dans ce cas de figure, la situation n°1 prévaut ; In this scenario, the situation prevailing No. 1;

Pour finir, acceptez les conditions d’utilisation et cliquez sur Suivant . Finally, accept the conditions of use and click Next.

Google vous confirme la création de votre moteur de recherche personnalisé. Google confirms you create your custom search engine. Notez que vous avez la possibilité de vous envoyer un e-mail de confirmation sur votre compte Gmail. Note that you can send you an e-mail confirmation on your Gmail account. Validez en cliquant sur Terminer . Confirm by clicking Finish.

Obtention du code a insérer Obtaining a code insert

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. In this second part, we will see how to generate the code to insert into your blog to integrate your custom search engine 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. If you have followed the above steps, you should now be on a homepage to manage your various search engines.

Il nous faut donc obtenir le code du moteur. So we need to get the code engine. Pour cela, cliquez sur Panneau de configuration . To do this, click Control Panel. De nombreuses options y sont proposées. Many options are proposed. 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. We will see the largest following this tutorial, but feel free to browse among the various tabs proposed.

Rendez-vous dans l’onglet Sites . Go to the tab 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. It is very important because we will verify that the engine is configured to not only look on your blog and not on the links he might find it. 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 . To check this, click the URL of your blog and check, if not already done so, the first option on every page whose address contains this URL. Validez via le bouton Enregistrer . Validate via the Save button.

Passons maintenant à l’apparence du moteur. Turning to the appearance of the engine. Pour cela, ouvrez donc l’onglet Éléments graphiques . To do this, then open the tab graphic elements. 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. Here, you can choose an engine using JavaScript (enabled by default) or not and to change the colour code links, text, borders, and so on. Bien entendu, n’oubliez pas de sauvegarder les modifications apportées via le bouton Enregistrer figurant dans chaque module. Of course, remember to save the changes made via the Save button in each module.

En route pour la dernière étape : l’obtention du code. En route to the final stage: obtaining the code. Rendez-vous dans l’onglet Code et choisissez parmi les différentes options d’hébergement des résultats de recherche : Go to the Code tab and choose among different options for accommodation search results:

• 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) : Accommodation is at your expense and results are therefore an integral part of the blog (most valuable for visitors by me):
  • 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 ; Method iframe: you view the search engine where you want on your blog (header, navigation bar, sidebar - so it is visible on every page) and generate results on a page dedicated to that purpose;
  • 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). Method of overlapping: the results appear on the same page that research like a pop-up on the page (or 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 ; Not a very practical point of view ergonomic because I do not think that users are very comfortable to browse the different results… this is only my opinion;
• Google créée une page pour héberger les résultats. Google created a page to accommodate the results. Autrement dit, vous ne vous occupez pas de la partie résultats ; In other words, you do not occupy part of the results;

Préférant la première solution iframe, je vous en décris le processus. Preferred the first option iframe, I will describe the process.

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. In section specify the details of search results, enter the URL will be displayed where the search results. Par exemple, http://monblog.com/recherche . For example, http://monblog.com/recherche. N’oubliez pas de créer la page concernée ! Do not forget to create the page in question!

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. Like any Google programs, it supports Adsense advertising system that allows you to be paid if your visitors click on advertisements. Ici, vous devez choisir l’emplacement de celles-ci. Here, you must choose the location thereof. 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. Note that you can register an account via Adsense tab Monetizing that the procedure is to provide ID Adsense and validate confirmation by 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 !). Attention, it is recommended to opt for a display at the top and bottom for the simple reason that the other two options require a considerable page width (more than 600 pixels I I remember correctly, sidebar excluded).
Bien sûr, vous pourrez par la suite varier les dimensions mais Google impose néanmoins une valeur minimale. Of course, you can then vary the dimensions Google but nevertheless imposes a minimum value. De même, il est impossible d’imposer des styles CSS non pris en charge. Similarly, it is impossible to impose styles CSS is not supported.

Insertion du code Insertion code

Ceci fait, il ne vous reste plus qu’à copier/coller les 2 bouts de code. This fact, it does'll just copy and paste the 2 pieces of code.

Le premier concerne le moteur de recherche. The first concerns the search engine.

Dans le cas d’un blog WordPress, vous pouvez : In the case of a blog WordPress, you can:

• Soit, l’insérer dans la sidebar (colonne latérale) en insérant un widget texte dans lequel vous copierez le code en question ; Or, insert it in the sidebar (side) by inserting a widget text in which you copy the code in question;
• Soit, l’insérer dans searchform.php accessible depuis le menu Thème puis Éditeur de thème. Or, insert a searchform.php accessible from the menu and then Theme Editor theme. Ouvrez la page citée, supprimez tout puis collez-y le code Google. Open the page cited, then remove any paste the Google code. 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) ; Of course, everything depends on whether the location of the search bar for you (for the change to go through the 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. Other possibilities exist without doubt, but I have not had the opportunity to try, therefore impossible for me to expose.

Le second code concerne l’affichage des résultats de recherche. The second code concerning the display of search results.

Après avoir créée une nouvelle page, affichez la source de celle-ci et collez-y le code obtenu. Having created a new page, go to the source thereof and paste the code obtained. N’oubliez pas de publier la page. Do not forget to publish the 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). You will notice that the presence of the tag width allows you to specify the page width results according to size ranges regulated by Google (see preceding paragraph).

Pour admirer le résultat, ouvrez votre blog puis effectuez une recherche. To admire the result, open your blog and then do a search. Si tout fonctionne, elle devrait s’afficher dans la page spécifiée plus haut. If everything works, it should appear on the page specified above.