Disqus Khusus Untuk Blogger Dengan Amp Html

Hari ini aku masih berbicara ihwal komentar Disqus. Dari beberapa postingan ihwal komentar Disqus untuk blog AMP HTML yang aku posting, semuanya memakai kode universal Disqus sesuai petunjuk dari Disqus.

Untuk itu aku mencoba kutak-katik kode disqus yang khusus untuk Blogger. Dan ternyata berhasil serta dirasa lebih pas untuk dipasang pada platform Blogger alasannya yakni memang kodenya khusus untuk Blogger.

Sebagai perbandingan penampakan kode universal Disqus dan kode Disqus untuk Blogger menyerupai di bawah ini

Kode Universal

 <div id="disqus_thread"></div>
 <script>
 
 /**
 *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
 *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
 /*
 var disqus_config = function () {
 this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
 this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
 };
 */
 (function() { // DON'T EDIT BELOW THIS LINE
 var d = document, s = d.createElement('script');
 s.src = '//EXAMPLE.disqus.com/embed.js';
 s.setAttribute('data-timestamp', +new Date());
 (d.head || d.body).appendChild(s);
 })();
 </script>
 <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

Kode Disqus Untuk Blogger

 <script type='text/javascript'>
 var disqus_shortname = 'kompiajaib';
 var disqus_blogger_current_url = "<data:blog.canonicalUrl/>";
 if (!disqus_blogger_current_url.length) {
     disqus_blogger_current_url = "<data:blog.url/>";
 }
 var disqus_blogger_homepage_url = "<data:blog.homepageUrl/>";
 var disqus_blogger_canonical_homepage_url = "<data:blog.canonicalHomepageUrl/>";
 </script>
 <b:if cond='data:blog.pageType == "item"'>
 <style type='text/css'>
     #comments {display:none;}
 </style>
 <script type='text/javascript'>
     (function() {
         var bloggerjs = document.createElement('script');
         bloggerjs.type = 'text/javascript';
         bloggerjs.async = true;
         bloggerjs.src = '//' + disqus_shortname + '.disqus.com/blogger_item.js';
         (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(bloggerjs);
     })();
 </script>
 </b:if>
 <style type='text/css'>
     .post-comment-link { visibility: hidden; }
 </style>
 <script type='text/javascript'>
 (function() {
     var bloggerjs = document.createElement('script');
     bloggerjs.type = 'text/javascript';
     bloggerjs.async = true;
     bloggerjs.src = '//' + disqus_shortname + '.disqus.com/blogger_index.js';
     (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(bloggerjs);
 })();
 </script>

Nah adaptasi arahan komentar Disqus khusus Blogger untuk Blogger AMP HTML yang aku buat menyerupai di bawah ini.

 <div id="comments"></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);
   }
  
     var css = '#disqus_thread {font-family:' + getQueryVariable('fontBodyFamily') + '} a {color:#' + getQueryVariable('fontLinkColor') + '}',
     head = document.head || document.getElementsByTagName('head')[0],
     style = document.createElement('style');
 style.type = 'text/css';
 if (style.styleSheet){
   style.styleSheet.cssText = css;
 } else {
   style.appendChild(document.createTextNode(css));
 }
 head.appendChild(style);
 
                 var disqus_shortname = getQueryVariable('shortname');
                 var disqus_blogger_current_url = getQueryVariable('canonicalurl');
 
                 if (!disqus_blogger_current_url.length) {
                     disqus_blogger_current_url = getQueryVariable('url');
                 }
 
                 var disqus_blogger_homepage_url = getQueryVariable('homepageurl');
                 var disqus_blogger_canonical_homepage_url = getQueryVariable('canonicalhomepageurl');
 
                     (function() {
                         var bloggerjs = document.createElement('script');
                         bloggerjs.type = 'text/javascript';
                         bloggerjs.async = true;
                         bloggerjs.src = '//'+disqus_shortname+'.disqus.com/blogger_item.js';
                         (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(bloggerjs);
                     })();
 
                 (function() {
                     var bloggerjs = document.createElement('script');
                     bloggerjs.type = 'text/javascript';
                     bloggerjs.async = true;
                     bloggerjs.src = '//'+disqus_shortname+'.disqus.com/blogger_index.js';
                     (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(bloggerjs);
                 })();
 </script>

Jika Anda ingin mencoba memakai komentar Disqus dengan arahan khusus untuk Blogger pada blog AMP, silahkan gunakan arahan amp-iframe untuk komentar Disqus di bawah ini.

 <amp-iframe expr:src='&quot;https://cdn.rawgit.com/KompiAjaib/kompi-html/master/ampdisqus_blogger3.html?shortname=kompiajaib&amp;fontBodyFamily=sans-serif&amp;fontLinkColor=e8554e&amp;canonicalurl=&quot; + data:blog.canonicalUrl + &quot;&amp;url=&quot; + data:blog.url + &quot;&amp;homepageurl=&quot; + data:blog.homepageUrl + &quot;&amp;canonicalhomepageurl=&quot; + data:blog.canonicalHomepageUrl' frameborder='0' height='300' layout='responsive' resizable='resizable' sandbox='allow-forms allow-scripts allow-same-origin allow-modals allow-popups' width='600'>
 <div aria-label='Disqus Comments' overflow='' role='button' tabindex='0'/>
 </amp-iframe>

Ganti arahan kompiajaib dengan shortname Disqus blog Anda, gunakan sans-sarif jikalau jenis abjad blog Anda tumpul, ganti dengan serif jikalau jenis abjad blog Anda lancip. Ganti arahan e8554e dengan arahan warna untuk link blog Anda.
Sumber https://www.kompiajaib.com/

Share this post