Cara Menghubungkan Ghost CMS 3.0 dengan Plugin Komentar Disqus

ghost Dec 05, 2019

Saat anda menggunakan Ghost CMS, tentu anda tahu bahwa tidak ada plugin build in dari Ghost CMS untuk masalah komentar pengunjung. karena memang Ghost CMS dibuat hanya untuk publikasi artikel / post, tidak seperti CMS - CMS lain yang sangat komplit, namun jika anda tetap menginginkan website anda memiliki form untuk isian komentar, anda bisa mengandalkan Disqus

Setting Disqus Plugin untuk Website dengan Ghost CMS

Disqus adalah layanan jaringan sosial komentar, ada ratusan ribu website yang sudah menggunakan disqus sebagai engine komentar website mereka, menariknya plugin disqus tidak terikat terhadap CMS tertentu, sehingga blog/website dengan Ghost CMS pun bisa menggunakannya.

Pertama-tama anda harus membuat akun admin di website utama mereka disqus. setelah selesai registrasi, buat website baru untuk di registrasikan di disqus seperti berikut ini :

create website disqus baru

Klik tombol +New, kemudian isikan data seperti Site Owner, Organization, Website Name dan Category seperti berikut ini :

Create a New Site Disqus

Klik tombol Create Site, anda akan dihadapkan pada pilihan pembayaran, penagihan perbulan atau pertahun, dengan tiga opsi, namun anda tetap bisa menggunakan disqus secara free dengan paket Basic. dengan tambahan Ad Supported dan Disqus Core Feature. seperti berikut ini :

Harga Disqus Bulanan dan Tahunan

Kemudian, untuk paket Basic, klik tombol Subcribe Now, setelah itu anda akan diarahkan ke cara konfigurasi masing-masing plaftorm yang tersedia untuk Disqus seperti berikut ini :

Semua Platform yang didukung Disqus

setelah itu, karena kita mau menambahkan disqus ke Ghost CMS, klik icon Ghost CMS, anda akan diarahkan ke halaman instruksi cara konfigurasi untuk Ghost CMS sepert berikut ini :

Disqus Ghost Instruction

Pada langkah kedua, anda klik link Universal Embed Code. untuk melihat contoh code yang bisa ditempelkan pada website anda, untuk Ghost CMS, berikut konfigurasi Disqus Comment agar berbeda setiap halaman.

<div class="m-load-comments">
<div class="m-load-comments__line"></div>
	<button class="m-icon-button filled as-load-comments js-tooltip js-load-comments" data-tippy-content="Load comments">
    <span class="icon-comments"></span>
    </button>
</div>
<div class="m-load-comments__iframe l-wrapper in-comments js-comments-iframe">
	<div id="disqus_thread"></div>
    <script>
    var disqus_config = function () {
    	this.page.url = "{{url absolute="true"}}";
        this.page.identifier = "ghost-{{comment_id}}"
	};
	(function () {
      var d = document, s = d.createElement('script');
      s.src = 'https://cloudborneo.disqus.com/embed.js';
      s.setAttribute('data-timestamp', +new Date());
      (d.head || d.body).appendChild(s);
    })();
    </script>
</div>
Disqus Universal Embed Code

pada halaman instructions ini, Klik tombol Configure, anda diarahkan untuk mencari file post.hbs pada direktori template yang anda gunakan. modifikasi file post.hbs pada template yang aktif saat ini.

Halaman Configure Disqus

Kemudian isi pada form Configure Disqus untuk menyelesaikan setup Disqus Website. setelah semua terisi, klik tombol Complete Setup.

Setelah kode anda dapatkan, saat nya memasang pada template anda yang terinstall seperti berikut ini :

Ghost Design Template

pada halaman admin Ghost, klik Design, kemudian klik download pada list Installed Themes, kemudian cari file post.hbs. pada template tersebut, tambahkan kode seperti diatas. setelah anda simpan, upload ulang themes tersebut dan pilih replace. berikut Ghost CMS dengan Disqus Plugin :

Disqus Plugin di Ghost CMS

selamat mencoba :D

M. Najamudin Ridha

Penikmat coffe latte ICE, apalagi tanpa gula. Menyukai teknologi open source, terutama yang berbasis web dan mobile, senang mencoba hal - hal seperti linux, DevOps, database dan programming