Cara Pasang Custom Disqus Recent Comment

Cara Pasang Custom Disqus Recent Comment

Cara Pasang Custom Disqus Recent Comment di blog

Cara Pasang Custom Disqus Recent Comment

Disqus recent comment berfungsi untuk menampilkan komentar Disqus terbaru di blog sehingga ini akan lebih memudahkan untuk mengelola dan mengetahui komentar terkini pada suatu halaman.

Jika blog kamu memasang disqus sebagai alat komentar, kamu dapat menampilkan widget disqus recent comment sebagai informasi untuk mengetahui komentar terbaru di blog. Dalam artikel ini, kita akan membahas tutorialnya.

Disqus Recent Comment

Disqus sendiri sudah menyediakan fitur widget bawaan yang bisa dipasang dengan cukup mudah di blog. Namun, widget bawaan ini memiliki keterbatasan dalam hal kustomisasi.

<script type="text/javascript" src="https://user_name.disqus.com/recent_comments_widget.js?num_items=10&hide_avatars=0&avatar_size=40&excerpt_length=100"></script >

Solusi terbarik yaitu membuat Custom Disqus Recent Comment menggunakan API Disqus untuk kustomisasi tampilan dan fungsi widget sesuai kebutuhan.

Custom Disqus Recent Comment

Berikut adalah panduan langkah demi langkah untuk memasang custom Disqus Recent Comment di blog:

API Key Disqus

Untuk mendapatkan API key, kamu perlu membuat aplikasi di Disqus:

  • Buka halaman Disqus Developer dan klik Register new application

  • Isi semua form yang disediakan dan klik Register my application

  • Pada tampilan setting masukan domain blog kamu, lalu pada bagian Authentication pilih Read only

  • Kemudian klik Save

  • Setelah aplikasi dibuat, kamu akan mendapatkan API key yang diperlukan untuk mengakses data komentar.

Mengambil Komentar Terbaru

Setelah kamu memiliki API key, berikutnya yaitu mengambil komentar terbaru dan menampilkannya menggunakan javascript.

  • Di dasbor Blogger, klik TEMA.

  • Klik ikon di sebelah tombol Sesuaikan.

  • Klik Edit HTML, lalu cari kode penutup </body> dan tempatkan kode berikut diatas kode tersebut.

    <script type='text/javascript'>/*<![CDATA[*/
    !function() {
      var disqus_recent_defaults = {
        user_disqus: "DISQUS_USER", // User thread Disqus
        api_key: "DISQUS_API_KEY", // API Public Key Disqus
        max_result: 6,
        snippet: 50,
        show_avatar: true,
        avatar_w: 45,
        avatar_h: 45,
        new_tab_link: true,
        thread_target: "#disqus", // ID element target comments
        render_target: "", // ID element untuk merender disqus recent comment
        interval: 30 // Interval untuk memeriksa komentar baru (dalam menit)
      };
      
      // Gabungkan konfigurasi
      for (var i in disqus_recent_defaults) {
        disqus_recent_defaults[i] = (typeof disqus_recent_config[i] === 'undefined') ? disqus_recent_defaults[i] : disqus_recent_config[i];
      }
    
      // Berfungsi untuk membuat avatar HTML
      const createAvatarHtml = (avatarUrl, userLink, profileName) => {
        return `<a class='recent-thumbnail' href='${userLink}' target='_blank'><img class='recent-image' src='${avatarUrl}' alt='${profileName}' height='${disqus_recent_defaults.avatar_h}' width='${disqus_recent_defaults.avatar_w}'/></a>`;
      };
    
      // Berfungsi untuk membuat HTML isi komentar
      const createCommentBodyHtml = (profileName, articleLink, articleTitle, commentDate, snippet, targetAttr) => {
        return `
          <div class='recent-body'>
            <div class='recent-date'>
              <a class='recent-name' title='${articleTitle.substring(0, 50) + "..."}' href='${articleLink}' rel='noopener noreferrer nofollow' ${targetAttr}>${profileName}</a> - ${timeAgo(commentDate)}
            </div>
            <div class='recent-snippet'>${snippet}</div>
          </div>
        `;
      };
    
      // Mengambil data komentar disqus
      const checkForNewComments = () => {
        const config = disqus_recent_defaults;
        
        const apiUrl = `https://disqus.com/api/3.0/posts/list.json?api_key=${config.api_key}&forum=${config.user_disqus}&order=desc&limit=${config.max_result}&related=thread`;
    
        fetch(apiUrl)
          .then(response => response.json())
          .then(data => {
            if (data && data.response) {
              renderComments(data.response);
            }
          })
          .catch(error => console.error('Error fetching comments:', error));
      };
    
      // Berfungsi untuk merender komentar
      const renderComments = (comments) => {
        const config = disqus_recent_defaults;
        const renderTarget = document.getElementById(config.render_target);
        renderTarget.innerHTML = ''; // Clear existing content
    
        comments.forEach(comment => {
          const userLink = comment.author.profileUrl || '#';
          const avatarUrl = comment.author.avatar.cache || comment.author.avatar.permalink;
          const profileName = comment.author.name;
          const snippet = stripHtml(comment.message.substring(0, config.snippet));
          const commentDate = comment.createdAt;
          const articleTitle = comment.thread.clean_title;
          const articleLink = comment.thread.link + config.thread_target;
          const targetAttr = config.new_tab_link ? 'target="_blank"' : '';
    
          let recentItemHtml = `<div class='recent-item'>`;
    
          if (config.show_avatar) {
            recentItemHtml += createAvatarHtml(avatarUrl, userLink, profileName);
          }
    
          recentItemHtml += createCommentBodyHtml(profileName, articleLink, articleTitle, commentDate, snippet, targetAttr);
          recentItemHtml += `</div>`;
    
          renderTarget.insertAdjacentHTML('beforeend', recentItemHtml);
        });
      };
    
      const stripHtml = (html) => {
        return html.replace(/<[^>]*>?/gm, '');
      };
    
      // Berfungsi untuk memformat waktu
      const timeAgo = (date) => {
        const seconds = Math.floor((new Date() - new Date(date)) / 1000);
        let interval = Math.floor(seconds / 31536000);
    
        if (interval > 1) {
          return interval + " years ago";
        }
        interval = Math.floor(seconds / 2592000);
        if (interval > 1) {
          return interval + " months ago";
        }
        interval = Math.floor(seconds / 86400);
        if (interval > 1) {
          return interval + " days ago";
        }
        interval = Math.floor(seconds / 3600);
        if (interval > 1) {
          return interval + " hours ago";
        }
        interval = Math.floor(seconds / 60);
        if (interval > 1) {
          return interval + " minutes ago";
        }
        return Math.floor(seconds) + " seconds ago";
      };
    
      // Hanya periksa komentar baru jika render_target sudah ditentukan dan ada
      if (disqus_recent_defaults.render_target && document.getElementById(disqus_recent_defaults.render_target)) {
          checkForNewComments();
          setInterval(checkForNewComments, disqus_recent_defaults.interval * 60 * 1000);
        }
    }();
    /*]]>*/</script>
    • Ganti DISQUS_API_KEY dengan API key yang sudah kamu dapatkan
    • Ganti DISQUS_USER dengan username disqus kamu
    • checkForNewComments melakukan panggilan ke API Disqus dengan memanggil metode list. Lalu argumen related=thread ditambahkan ke string URL untuk mendapatkan URL dan Judul postingan.
    • createCommentBodyHtml membuat body custom HTML yang akan ditampilkan
    • createAvatarHtml membuat avatar HTML yang akan ditampilkan
    • renderComments mengambil data dan menuliskan HTML avatar dan body komentar
    • disqus_recent_defaults untuk mengatur konfigurasi
  • klik SIMPAN

