Ajouter des commentaires en direct aux sites Framer

Tout d'abord, ouvrez l'éditeur de votre site.

Dans notre exemple, nous allons ajouter FastComments aux pages de notre blog, mais tout type de page devrait fonctionner.

Ouvrir l'éditeur

Now, ajoutons un bloc Embed.

Allez dans Insert en haut à gauche:

Cliquez sur Insert

Ensuite, faites défiler la barre latérale gauche vers le bas et survolez Utility.

Ensuite, vous devrez cliquer et faire glisser le bloc Embed jusqu'à la fin de votre blog.

Il est important que vous cliquiez et fassiez glisser comme montré, et pas seulement que vous cliquiez dessus. Si vous vous contentez de cliquer, Framer l'insérera en dehors de votre blog et vous devrez le déplacer ensuite.

Repérez le widget Embed

Glisser-déposer le widget Embed

Vous aurez maintenant un widget Embed vide, et lorsque vous le sélectionnerez, une barre latérale s'affichera à droite. Vous pouvez développer la barre latérale, et vous verrez quelque chose comme ceci :

Ouvrez les paramètres du widget Embed

Changeons maintenant le type de widget Embed en HTML:

Définir comme widget HTML

Vous êtes maintenant prêt pour l'extrait de code FastComments Framer à l'étape suivante.

Le snippet FastComments pour les commentaires en direct de Framer est le suivant.

Snippet de commentaires FastComments spécifique à Framer

Copy

1

2<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>

3<div id="fastcomments-widget" style="width: 100%;height: 100%;"></div>

4<script>

5 (function fcLoad() {

6 function tryLoad() {

7 // some providers change the code snippet to be async

8 const container = document.getElementById('fastcomments-widget');

9 if (!container) {

10 return waitRetry();

11 }

12 if (!window.FastCommentsUI) {

13 return waitRetry();

14 }

15 if (container.fastCommentsSetup) {

16 return;

17 }

18 window.FastCommentsUI(container, {

19 tenantId: 'demo',

20 pageTitle: top.document.title,

21 url: top.location.href,

22 urlId: top.location.pathname

23 });

24 container.fastCommentsSetup = true;

25 }

26 function waitRetry() {

27 setTimeout(tryLoad, 500);

28 }

29 tryLoad();

30 })();

31</script>

32

Ou, alternativement, vous pouvez utiliser le widget Streaming Chat. Le snippet FastComments Streaming Chat spécifique à Framer est :

Snippet Streaming Chat FastComments spécifique à Framer

Copy

1

2<script src="https://cdn.fastcomments.com/js/embed-live-chat.min.js"></script>

3<div id="fastcomments-live-chat-widget" style="width: 100%;height: 100%;"></div>

4<script>

5 (function fcLoad() {

6

7 function tryLoad() {

8 // some providers change the code snippet to be async

9 const container = document.getElementById('fastcomments-live-chat-widget');

10 if (!container) {

11 return waitRetry();

12 }

13 if (!window.FastCommentsLiveChat) {

14 return waitRetry();

15 }

16 if (container.fastCommentsSetup) {

17 return;

18 }

19 window.FastCommentsLiveChat(container, {

20 tenantId: 'demo',

21 pageTitle: top.document.title,

22 url: top.location.href,

23 urlId: top.location.pathname

24 });

25 container.fastCommentsSetup = true;

26 }

27 function waitRetry() {

28 setTimeout(tryLoad, 500);

29 }

30 tryLoad();

31 })();

32</script>

33

FastComments prend en charge l'éditeur Framer, vous devriez donc voir quelque chose comme ceci une fois le code collé (vous devrez peut-être cliquer sur Publish) :

Aperçu du widget de commentaires

Désormais, lorsque vous consultez votre site, vous devriez voir la zone de commentaires ! Dans la barre latérale de Framer, vous pouvez également définir le widget en pleine largeur, si vous le souhaitez.

Notez que Framer limite la hauteur des widgets et ne prend pas en charge le redimensionnement automatique, c'est pourquoi nous avons choisi ici le widget Live Chat, car il a une hauteur fixe.

Nous pouvons améliorer le positionnement du widget en faisant deux choses.

D'abord, dans le panneau de gauche, définissez la hauteur du widget sur fill et 1fr :

Hauteur du widget de commentaires

Ensuite, nous devons corriger la configuration de page par défaut de Framer. Par défaut, elle définit la hauteur de la page sur une taille fixe, ce qui peut couper les fils de commentaires. Définissons donc également cette valeur sur fill.

Définir la hauteur de la page

Vous devrez peut-être ajuster la hauteur de la page pour obtenir le résultat souhaité.

FastComments est conçu pour être personnalisé afin de s'adapter à votre site.

Si vous souhaitez ajouter des styles personnalisés ou ajuster la configuration, Consultez notre documentation sur la personnalisation pour savoir comment.