Cara Membuat Komentar Disqus di Blog Valid Amp

untuk sekarang blogger belum mensupport pada sebuah situs kita valid Amp, tapi ada banyak desain sekarang mengakali setiap permasakalan ...

untuk sekarang blogger belum mensupport pada sebuah situs kita valid Amp, tapi ada banyak desain sekarang mengakali setiap permasakalan pada blog kita.
Salah satunya adalah di mode Komentar pada blog kita, agar blog kita valid amp satu-satunya cara yaitu membuat komentar disqus, pada desainer sekarang telah mengakali agar blog kita yang di dukung amp agar memakai dalam mode disqus, nah bagaimana cara membuat nya ?
membuat komentar disqus amp

Membuat Script komentar Disqus
Agan bisa mengcopy Script dibawah lalu menghosting nya disitus github, cara menghosting nya anda bisa baca disini : Cara Menghosting Script

berikut script nya :
<div id="disqus_thread"></div>
<script>
  window.addEventListener('message', receiveMessage, false);
  function receiveMessage(event) {
    if (event.data) {
      var msg;
      try {
        msg = JSON.parse(event.data);
      } catch (err) {}
      if (!msg)
        return false;
      if (msg.name === 'resize') {
        window.parent.postMessage({
          sentinel: 'amp',
          type: 'embed-size',
          height: msg.data.height
        }, '*');
      }
    }
  }
  function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split('&');
    for (var i = 0; i < vars.length; i++) {
      var pair = vars[i].split('=');
      if (pair[0] == variable) {
        return pair[1];
      }
    }
    return (false);
  }
  function generateCss(q) {
    var css       = document.createElement('style'),
        sp2       = document.getElementById('disqus_thread'),
        parentDiv = sp2.parentNode;
    css.type = 'text/css';
    if (css.styleSheet) css.styleSheet.cssText = q;
    else css.appendChild(document.createTextNode(q));
    parentDiv.insertBefore(css, sp2);
  }
  var disqus_config = function() {
    this.page.url = getQueryVariable('url');
  };

Atau agan bisa memakai script yang sudah saya hosting menjadi Url agar bisa di letakan dalam html blog anda berikut Url nya :
https://cdn.rawgit.com/wavker/xyz/9e57df44/wavker-disqus.html 

Nah bagaimana cara memasang dalam blog anda agar valid amp ? untuk sebelumnya pastikan script berikut sudah dipasang di dalam template anda :
<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'/>
 Jika belum anda bisa menaruh script tadi diatas kode </head>.

Cara Lebih Mudah Membuat Komentar Disqus
Atau untuk lebih mudah anda bisa melakukan hal berikut agar mudah memasang komentar disqus agar valid amp dalam blog anda.

  • Masuk ke dashboard blogger
  • pilih tema/template
  • lalu edit Html
  • lalu cari kode <b:includable id='comments' var='post'> 
  • Lalu masukan kode berikut tepat di bawah <b:includable id='comments' var='post'>, berikut kodenya :
<amp-iframe expr:src='&quot;https://cdn.rawgit.com/wavker/xyz/9e57df44/wavker-disqus.html?shortname=wavker-com&amp;url=&quot; + data:blog.canonicalUrl' frameborder='0' height='300' layout='responsive' resizable='resizable' sandbox='allow-scripts allow-same-origin allow-modals allow-popups' width='600'>
<div aria-label='Disqus Comments' overflow='' role='button' tabindex='0'>Disqus Comments</div>
                      </amp-iframe>
Tulisan tebal atau wavker-com ubah dengan Shortname disqus anda lalu save.

Oh iya sembunyikan lokasi komentar agar komentar disqus agan tidak eror nantinya caranya sebagai berikut :
  • Masuk ke dashboar blogger
  • Pilih setting / Pengaturan
  • Selanjutnya Pilih : Pos, Komentar, Berbagi
  • Lalu ubah lokasi komentar menjadi Sembunyikan

Anda juga bisa membaca disini : Cara mengetahui Shortname Disqus

Postingan Terkait

0 komentar