sebdelkil

Astuces et exemples de pages fans Facebook

Facebook trucs et astuces: Veuillez consultez le lien suivant, si vous désirez apprendre comment créer une application Facebook pour personnaliser votre page fan

Les pages fan de Facebook sont extrêmement intéressantes pour les compagnies puisqu’elles leur permettent une grande visibilité sur le web et leur permettent également d’interagir avec leurs clients.

La tâche facile : Installer une page fan Facebook. La tâche difficile : rendre la page en question attrayante, intéressante et participative afin de connecter avec vos utilisateurs.

Vous trouverez, dans le billet suivant, 10 trucs et astuces Facebook afin d’ajouter ou d’améliorer des fonctionnalités sur une page fan ainsi qu’une superbe liste inspirante d’exemples de pages fans Facebook. Vous apprendrez comment utiliser les propriétées <fb:dialog-content> , <fb:visible-to-connection> , <fb:swf> , <fb:visible-to-friends> , etc.

N.B. Pour recréer la plupart des astuces et stratégies de ce billet, vous aurez besoin d’ajouter l’application Static FBML à votre page fan.

Si vous avez d’autres trucs ou pages inspirantes à partager avec nous, n’hésitez pas à les écrire dans la section de commentaires!

La liste d’exemples de pages fans Facebook à la fin de l’article a été publié dans un article sur le site web de Smashing Magazine.com

CRÉER UN VISUEL « CALL-TO-ACTION »

Le but principal de la page d’accueil d’une page Facebook est de convertir les visiteurs en fans. D’où l’intérêt de créer un visuel de type « call-to-action ».

Ex. : l’accueil de la page Facebook de RedBull est l’exemple parfait d’un visuel 100% dédié au « call-to-action ».

INTÉGRER UNE VIDÉO YOUTUBE

Lorsque vous placerez une vidéo YouTube, vous aurez besoin d’une image d’aperçu («preview») puisque Facebook ne permet pas de faire jouer un Flash automatiquement dans la page. L’utilisateur aura besoin de cliquer sur l’image afin d’activer le Flash.

Vous pouvez utiliser une image générée par Youtube comme dans le code ci-dessous ou vous pouvez insérer une URL afin d’utiliser votre propre image.

Le code:

<fb:swf swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/xxxxxxxxxx'
imgsrc='http://img.youtube.com/vi/xxxxxxxxxx/2.jpg' width='340' height='270' />

Explication du code :

swfsrc – L’URL de la source de la vidéo
imgsrc – L’URL de l’image
xxxxxxxxxx – corresponds à l’id du vidéo. Ex. : http://www.youtube.com/watch?v=RJwbGPXMapA

Pour en apprendre davantage sur fb:swf

À noter que vous pouvez également utiliser n’importe quelle application Youtube afin d’insérer vos vidéos. La différence? Utiliser le langage de Facebook vous permet de placer vos vidéos où bon vous semble.

CACHER DU CONTENU AUX NON-FANS

Ceci peut être utilisé pour motiver un visiteur à devenir fan de votre page.

Le code:

<div id="wrapper"> 
<fb:visible-to-connection> 
CONTENU DIFFUSÉ AUX FANS SEULEMENT 
<fb:else> 
<div id="non-fans">CONTENU DIFFUSÉ AUX NON-FANS </div> 
</fb:else> 
</fb:visible-to-connection> 
</div>

Explication du code:

fb:visible-to-connect – Partie seulement visible par les fans
fb:else – Partie seulement visible par les non-fans

Avant ce code, vous devrez également ajouter une feuille de style CSS afin de fournir les propriétés suivantes :

#wrapper {
width:520px;
margin:0 auto; border:0; padding:0;
position:relative;
}
#non-fans {
width:520px;
position:absolute; top:0; left:0;
}

COMMENTER SUR DES PRODUITS

Cette fonction est particulièrement intéressante pour créer un petit magasin en ligne dans votre page Facebook puisque vous pourrez avoir un bouton « Like » pour chacun de vos produits ainsi qu’une partie pour recueillir les commentaires.

