Comment insérer la barre de recherche Google sur son site ?

Voici les instructions étape par étape afin d’insérer la barre de recherche Google sur votre site internet et d’afficher également le résultat de la recherche sur votre propre site Internet. Vous pouvez voir le résultat sur le site Internet http://www.selectioncadeaux.com.

Vous pouvez suivre les instructions plus bas et ou visionner la video.

Création de la page qui affichera le résultat de la recherche

1. Pour débuter, vous devez créer la page pour afficher le résultat de la recherche. Dans mon exemple, j’ai créé une page recherche.html.

2. Sélectionnez le code suivant et faites une copie du code en utilisant le clic droit de votre souris
   
   <div id="cse-search-results"></div> <script type="text/javascript"> var googleSearchIframeName = "cse-search-results"; var googleSearchFormName = "cse-search-box"; var googleSearchFrameWidth = 795; var googleSearchDomain = "www.google.fr"; var googleSearchPath = "/cse"; </script> <script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>
   
3. Collez ce code dans votre page recherche.html à l'endroit ou vous voulez que le résultat s'affiche.
   
4. Vous pouvez modifier 2 paramètres dans ce code.
   1. var googleSearchFrameWidth = 795 : Le 795 signifie 795 pixels de large. 795 est le minimum recommandé par Google. mais si votre page est plus large vous pouvez modifier ce chiffre pour l’ajuster à la largeur de votre page.
      
   2. var googleSearchDomain = "www.google.fr": Vous pouvez modifier le www.google.fr pour www.google.ca si vous êtes Canadien ou pour tout autre adresse de Google comme le www.google.com . Si votre site cible une clientèle européenne, je vous conseille de garder le www.google.fr.

Insertion de la barre de recherche Google

1. Faites un copier coller du code ci-dessous à l’endroit où vous aimeriez que la barre de recherche Google apparaisse sur votre site.
   
   <!-- SiteSearch Google --> <form action="http://www.votresiteinternet.fr/recherche.html" id="cse-search-box"> <div> <input type="hidden" name="cx" value="partner-pub-7251150894597704:nz8345-k1u9" /> <input type="hidden" name="cof" value="FORID:9" /> <input type="hidden" name="ie" value="ISO-8859-1" /> <input name="sitesearch" value="www.votresiteinternet.fr" type="hidden"> <input type="text" name="q" size="31" /> <input type="submit" name="sa" value="Rechercher" /> </div> <script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang=fr"></script> </form> <!-- SiteSearch Google -->
   
   
2. Vous devez remplacer tous les www.votresiteinternet.fr par votre nom de domaine et le www.votresiteinternet.fr/recherche.html par l’adresse de votre page qui affichera le résultat de la recherche. Si par exemple votre site internet est le http://www.climatisationchauffage.ca/ et que vous avez créé une page recherche.html pour afficher le résultat de la recherche vous devez donc modifier www.votresiteinternet.fr/recherche.html par www.climatisationchauffage.ca/recherche.html
   
3. N’oubliez pas de modifier le votresiteinternet.fr dans la ligne de code <input type="hidden" name="sitesearch" value=" www.votresiteinternet.fr " /> pour votre nom de domaine. C'est à cet endroit qu'on indique à Google sur quel site Internet il doit faire la recherche.
   
4. Vous pouvez modifier la valeur 31 de la ligne <input type="text" name="q" size="31" />. Ce chiffre indique le nombre de caractères visible pour le champ de recherche. Cela affectera la dimension du champ de recherche.
   
5. Transférez sur le serveur tous vos fichiers sur lesquels vous avez inséré la barre de recherche Google et votre nouvelle page (recherche.html) pour afficher le résultat de la recherche.

Voilà vous avez maintenant le moteur de recherche Google sur votre site internet.

Options avancées

Vous pouvez ajouter des paramètres additionnels à la variable cof : <input type="hidden" name="cof" value="FORID:9" /> comme l'exemple ici :

<input type="hidden" name="cof" value="FORID:9; GALT:#008000; GL:1; DIV:#336699; VLC:663399; AH:center; BGC:FFFFFF; LBGC:FFFFFF; ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;" />

FORID:10 = Affiche les publicités dans le haut et à droite
FORID:9 = Affiche les publicités à droite
FORID:11 = Affiche les publicités dans le haut et en bas

GALT:#008000 = Couleur de l'url des liens
GL:1 = ? (si vous découvrez la fonction de cette variable écrivez-moi s.v.p.)
DIV:#336699 = petite ligne du haut et autour des annonces
VLC:663399 = Couleur des liens visités
AH:center = ? (si vous découvrez la fonction de cette variable écrivez-moi s.v.p.)
BGC:FFFFFF = Couleur de fond
LBGC:FFFFFF = ? (si vous découvrez la fonction de cette variable écrivez-moi s.v.p.)
ALC:0000FF = Couleur des liens actifs
LC:0000FF = Couleur des liens
T:000000 = Couleur du texte de la description
GFNT:0000FF = Couleur du texte de la mention ’Annonces Google’ dans le haut des annonces
GIMP:0000FF = Couleur du numéro de la page sélectionnée.