Pages perso : Faire interagir son site avec les réseaux sociaux
Vous souhaitez améliorer votre site hébergé sur SFR Pages Perso ?
Rendez votre site compatible avec les réseaux sociaux ! Découvrez comment intégrer les fonctionnalités
de Facebook, Google et Twitter.
Les réseaux sociaux
Vous avez certainement
déjà croisé le bouton « j'aime » de Facebook. En l'intégrant aux pages de votre site,
vous donnerez à vos visiteurs l'occasion de montrer leur soutien pour le contenu de votre site.
L'intégration du bouton "j'aime" est facilitée par
Facebook, qui fournit un outil de configuration simple à utiliser. Vous pourrez le trouver sur le formulaire de configuration du bouton « j'aime ».
Pour chaque option, vous pouvez tester différents paramètres et l'aperçu à droite du formulaire
se mettra à jour automatiquement. Cela vous permet d'avoir un aperçu du rendu final de votre bouton.
Voici les différents
paramètres que vous pouvez personnaliser :
• URL to like : L'adresse de la page que vos visiteurs
peuvent « aimer ». Si vous laissez ce champ vide, le bouton prendra automatiquement en compte l'adresse de la
page sur laquelle vous l'intégrez.
• Send button : Permet aux visiteurs de partager
directement votre page avec un ou plusieurs de ses amis sur Facebook. Cette fonctionnalité nécessite une configuration
avancée, dans un premier temps vous pouvez faire sans.
• Layout style : Change l'apparence du bouton, parmi
les trois proposées.
• Width : Largeur totale (en pixels) pour le bouton
et la zone de texte à côté.
• Show faces : Vous permet de choisir si vous souhaitez
afficher ou non les photos de profil des utilisateurs Facebook qui ont cliqué sur le bouton. Essayez de cocher ou décocher
l'option pour avoir un aperçu du résultat.
• Verb to display : Le verbe à utiliser sur
le bouton. Like affichera « j'aime » et Recommand affichera « recommander ».
• Color sheme : Permet de choisir le thème
de couleurs utilisées pour le bouton : clair (light) ou sombre (dark).
• Font : Vous permet de choisir la police utilisée
pour le bouton et le texte l'accompagnant. N'hésitez pas à tester les différentes polices proposées.
Une fois que vous avez terminé votre configuration, cliquez sur le bouton "Get
code".
Une fenêtre
s'ouvre alors, vous permettant de récupérer le code HTML qui servira à intégrer le bouton que
vous avez configuré dans votre page Web.
Sélectionnez la configuration qui correspond le mieux à votre page Web :
• Si votre page Web est écrite en HTML5, sélectionnez l'option HTML5.
• Sinon, utilisez l'option XFBML.
Il est recommandé de choisir l'option HTML5.
Le code qui vous est donné est en deux parties.
La première doit s'écrire juste après l'ouverture de la balise <body> de votre page, comme
Facebook vous le suggère :
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
La deuxième partie du code s'intègre à l'endroit de votre page
où vous souhaitez voir apparaître votre bouton "j'aime".
<p>merci de cliquer sur J'aime ! </p>
<div class="fb-like" data-send="true" data-width="450" data-show-faces="true"></div>
Vous n'avez plus qu'à mettre votre page en ligne pour constater le changement : votre bouton "j'aime" est
désormais intégré à votre page. Et si vous possédez un compte Facebook, il vous est d'ores
et déjà possible de l'utiliser !
Le bouton "+1" est l'équivalent pour Google+ du bouton "j'aime"
de Facebook.
Il va permettre à vos visiteurs de partager les pages de votre site qu'ils apprécient sur le réseau social
de Google.
L'intégration du bouton "+1" est facilitée par google,
qui fournit un outil de configuration simple à utiliser.
Vous pourrez le trouver sur le formulaire de
configuration du bouton «+1 ».
Vous avez plusieurs options à configurer.
Tout d'abord deux options de base :
• Taille : Vous avez le choix entre quatre
tailles différentes : petit, moyen, standard, grand.
• Langue : Votre bouton peut apparaître
dans la langue de votre choix.
Vous trouvez ensuite d'autres options que vous pouvez afficher en cliquant sur le lien «
options avancées ».
Voici la liste de ces options avancées :
• Fonction de rappel JavaScript : Utile si vous souhaitez
programmer en JavaScript une fonction qui sera automatiquement appelée après que le visiteur ait cliqué
sur le bouton. Si vous ne programmez pas en JavaScript, vous pouvez ignorer cette option.
• URL à associer au bouton +1 : De la même
manière que pour Facebook, vous pouvez préciser l'adresse de la page concernée par votre bouton «
+1 ». Si vous ne précisez rien, le bouton se rapportera automatiquement à la page sur laquelle vous l'intégrez.
Une fois votre configuration terminée, il ne vous reste plus qu'à intégrer votre code. Le code à
intégrer est séparé en deux parties.
Google vous recommande d'intégrer la première partie du code à l'endroit où vous souhaitez voir apparaître votre bouton « +1 ».
Puis vous pouvez intégrer la deuxième partie du code dans la partie <head>
Vous n'avez plus qu'à mettre votre page en ligne pour constater le changement : votre
bouton « +1 » est désormais intégré à votre page. Et si vous possédez
un compte Google+, il vous est d'ores et déjà possible de l'utiliser !
Le réseau social Twitter est spécialisé dans ce qu'on appelle le « microblogging », c'est-à-dire
la publication de messages courts (140 caractères maximum).
Il est possible d'afficher directement sur votre site les derniers « tweets » (messages) que vous avez publiés
sur votre compte.
Pour cela, vous pouvez personnaliser le "widget de profile" proposé
par Twitter.
Note : un « widget » est une fonctionnalité indépendante
qui peut s'intégrer dans un programme ou dans une page Web. C'est le cas de cette fonctionnalité offerte par
Twitter.
De la même manière que pour Facebook et Google, vous
allez devoir configurer votre widget Twitter.
Les
différentes options sont réparties en 4 catégories :
• Préférences
• Préférences
• Apparence
• Dimensions
Notez que vous disposez en bas d'un bouton "Tester ce réglage" qui
vous permettra d'avoir un aperçu de votre widget en fonction de la configuration que vous en faites.
Le premier menu "Préférences" contient une option :
• Nom de Compte : Il s'agit du nom du compte Twitter
dont vous souhaitez afficher les derniers tweets sur votre page. À titre d'exemple, nous avons ici effectué
un test avec le compte « LeMonde ».
Le deuxième menu « Préférences » contient davantage d'options
:
• Sonder de nouveaux résultats : Permet au
widget de se mettre à jour automatiquement, en allant chercher les derniers tweets en date.
• Inclure la barre de défilement : Si vous
affichez beaucoup de tweets, la barre de défilement peut être utile pour les parcourir.
• Réglage : Vous avez le choix entre «
charger à intervalle régulier » ou « charger tous les tweets ». La première option
chargera les différents tweets les uns après les autres, alors que la deuxième les affichera tous d'un
coup.
• Nombre de tweets : Vous pouvez décider du
nombre total de tweets à afficher dans le widget.
Le menu « Apparence » vous permet de choisir les différentes couleurs
utilisées pour l'affichage de votre widget. N'hésitez pas à tester différentes combinaisons en
utilisant le bouton "Tester ce réglage".
Le menu "Dimensions" permet de définir précisément
(en pixels) la largeur et la hauteur de votre widget. Notez que vous pouvez également opter pour un ajustement automatique
de la largeur. Ce qui peut être pratique dans certains cas pour adapter le widget à la mise en page de votre
site.
Notez que l'aperçu à droite ne tiendra pas compte de vos changements de taille. Pour tester cela, vous devrez
mettre en place le widget sur vos pages et vérifier que la taille correspond à ce que vous attendiez.
La configuration est terminée ! Il ne reste plus qu'à intégrer le widget dans votre page Web. Cliquez
sur le bouton "Terminer et récupérer le code". Le code HTML
nécessaire à l'affichage de votre widget s'affiche alors dans une zone de texte.
Pour intégrer le widget, vous n'avez qu' à le copier-coller directement dans votre page, à l'endroit
précis où vous souhaitez qu'il s'affiche.
Il ne vous reste plus qu'à mettre votre page en ligne, et vous constaterez qu'elle inclut maintenant le widget affichant
vos derniers Tweets !