Vous êtes-vous déjà demandé comment certaines pages Facebook ajouter des boutons J’aime à leurs onglets personnalisés? Cherchez pas plus loin.
Beaucoup m’ont demandé comment des sites comme Threadless pouvaient ajouter plusieurs boutons J’aime et commentaires à leur page Fan, permettant aux visiteurs d’acheter, d’aimer et de commenter n’importe quel t-shirt sur leur onglet Boutique.
Eh bien, il s’avère que c’est en fait assez facile, en utilisant la balise fb:comments FBML.
Utilisant fb:commentairestu peux ajouter un bouton J’aime et des boîtes de commentaires à plusieurs endroits sur vos onglets Facebook et, éventuellement, chacun peut être accompagné d’une section de commentaires des utilisateurs. Cela offre plus de possibilités aux fans d’interagir avec votre contenu et de le partager.
La page des fans sans fil – Comment font-ils cela?
L’onglet “Boutique” de la page des fans de Threadless affiche une sélection de six t-shirts de leur catalogue, et les visiteurs peuvent commander, aimer et/ou commenter chacun d’eux.
Chaque produit Threadless a « Ajouter au panier », un bouton J’aime et des commentaires.
La colonne de gauche dans l’illustration ci-dessus est une image du produit et une option de sélection déroulante. Une fois qu’un utilisateur a fait une sélection et cliqué sur “Ajouter au panier”, il est redirigé vers le site Web Threadless.com pour finaliser l’achat.
Le contenu de la colonne de droite est créé à l’aide de la fb:commentaires Balise FBML :
Les paramètres et valeurs utilisés pour fb:commentaires
- xid: Il s’agit de l’identifiant unique pour cette instance du fb:commentaires étiquette. Vous devez inclure une valeur, et je suggère d’utiliser quelque chose de court et descriptif. Vous êtes limité aux caractères alphanumériques, aux tirets, au signe de pourcentage, aux points et aux traits de soulignement. L’utilisateur ne verra pas ce contenu ; c’est juste pour créer une valeur accessible aux développeurs à des fins de programmation. Quelques exemples sont:
xid=”Produit-205″
xid=”Produit-Chaussures-Bleu
xid=”Tan_50%” - canpost: Vous souhaiterez très probablement “true” pour cette valeur, indiquant que l’utilisateur peut publier un commentaire.
- candelete: Vous aurez besoin de “faux” pour cela, ce qui signifie qu’un utilisateur ne peut supprimer aucun des commentaires.
- inverse: Définir ceci sur “true” place la case “Ajouter un commentaire” sous les commentaires publiés, comme cela se fait sur la page Threadless.
- URL de retour: C’est la valeur la plus importante ! Il s’agit de l’URL que l’utilisateur aime lorsqu’il clique sur le bouton J’aime. Si l’utilisateur coche la case “Publier un commentaire sur mon profil Facebook”, le commentaire apparaîtra sur son mur sous la forme “[User] aime [Website’s Title Tag] sur [URL].” Vous pouvez avoir n’importe quelle URL valide pour le “URL de retour” paramètre. Threadless a la page du produit sur son site Web comme “URL de retour” évaluer.
Utilisation de CSS pour masquer les éléments indésirables dans le fb:commentaires étiquette
Vous pouvez supprimer ce texte et ce logo « plugin social Facebook » avec CSS.
Vous pouvez facilement masquer cet élément pour qu’il ne s’affiche pas. En utilisant le plugin Firefox “Firebug” (un must pour les codeurs !), j’ai déterminé que le petit logo Facebook et le texte “Facebook social plugin” sont contenus dans un DIV assigné à la classe “sous-titre_gauche“, et cette DIV peut être masquée, dans tous les navigateurs, avec CSS.
Pour masquer ce contenu, il vous suffit d’ajouter :
.subtitle_left {affichage : aucun ;}
à votre feuille de style, qui masque le DIV :
Presto! Les DIV contenant le logo et le texte sont masqués avec display:none.
Vous voulez juste le bouton J’aime ? Utilisez CSS pour masquer la zone de commentaire
Si tu veux seulement le bouton J’aime et non la boîte de commentaires, vous pouvez utiliser le “affichage : aucun” Propriété CSS pour masquer la boîte de commentaires indésirables.
Parce que toutes les fonctionnalités de commentaire sont contenues dans un DIV assigné à la classe “comment_body” (merci encore, Firebug !), ajoutez simplement la règle CSS suivante à votre feuille de style :
.comment_body {affichage : aucun ;}
Le résultat:
Ajout de plusieurs instances du bouton J’aime
Vous pouvez avoir autant d’instances de fb:commentaires Tag FBML sur votre onglet personnalisé comme vous le souhaitez. Assurez-vous simplement que chacun a un “xid” évaluer.
Donner aux utilisateurs plus d’options que simplement aimer votre page et/ou la partager signifie plus d’engagement des utilisateurs et plus de mentions de votre marque apparaissant sur les murs des utilisateurs.
Essayez-le et faites-nous savoir comment cela fonctionne. Laissez vos questions et commentaires dans la case ci-dessous.
