Widget Mur commentaires à la Facebook dans la sidebar

Il y a quelques jours, quelqu'un m'avait demandé comment mettre une option de commentaire qui soit visible dans la sidebar et qui permettrait aux visiteurs de commenter sur le blog en général et non seulement sur un article particulier comme proposé par Blogger.

Il faut vous avouer que je ne croyais pas trop que cela était possible et c'est ainsi que je lui avais proposé de plutôt voir comment installer une boîte de dialogue dans la sidebar. Mais, en passant aujourd'hui sur le blog de Vin, j'ai trouvé une astuce pour instaurer un widget pour commentaire dans la sidebar grâce à googlefriend. Ce widget sera un peu comme le mur de commentaire que l’on trouve sur FaceBook (voir en image et sur mon blog).


L'avantage de ce widget est qu'il peut afficher les visages des commentaires s'ils avaient mis leurs photos sur Google friend et puis, on peut répondre particulièrement à un commentaire donné par quelqu’un (chose que ne propose pas blogger).

Pour avoir cette petite merveille sur votre blog, il faut commencer par installer le widget "Abonnés fidèles" proposé par Blogger. Pour cela, aller sur votre compte, puis sur "Mise en page" et là cliquer sur "ajouter un nouvel élément". Dans la pop-up qui s'ouvrira, optez pour "Abonnés fidèles". Dès que le widget est installé dans votre blog, passez aux étapes suivantes :

1. Aller sur "Modifier le code html" et cochez sur "développer des modèles de gadget" sur la nouvelle page qui s'ouvrira (juste au dessus de la case avec le code html)

2. Afficher votre blog. Sur la page d'accueil, faites CTRL+U afin d'afficher le code source de celui-ci. Ou, aller sur Affichage (sur votre navigateur) et sélectionner "afficher le code source".

3. Trouvez la ligne suivante (faites CTRL+F et collez la ligne ci-après afin que l'ordi le trouve) :

google.friendconnect.container.renderMembersGadget

4. Prenez le numéro qui se trouve juste un peu plus bas, après "site", c'est l'identifiant de votre blog sur Googlefriend

google.friendconnect.container.renderMembersGadget(
{ id: "div-1238464215135",
site: "NUMERO-A-PRENDRE" },
skin);
</script>

Copiez ce numéro dans un fichier notepad, wordpad, ou word (à moins que vous n'ayez un autre endroit où le conserver).

5. Copiez le code suivant :

<!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-comment-wall" style="width:210px;border:1px solid #cccccc;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#cccccc';
skin['ENDCAP_BG_COLOR'] = '#e0ecff';
skin['ENDCAP_TEXT_COLOR'] = '#333333';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['ALTERNATE_BG_COLOR'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#ffffff';
skin['CONTENT_LINK_COLOR'] = '#0000cc';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
skin['CONTENT_HEADLINE_COLOR'] = '#333333';
skin['DEFAULT_COMMENT_TEXT'] = '- Ajoutez votre commentaire ici -';
skin['HEADER_TEXT'] = 'Commentaires';
skin['POSTS_PER_PAGE'] = '5';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderWallGadget(
{ id: 'div-comment-wall',
site: 'NUMERO-A-PRENDRE',
'view-params':{"disableMinMax":"true","scope":"SITE","allowAnonymousPost":"true","features":"video,comment","startMaximized":"true"}
},
skin);
</script>

6. Remplacez "NUMERO-A-PRENDRE" par le numéro pris à l'étape 4.

7. Vous pouvez remplacer les mots en gras en ceux qui vous conviennent, ils s'afficheront comme ceci dans votre blog :

8; Pour changer la taille (largeur) de votre widget, afin qu'il tienne bien dans votre sidebar, voir le chiffre après width

div id="div-comment-wall" style="width:210px;border:1px solid #cccccc;"></div>

#cccccc est la couleur de la bordure du widget, vous pouvez aussi la changer.
1px est l'épaisseur de la bordure, vous pouvez mettrez un chiffre supérieur.

9. Vous pouvez aussi changer les couleurs de votre widget en remplaçant les valeurs exadécimales des couleurs contenues dans le code par ceux qui vous conviennent (voir les codes numériques de couleurs ici et là). Vous dans le code de l'étape 5 :

skin['BORDER_COLOR'] = '#cccccc'; Pour la couleur de la bordure
skin['ENDCAP_BG_COLOR'] = '#e0ecff';(couleur de fond de l'entête = bleu ciel)
skin['ENDCAP_TEXT_COLOR'] = '#333333';(Couleur texte à l'entête)
skin['ENDCAP_LINK_COLOR'] = '#0000cc'; (couleur lien à la fin de l'entête)
skin['ALTERNATE_BG_COLOR'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#ffffff'; Couleur de fond du contenu
skin['CONTENT_LINK_COLOR'] = '#0000cc'; couleur des liens du contenu
skin['CONTENT_TEXT_COLOR'] = '#333333'; Couleur du texte du contenu
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc'; couleur secondaire des liens
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666'; couleur secondaire du texte
skin['CONTENT_HEADLINE_COLOR'] = '#333333'; couleur de l'entête (le mot "commentaires")

10. Pour augmenter le nombre de commentaire à afficher simultanément sur le widget, mettre un nombre supérieur à la place de 5 (mais ce nombre ne doit pas être supérieur à 15):

skin['POSTS_PER_PAGE'] = '5';

Pour interdire le commentaires anonymes, effacer :

"allowAnonymousPost":"true",

11. Après avoir fini d'attribuer à votre widget les particularités qui lui sont nécessaires, aller sur "Mise en page" et choisissez "ajouter un nouvel élément" dans votre sidebar (barre latérale)

12. Sur la pop-up qui s'ouvre, choisissez "Html/Javascript" et collez le code de votre widget dans ce nouveau widget. Enregistrez les modificatgions et allez voir les résultats.

Quelqu'un me laissera-t-il un petit bisous ?