Cara Pasang Custom Disqus Recent Comment

Inputekno
0
Cara Pasang Custom Disqus Recent Comment

Cara Pasang Custom Disqus Recent Comment di blog

Cara Pasang Custom Disqus Recent Comment
View on Codepen

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.

Inputekno
#Keep Reading and Keep Working
Anda mungkin menyukai postingan ini
0 comments