Intégration et personnalisation de Lijit pour votre site

La recherche est une partie importante de tout site Web, et une fonctionnalité de recherche manquante signifiera que vos visiteurs ne trouveront pas ce qu'ils recherchent, jamais une bonne chose. Si vous êtes un utilisateur de WordPress, vous savez de quoi il s'agit, car WordPress, à l'instar de nombreuses autres plates-formes de publication en ligne, ne peut tout simplement pas être aussi performant que Google. Cependant, il y a des solutions. Vous pouvez échanger votre solution de recherche contre quelque chose d'autre, que ce soit Google Co-Op ou Lijit. Dans ce tutoriel, nous allons jeter un coup d'œil à Lijit, qui vous permettra d'effectuer des recherches sur plusieurs sites, ainsi que sur plusieurs applications Web sociales..

Lijit a attiré mon attention en tant qu’option sérieuse sur l’excellent ensemble de Google Co-Op.
solution avec leur inclusion de la sphère sociale. Je peux facilement ajouter mes YouTube, Flickr, Twitter
compte, et bien plus encore, à inclure dans les requêtes de recherche envoyées par le biais de Lijit
champ de recherche sur mon site. De cette façon, un utilisateur peut rechercher en ligne sur toutes mes présences, en les mettant
Plus proche les uns des autres. C'est bien sûr une bonne chose.

Le bref

Je vais utiliser mon propre site, tdhedengren.com, comme exemple pour ce tutoriel. C'est dans une sorte de
mode de refonte, loin d’être terminé, ce qui signifie qu’il est acceptable de jouer avec. En fait, ce serait quand même, c'est le mien après tout, mais c'est à côté de la question. J'utilise WordPress, mais il n'y aura pas de détails sur WordPress dans ce tutoriel, car cela n'a pas d'importance pour Lijit. J'ai déjà la fonctionnalité de recherche de WordPress, mais je la supprime en faveur de Lijit.

Alors, commençons!

Étape 1 - Obtenir Lijit

S'inscrire à Lijit est ridiculement facile. Il suffit de visiter lijit.com et de taper votre URL dans le champ, et vous serez jeté dans un guide où vous pourrez indiquer à Lijit où vous avez une présence en ligne, ajouter des blogs et des sites que vous souhaitez inclure dans la recherche, à côté de votre propre bien sûr, et des choses comme ça. En fait, vous pouvez même demander à Lijit d’extraire les blogs de votre blogroll dans votre recherche, une fonctionnalité intéressante, le cas échéant..

La liste des services en ligne est facilement modifiable. Cliquez simplement sur cette case et remplissez votre nom d'utilisateur (vous obtiendrez un lien de vérification une fois que vous aurez fini de taper, pour vous assurer qu'il s'agit du bon utilisateur pour ce service en ligne particulier), et vous avez terminé..

MyBlogLog, Digg, Viddler, Tumblr, Disqus, Reddit, Facebook et bien d’autres, en plus de ceux déjà mentionnés, offrent de nombreux services et endroits en ligne. Et si votre poison en ligne n’est pas là, vous pouvez toujours soumettre une URL ou un flux RSS, et Lijit l’ajoutera au réseau..

Ces choses sont assez simples. Lorsque vous avez terminé, vous pouvez obtenir votre recherche Wijit, le champ de recherche que nous souhaitons intégrer sur notre site. Si vous vous perdez dans tous les paramètres du compte et dans d’autres choses, cliquez simplement sur le lien en haut à droite intitulé Ma recherche, puis vous êtes prêt à passer à l’étape 2..

Étape 2 - Intégration du Search Wijit

Il est assez facile d’obtenir le champ de recherche Lijit, appelé Search Wijit, sur votre site. Cliquez simplement sur Ma recherche, Wijit en haut à droite lorsque vous êtes connecté, choisissez un style, une couleur et une couleur de logo Wijit, faites d’autres choix assez évidents (ajouter / supprimer des fonctionnalités comme un nuage de mots clés, des icônes, etc.), et enregistrer les paramètres. En cliquant sur le bouton Installer le bouton Wijit, vous obtiendrez votre code. Il vous suffira ensuite de copier-coller là où vous voulez que le champ de recherche Lijit se trouve. C'est assez simple. Une fois installé, vous n’aurez plus besoin de l’installer à nouveau. Vous devez simplement modifier vos paramètres et les sauvegarder. C’est là automatiquement sur votre site, puisque tout est récupéré depuis les serveurs de Lijit..

Cependant, n'allons pas de l'avant. Retour sur mon blog. Je voulais la boîte de recherche Lijit tout de suite, alors j'ai décoché toutes les fonctionnalités supplémentaires (icônes de contenu, etc.), choisi le style Grand arrondi, la couleur Gris et l’Échelle de gris pour l’option couleur du logo. L'aperçu montre à quoi ça va ressembler, mais je l'ai quand même monté, en fixant la largeur du Search Wijit à 280, ce qui, je le sais, conviendrait à ma barre latérale..

Assez simple, non? En cliquant sur Installer le Wijit, une page me permet d'effectuer des installations rapides si j'ai un blog TypePad ou Blogger, mais comme je suis un utilisateur de WordPress, je reçois un simple extrait de code JavaScript à inclure..

  Lijit Recherche

Puisque je pense que le logo Lijit est suffisant, j'ai supprimé le lien, puis collé ce code dans ma barre latérale, là où j'avais précédemment le champ de recherche natif WordPress..

 