Menampilkan Komentar

Berikutnya membuat element html untuk menempatkan komentar terbaru disqus, kamu bisa menempatkannya di sidebar blog.

  1. Di dasbor Blogger, klik Tata Letak.

  2. Kemudian klik Add Gadget di sidebar, lalu pilih HTML/JavaScript.

  3. Selanjutnya copy kode di bawah dan pastekan di dalamnya

    <div class='disqus-recent' id='disqusrecent'></div>
    <script type='text/javascript'>
      var disqus_recent_config = {
        max_result: 5, // Jumlah komentar
        snippet: 60, // Panjang komentar
        thread_target: "#disqus", // ID element comments kamu
        render_target: "disqusrecent", // ID element untuk merender recent comment
        show_avatar: true, // Tampilkan gambar profil
        new_tab_link: true, // Buka tautan di tab baru
        interval: 2 // Interval untuk memeriksa komentar baru (dalam menit)
      };
    </script>

    Kamu bisa mengatur disqus_recent_config sesuai kebutuhan, dan pastikan render_target sama dengan id element htmlnya

  4. Terakhir silahkan Simpan dan lihat hasilnya.

Menambahkan CSS untuk Styling

Kode di bawah ini adalah css yang saya buat untuk untuk tutorial ini. Kamu bisa menyesuaikannya sesuai dengan gaya atau kode html yang kamu sesuaikan pada javascript diatas.

<style type='text/css'>
  .disqus-recent {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(100%,var(--rc-cols-min,16rem)),1fr));
    gap: 1rem
  }
  .recent-item {
    display: flex;
    align-items: flex-start;
  }
  .recent-thumbnail {
    flex: none;
    -webkit-margin-end: 1rem;
    margin-inline-end: 1rem;
  }
  .recent-image {
    width: var(--rc-width, 45px);
    height: var(--rc-height, 45px);
    border-radius: 50%;
  }
  .recent-name {
    font-weight: 600;
    color: var(--rc-color, #2e2f34)
  }
  .recent-name:hover {
    color: var(--rc-color-hover, #098a91)
  }
  .recent-snippet {
    display: -webkit-box;
    -webkit-line-clamp: var(--rc-clamp,2);
    -webkit-box-orient: vertical;
    overflow: hidden
  }
</style>

Penutup

Memilih antara widget recent comment bawaan Disqus dan custom recent comment bergantung pada kebutuhan blog kamu. Widget bawaan Disqus cocok untuk solusi cepat dan sederhana, sementara custom widget adalah pilihan terbaik bagi kamu yang menginginkan kontrol penuh dan kemampuan untuk menyesuaikan setiap aspek tampilan dan fungsi komentar terbaru di blog.

Jika kamu memutuskan menggunakan custom widget tutorial ini bisa jadi referensi Cara Pasang Custom Disqus Recent Comment. Jika artikel ini bermanfaat bisa kamu share dan rekomendasikan ke teman-teman yang membutuhkan.

Anda mungkin menyukai postingan ini
0 comments