menu

Gatsby.js

Fast in every way that matters. Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps.

Channels
Team

What's The Best Way to Make Commenting System

November 21, 2017 at 12:37am

What's The Best Way to Make Commenting System

November 21, 2017 at 12:37am (Edited 2 years ago)

Hello folks..,

I have a plan to make commenting system on my blog. Since Gatsby is a static site generator, is that possible to achieve that? If yes, what's the best way to achieve so?

Any kinds of direction will be appreciated.

Thanks!

Show previous messages

January 19, 2018 at 3:43am

Hello @wilbertliu and @necmttn and @benforshey, I built an open source commenting system for Gatsby. Here's a demo video & instructions: http://gatsby.demo.talkyard.io/demo-and-installation/.

What are your thoughts? Feedback please :-) if you have time.

What do you like about it? Or what's the main reason you would hesitate to use it?

If you want to use it and/or have questions, I'd be happy to help you. There's hosting too, if you don't want to provide your own server.

No ads, no tracking, & more lightweight than Disqus, + some new features (work in progress), see: https://www.effectivediscussions.org/-32/how-hacker-news-can-be-improved-3-things

like-fill
1
  • reply
  • like

I was gonna say Disqus is your best choice but Talkyard is awesome too. I think both can are good & there are many different alternatives I've found Googling but Gatsby is all about making your site fast so if you're using Comments, don't fetch it first. Just use a button below "Show All Comments" & then when someone clicks you can fetch all the comments. Whether its Disqus or something else. Also, if you want to learn something build your own 😉

  • reply
  • like

@deadcoder0904 if you see any benefits with Disqus that Talkyard maybe lacks, it'd be interesting to know about — maybe it's something I can improve.

Both Talkyard and Disqus load comments after the main page has loaded, so doesn't affect the initial load.

(B.t.w. if someone wants not just embedded comments, but a forum/chat/Q&A site next to the embedded blog coments, with the same logins, then that works with Talkyard.)

  • reply
  • like

Ohh that's good to know

  • reply
  • like

& awesome job on Talkyard

  • reply
  • like

January 24, 2018 at 1:56am

from mozilla, live on Washington Post now

like-fill
1
  • reply
  • like

July 31, 2018 at 4:03am

Updating that link, Kyle sent: https://coralproject.net/talk/

like-fill
1
  • reply
  • like

Can I update my Talkyard link above too — it's broken, was http but https required for it to work (& apparently cannot edit old comments here in Spectrum).

https://www.talkyard.io/blog-comments (better & different link)

& demo: https://www.kajmagnus.blog/new-embedded-comments (that's a Gatsby site)

  • reply
  • like

August 20, 2018 at 3:12pm

Updating that link, Kyle sent: https://coralproject.net/talk/

Hi, is there any guide to integrate Talk into a Gatsby site? I'm needing to setup something like this for a client site; unfortunately they do not have the budget for recurrent/monthly subscription (so I cannot use Talkyard).

Thank you!

  • reply
  • like

August 21, 2018 at 4:20am

Hi @eka, you write that you cannot use Talkyard, because of a monthly subscription fee. That sounds as if there's a misunderstanding. Both Mozilla Talk and Talkyard are free and open source, both of them can be installed on one's server for free. I suspect my about-Talkyard-page is confusing. So now I edited the page to hopefully remove this misunderstanding. (Is it more clear now? if you have time and want to have a look at the updated about page)

In addition to open-source & free, there's hosting, for Talkyard, which costs money. And there's hosting for Mozilla Talk too: https://coralproject.net/pricing/ — which also costs money.

So, both the same: install open source for free, or pay for hosting.

  • reply
  • like

I don't know if there's a guide or plugin, for using Talk with Gatsby. I websearched a bit for Talk + Gatsby, didn't find anything.

To make Talkyard work with Gatsby, I had to write a Gatsby plugin, because Gatsby is a single-page-app that does client side Browser-location routing, without "real" page reloads: When jumping between pages, in a Gatsby blog, the embedded comments didn't update when I went to a new page — the on-page-load Javascript didn't run, because no new page was loaded.

So, as far as I understand, Mozilla Talk could benefit from a Gatsby specific Mozilla-Talk plugin, that reloads the comments, when one single-page-app navigates to a new page. There's such a plugin for Talkyard, https://www.npmjs.com/package/@debiki/gatsby-plugin-talkyard maybe someone can copy-edit it an re-publish for Mozilla Talk; it's MIT licensed.

like-fill
1
  • reply
  • like

August 22, 2018 at 6:15am

My two cents: I've followed the advice at https://www.gatsbyjs.org/blog/2018-04-10-how-to-handle-comments-in-gatsby-blogs/ and tried Staticman with help from here: https://www.gatsbycentral.com/tutorial-comments-with-staticman-in-gatsby The tutorial is a bit buggy but common sense should help. So all told this is finally a solution that works and is in concord with our GDPR.

  • reply
  • like

October 25, 2018 at 12:05pm

`Thanks for the information. Nice blog. I understood the concept very well. This blog is very informative. And it’s very interesting topic.

https://www.hopetutors.com/course/devops-training-chennai/

  • reply
  • like

I have an update about Staticman: you'll need to host it yourself. The GitHub-hosted version is blocked by GitHub several times a day.

  • reply
  • like

November 1, 2018 at 8:50pm

Personally I use Facebook comments, which works really well for my sites.

  • reply
  • like

November 5, 2018 at 11:50am

Personally I use Facebook comments, which works really well for my sites.

How did you config your Gatsby site with Facebook comment plugin? I had a problem with it.

  • reply
  • like
import React from 'react'
import config from '../utils/siteConfig'
import theme from '../styles/theme'
import styled from 'styled-components'
import FacebookProvider, { Comments } from "react-facebook";
import Heading from './Heading'
const Wrapper = styled.div`
padding: ${props => props.theme.size.elementMargin} 0 ${props => props.theme.size.elementMargin} 0;
border-top: 1px solid ${props => props.theme.colors.border};
`
const PostComments = props => {
const { slug } = props;
const { facebook, siteUrl } = config
return (
<Wrapper>
<Heading.H2>Comments</Heading.H2>
<FacebookProvider appId={facebook}>
<Comments
href={`${siteUrl}/${slug}/`}
width="100%"
colorScheme={theme.colors.fbCommentsColorscheme}
/>
</FacebookProvider>
</Wrapper>
);
};
export default PostComments;
  • reply
  • like

I develop a commenting system called JustComments. I wrote how to add it to a GatsbyJS website https://60devs.com/add-comments-to-your-gatsbyjs-blog-within-two-minutes.html

It's not free if you want managed hosting, but the frontend is open-source https://github.com/justcomments/widget

like-fill
2
  • reply
  • like

June 14, 2019 at 10:21am

Nice tutorial. Thanks for sharing the valuable information. it’s really helpful. Who want to learn this blog most helpful. Keep sharing on updated tutorials… http://www.trainingbangalore.in/microsoft-azure-training-in-bangalore.html?utm_source=backlinks&utm_medium=cmt&utm_campaign=coursepage&utm_term=microsoftazure&utm_content=gowsi

  • reply
  • like

June 17, 2019 at 6:00am