Aussi simple que cela, j'ai une solution de recherche intégrée optimisée par Lijit. Ce qui est génial, c’est que les résultats de recherche sont diffusés dans une couche flottant au-dessus de mon site. Ainsi, les visiteurs à la recherche de quelque chose sur mon blog ne devront pas partir, à moins d’obtenir un succès de la part de mes autres présences en ligne (que ce soit une histoire sur Devlounge, un tweet ou quelque chose d'autre de mon réseau), qui mènera ensuite à cet endroit, bien sûr.

Aussi simple que cela, il a fallu quelques minutes de jeu pour obtenir ma propre recherche Lijit sur mon site.

Juste pour le plaisir, voyons à quoi ressemblerait le champ de recherche avec tous les bling-bling supplémentaires activés, tels que les nuages ​​de mots-clés, les boutons et icônes supplémentaires, etc..

Non, je ne veux pas ça, c'est trop pour moi. J'aime l'approche plus minimaliste, qui consiste à servir le contenu de toutes mes présences en ligne lorsque les internautes le demandent (c.-à-d. La recherche), plutôt que de le faire avancer de cette manière. Mais c'est à vous de décider, vous pourriez l'aimer!

Étape 3 - Personnalisation du Wijit de recherche pour votre conception

Bien que je pense que la zone de recherche Lijit a l'air bien avec ces paramètres de base, naturellement, j'aimerais qu'elle soit un peu plus personnalisée pour ma conception. Cela se fait en ajoutant des CSS à votre feuille de style, ce qui contrôlera la conception de la boîte Lijit exactement comme si vous utilisiez un formulaire de recherche traditionnel..

Cependant, avant de pouvoir le faire, nous devrons visiter à nouveau la page My Search Wijit, choisir Style dans le menu déroulant Style de Wijit et enregistrer. Cela changera le champ de recherche Lijit en quelque chose que nous pouvons styler en utilisant CSS.

Ce n'est plus trop joli, mais on va arranger ça. Pour moi, je veux un formulaire clair et simple, semblable à ceux que j’ai pour poster des commentaires, etc. sur mon site. Il n'y a pas beaucoup d'éléments CSS avec lesquels nous devons jouer.

  • #lwp_main est le conteneur div principal
  • #lwp_sfb est la forme
  • #lwp_sfd est la zone de saisie
  • # lwp_2_searchbutton est le bouton d'envoi
  • #lwp_ps est le conteneur pour le nuage de recherche

En les ajoutant à votre feuille de style, vous pouvez facilement personnaliser le champ de recherche Lijit en fonction de votre conception. Je viens de faire quelques modifications mineures:

 #lwp_main float: right; largeur: 130px; text-align: right;  / * main div * / #lwp_sbf débordement: caché; marge: 0; rembourrage: 0;  / * le formulaire * / #lwp_sfd width: 110px! important; marge inférieure: 3px; rembourrage: 2px; bordure: 1px solide # 555; text-align: right;  / * la zone de saisie * / # lwp_2_searchbutton background: # 555; couleur: #fff; taille de police: 12px; poids de police: gras; bordure: 0; text-transform: minuscule;  / * le bouton d'envoi * / # lwp_2_searchbutton: hover background: # 0c1;  #lwp_ps  / * le conteneur du nuage de recherche * / #lwp_f width: 130px! important; 

Le résultat est un petit champ de recherche flottant dans mon plus grand champ de recherche. Etant donné que #lwp_main est le div qui le contient, j’ai utilisé celui-là pour cela et ai mis dans mon propre code pour faire flotter un div avec le petit type informationnel à gauche. Naturellement, vous pouvez faire beaucoup plus de choses sophistiquées en utilisant le CSS personnalisé, alors trouvez ce qui correspond à votre site et faites-le avec. Très probablement, tout ce que vous aurez à faire est de prendre votre code actuel pour votre zone de recherche et de le placer dans l'élément CSS Lijit correspondant dans votre feuille de style..

Étape 4 - Variations des résultats de la recherche

Personnellement, j'aime bien la div en couches qui affiche le résultat de la recherche au-dessus de ma conception. Toutefois, si vous souhaitez vraiment intégrer le résultat de la recherche sur votre site, vous pouvez le faire. Cela fonctionne à peu près comme Google Co-Op, ce qui signifie que vous allez créer une page sur votre site contenant un extrait de code qui affichera votre résultat..

L'installation est un jeu d'enfant. Allez simplement sur My Search Wijit et choisissez Sur mon blog (avancé) dans la liste déroulante Afficher les résultats de la recherche. Ensuite, écrivez l'URL sur votre page de résultat de recherche et collez le code répertorié dans la case ci-dessous sur cette page. Ça y est, très simple, n'oubliez pas de sauvegarder vos paramètres.

Fini! C'est tout! Comme vous pouvez le constater, la quantité de travail nécessaire pour effectuer une recherche Lijit sur votre site est minimale. Si vous souhaitez le personnaliser, vous aurez besoin de perdre un peu plus de temps, mais c'est vraiment un problème avec le code et la conception de votre site actuel, plutôt que quelque chose de maladroit dans l'interface de Lijit..

Les avantages et les inconvénients de l'utilisation de Lijit plutôt que de Google Co-Ops peuvent être discutés, bien sûr. Ces derniers offrent la possibilité d’inclure votre propre code Adsense, ce qui pourrait générer un peu d’argent, mais Lijit a réussi à rendre l’internet social plus cool. Si vous avez fait ce choix, n'hésitez pas à partager votre raisonnement, ainsi que votre verdict si vous en avez un.

Bonne recherche!