Le code:

<fb:comments xid="YOUR_PRODUCT_UNIQUE_ID_#1" canpost="true" showform="true" candelete="false" numposts="3" returnurl="http://L'URL DE VOTRE PRODUIT">
</fb:comments>

Explication du code :

xid – identifiant unique du produit pour lequel les utilisateurs inscriront des commentaires
returnurl – l’URL à laquelle les commentaires et les « likes » seront associés.

Pour en apprendre davantage par rapport à la fonction fb:comments

INSÉRER UN BOUTON SHARE (PARTAGER)

Avec ce bouton, les utilisateurs de Facebook peuvent partager presque tout ce qu’ils veulent. Insérez l’URL que vous désirez partager dans le code et lorsqu’un utilisateur cliquera sur le bouton, tous ses amis pourront voir l’URL dans leur « feed » de nouvelles.

Le code:

<fb:share-button class="meta">
 <link rel="target_url" href="http://votre-adresse-url.com"/>
</fb:share-button>

INSÉRER DU CONTENU FLASH

Le code:

<fb:swf swfbgcolor="000000" swfsrc='http://une-adresse-url.com/fichier-flash.swf' imgsrc='http://une-adresse-url.com/image.jpg' width='760' height='920' />

Explication du code:

swfsrc – source du fichier.swf
imgsrc – source de l’image qui apparaîtra avant votre Flash.

Rappelez-vous que vous aurez besoin d’une image d’aperçu sur laquelle les utilisateurs devront cliquer afin de lancer votre Flash.

IMAGE ROLLOVER

Il est très facile de créer un état rollOver pour vos images puisque le HTML et le CSS sont compatibles avec l’application FBML.

Le code:

<style>
 img.nohover {border:0}
 img.hover {border:0;display:none}
 a:hover img.hover {display:inline}
 a:hover img.nohover {display:none}
</style>

<a href="VOTRE LIEN ICI">
 <img src="base_image.jpg" class="nohover">
 <img src="hover_image.jpg" class="hover">
</a>

SUIVI DES STATISTIQUES AVEC GOOGLE ANALYTICS

Le système d’analyse des statistiques de Facebook est assez limité. Vous pouvez alors implémenter Google Analytics à votre page FB.

Créez-vous un nouveau compte dans Google Analytics en utilisant l’adresse URL de votre page Facebook. Copier le code UA-XXXXXXX-XX que Google vous donnera et insérez-le comme dans l’exemple qui suit :

<fb:google-analytics uacct="UA-9999999-99" />

Placez cette ligne dans le haut de votre code FBML et vous pourrez visionner vos statistiques quelques heures suivant la procédure.

AJOUTER UNE BOÎTE D’INVITATION D’AMIS

Il s’agit d’une très bonne stratégie à insérer dans le bas de votre page puisque vos fans pourront facilement envoyer des invitations pour rejoindre votre page à leurs amis.

Le code:

<fb:request-form method="post" type="LE NOM DE VOTRE PAGE" invite="true" content="VOTRE NOM DE PAGE OU AUTRE CHOSE<fb:req-choice url='http://www.facebook.com/VOTREPAGE' ' label='GO' /> ">
 <fb:multi-friend-selector actiontext="PARTAGER CETTE PAGE À VOS AMIS" rows="3" showborder="true" />
</fb:request-form>

BOÎTE DE DIALOGUE

Le code suivant ajoutera un lien texte qui, lorsqu’un utilisateur cliquera dessus, ouvrira une boîte de dialogue.

Le code:

<a clicktoshowdialog="dialog-name" href="#" >Cliquez ici pour lancer une boîte de dialogue</a>.

<fb:dialog id="dialog-name">
<fb:dialog-title>NOM DE LA BOÎTE DE DIALOGUE</fb:dialog-title>
<fb:dialog-content>LE CONTENU DE LA BOÎTE</fb:dialog-content>
<fb:dialog-button type="submit" value="Close" close_dialog="1" /></fb:dialog>

En apprendre davantage sur fb:dialog