« Nouveautés Widgets : Vodeclic, Wikio | Accueil | Nouvelle fonctionnalité : Pied de blog »

05/06/2009

Moteur de recherche interne

Il est assez simple de disposer sur la colonne latérale de son blog un moteur de recherche fourni par un tiers (Google, Yahoo, ...), mais à chaque fois le visiteur est emmené sur des pages externes, dont on ne maîtrise que peu l'apparence.

Il y a quelques temps, je vous avait montré comment, en habillage avancé, implémenter une recherche Google, grâce aux outils AJAX fournis par Google Custom Search Engine.

Evidemment qui dit habillage avancé, dit nécessité de mettre un peu la main au code, et disposer d'un compte de niveau Pro, ce qui n'est pas le cas de tous nos membres.

Ayant eu l'occasion de me replonger récemment sur Custom Search (notamment lors de la migration du blog d'Hervé Kabla), j'ai découvert que Google avait bien enrichi ses services pour l'affichage des résultats.

Plus besoin d'habillage avancé, il vous suffit d'utiliser les fonctions natives de TypePad (Inclure module HTML ou TypePad pages) pour mettre à disposition de vos lecteurs un moteur de recherche complètement internalisé au sein de vos blogs TypePad, deux options s'offrent à vous :

- Un moteur de recherche en colonne latérale + une TypePad page pour afficher les résultats

- Un moteur de recherche en colonne latérale avec les résultats affichés en dessous de celui-ci (en colonne latérale ou sur une page indépendante)

Update : accès au tutoriel vidéo »

Moteur de recherche en colonne latérale et page de résultats séparée

C'est l'exemple mis en oeuvre sur Tout sur TypePad

Pour arriver à ce résultat, il vous faut au préalable créer votre propre moteur de recherche Google (gratuit et rapide) :

1. Depuis http://www.google.com/coop/cse/, cliquez sur "Create a Custom Search Engine"

Image 13

2. Saisissez les informations demandées concernant le moteur de recherche, et veillez à indiquer l'URL du ou des blogs dont les résultats doivent être pris en compte 

Image 14

3. Vérifiez que les résultats affichés sont les bons et cliquez sur "Finish"

Image 16

4. Depuis l'interface vous listant les moteurs de recherche créés, cliquez sur "Control Panel"

Image 17

5. Cliquez sur "Get code" qui figure en colonne de gauche

Image 22

6. Cliquez sur l'option "Host results on my website using an iframe "

Image 18

7. Spécifiez l'URL de la page TypePad qui accueillera les résultats (par exemple : http://everything.typepad.com/france/recherche.html)

8. Copiez/collez le code depuis le champ "Seach box code" dans un module "Inclure votre propre HTML" au sein de l'habillage de votre blog TypePad et sauvegardez

Image 23

9. Copiez/collez le code depuis le champ "Seach results code" dans une nouvelle Page TypePad au sein de votre blog en veillant à :

- sélectionner le mode HTML de la note

- ce que l'URL de la page corresponde à celle spécifiée en #7

Image 24

Sauvegardez la page. C'est terminé (ou presque).

Image 20

Comme vous le constatez dans la capture d'écran, la page de résultat est sectionnée de par la colonne latérale. Il suffit pour corriger cela d'ajouter un peu de style pour masquer la colonne latérale et élargir la colonne principale, c'est ce que j'ai fait en ajoutant les lignes suivantes dans mon corps de note en mode HTML.

Image 25

<style>
#alpha {width: 800px;}
#beta {display:none;}
</style>

Et voilà le résultat :

Image 21

Un moteur de recherche en colonne latérale avec les résultats affichés en dessous

C'est la 2ème option proposée par Google. Son implémentation est plus courte, mais elle requiert probablement plus de paramètrages au final.

Reprenons après l'étape 5 décrite ci-dessus :

6. Cliquez sur "Host results on my website using a Custom Search Element "

Image 26

7. Copiez/collez le code depuis le champ "Custom Search Element code" au sein d'un module "Inclure votre propre HTML" et sauvegardez

Image 23

C'est terminé, le moteur de recherche devrait figurer dans votre colonne et une recherche affichera les résultats trouvés en dessous.

Image 27

Il est préférable d'avoir une colonne latérale suffisamment large pour que les résultats présentés ne soient pas trop étriqués. On peut aussi copier/coller ce code dans une nouvelle Page TypePad en mode HTML et faire simplement un lien depuis la colonne latérale de ce blog vers cette recherche interne.

Il est évidemment possible ensuite de changer la couleur et l'apparence des résultats présentés pour que le résultat soit vraiment parfait. Dans votre compte Google Custom Search, il vous suffit ainsi d'aller changer la configuration depuis "Control Panel > Look and Feel".

Image 28

Je vais sans doute ajouter un petit screencast reprenant l'ensemble des opérations en support de cet article, mais d'ici là, si vous avez des questions, je suis à votre écoute.

Update : Tutoriel vidéo de mise en oeuvre

TrackBack

URL TrackBack de cette note:
https://www.typepad.com/services/trackback/6a00d83451c82369e201156fccf356970c

Voici les sites qui parlent de Moteur de recherche interne :

Commentaires

Les commentaires sont modérés, ils n'apparaîtront qu'après validation par l'auteur.

Créez votre blog !

Solution complète. Aucune installation. Simple et puissant.

Nos recommandations

    Statut TypePad