Cara Embed Disqus Pada React dan ReactJS Web App

Cara Add Disqus Comment Ke Dalam React dan ReactJS App - Komentar di dalam sebuah blog adalah suatu hal yang penting, karena dengan komentar kita dapat mengetahui respon para pembaca maupun sebaliknya, pembaca dapat mengutarakan pendapat di dalam sebuah article yang kita tulis.

Berikut ini adalah cara memasang disqus comment ke dalam sebuah aplikasi berbasis react.

Pertama buatlah akun disqus yang akan kita pakai melalui situs resminya disqus.

Berikut ini adalah cara add disqus comment menggunakan plugin disqus-react. Pada kasus ini kita akan mencoba menggunakan static site generator / React App Component.

Setelah membuat akun dan mendapatkan id disqus, selanjutnya install disqus-react menggunakan perintah :

$ npm install disqus-react

atau

$ yarn add disqus-react

Setelah plugin terinstall, periksalah file package.json pada root directory project / blog kita, maka kita akan menemukan disqus-react disana.

  "dependencies": {
    "@emotion/core": "^10.0.7",
    "@emotion/styled": "^10.0.7",
    "@emotion/styled-base": "^10.0.7",
    "classnames": "2.2.6",
    "cssnano": "4.1.10",

    "disqus-react": "^1.0.5", // <-- disqus-react akan otomatis bertambah.

Selanjutnya, paste beberapa source code di bawah ini pada file tempat post / article kita akan dipublish.

contoh

• ./src/templates/post.tsx
• ./src/templates/post.js
• ./src/templates/post.jsx
• ./src/templates/blog-post.js atau apapun yang kita namai.

Importing Disqus-react

Import plugin tersebut pada bagian atas file.

post.tsx / post.js / blog-post.js

// Mengimport disqus-react  
import { DiscussionEmbed } from "disqus-react";

Post Identifier

Lalu embed / masukkan kode dibawah ini :

post.tsx / post.js / blog-post.js / post-content.js

// Menentukan disqus identifier / id per post & title

const disqusShortname = "user-id-disqus-kita";
const disqusConfig = {
  url: `https://www.urlblog.com${this}`,
  identifier: `${this}`,
  title: PostFullTitle,
};

Contoh di atas mungkin akan menampilkan comment secara global. (Tergantung dengan id acticle / post yang kita miliki)

Apabila kita ingin lebih spesifik dalam melakukan identifier pada setiap post / article, gunakanlah source code di bawah ini:

const disqusShortname = "user-id-disqus-kita";
const disqusConfig = PostContent.article
? {
    url: PostContent.article.url,
    identifier: props.article.id,
    title: PostContent.article.title
}
:null;

Pada table di atas, kita menentukan pembatas antara post dan title satu dengan lainnya menggunakan props.article.id dan PostContent.article.title sehingga tidak akan menjadi global comment.

Langkah terakhir

Tentukan posisi untuk memunculkan disqus comment dalam post tersebut dengan source code di bawah ini :

<PostContent htmlAst={post.htmlAst} />
    <DiscussionEmbed shortname={disqusShortname} config={disqusConfig} />
{/* email subscribe */}
{config.showSubscribe && <Subscribe title={config.title} />}

Pada contoh table di atas, kita meletakkan disqus comment di bawah post dan di atas layer subscribe seperti yang kita lihat di blog ini.

That’s it. Sekarang deploy dan lihat perubahannya pada blog post kita. disqus akan muncul pada setiap post / halaman yang kita inginkan.

And thank’s for reading!.