Facebook Comments -> Disqus

Author: AlexTechNoir

components/ListItem.js

@@ -3,6 +3,7 @@ import Chip from '@material-ui/core/Chip'
 import styled from 'styled-components'
 import { useState, useEffect } from 'react'
 import Image from 'next/image'
+import { CommentCount } from 'disqus-react'
 
 export default function ListItem({ i }) {
   const [ isCategories, setIsCategories ] = useState(true)
@@ -44,11 +45,19 @@ export default function ListItem({ i }) {
           )}
           <div>
             <span>
-              <span
-                className="fb-comments-count"
-                data-href={`${process.env.NEXT_PUBLIC_PROD_HOST}/articles/${i.id}`}
-              ></span>
-              comment(s)
+              <CommentCount
+                shortname='youknowwhatblog'
+                config={
+                  {
+                    url: `${process.env.NEXT_PUBLIC_PROD_HOST}/articles/${i.id.toString()}`,
+                    identifier: i.id.toString(),
+                    title: i.title.toString(),
+                  }
+                }
+              >
+                {/* Placeholder Text */}
+                Comments
+              </CommentCount>
             </span>
             <time dateTime={`${i.published_at.slice(0, 10)}`}>
               {new Date(i.published_at).toDateString().slice(4)}

components/article/Comments.js

@@ -1,24 +1,20 @@
 import styled from 'styled-components'
-import { useEffect, useContext } from 'react'
-import Context from '../../context'
+import { DiscussionEmbed } from 'disqus-react'
 
 export default function DisqusComments({ params }) {
-  const { isDarkModeOn } = useContext(Context)
-
-  useEffect(() => {
-    window.FB.XFBML.parse()
-  })
-
   return (
     <Footer>
-      <div
-        className='fb-comments'
-        data-href={`${process.env.NEXT_PUBLIC_PROD_HOST}/articles/${params.id}`}
-        data-numposts='10'
-        data-width='100%'
-        data-colorscheme={`${isDarkModeOn ? 'dark' : 'light'}`}
-        data-lazy={true}
-      ></div>
+      <DiscussionEmbed
+        shortname='youknowwhatblog'
+        config={
+          {
+            url: `${process.env.NEXT_PUBLIC_PROD_HOST}/articles/${params.id.toString()}`,
+            identifier: params.id.toString(),
+            title: params.title.toString(),
+            language: 'en_GB'
+          }
+        }
+      />
     </Footer>
   )
 }