Memasang Tiga Sistem Komentar Di AMP HTML Facebook Disqus Dan Google Plus

MEMASANG TIGA SISTEM KOMENTAR DI AMP HTML FACEBOOK DISQUS DAN GOOGLE PLUS.


Untuk memasang sistem komentar di amp HTML tentunya sudah di jelaskan di Amp project salah satunya yaitu bisa menggukan kementar facebook dengan AMP js comment facebook.
Kita juga tahu di dalam amp tidak boleh ada javascript . Sementara untuk memasang sistem komentar disqus dan google plus tentunya kita perlu javascpit untuk menerapkannya di blog, nah solusinya kita bisa menghosting file javascpit disqus dan google plus komentar di GITHUB dan menerapkannya di amp HTML dengan menggukan amp iframe hehe.

Berikut ini kode UNIVERSAL disqus atau kode javascript disqus yang akan kita hosting ke GITHUB.
<code>&lt;div id=&quot;disqus_thread&quot;&gt;&lt;/div&gt; &lt;script&gt; /** * 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&#039;s canonical URL variable this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page&#039;s unique identifier variable }; */ (function() { // DON&#039;T EDIT BELOW THIS LINE var d = document, s = d.createElement(&#039;script&#039;); s.src = &#039;//EXAMPLE.disqus.com/embed.js&#039;; s.setAttribute(&#039;data-timestamp&#039;, +new Date()); (d.head || d.body).appendChild(s); })(); &lt;/script&gt; &lt;noscript&gt;Please enable JavaScript to view the &lt;a href=&quot;https://disqus.com/?ref_noscript&quot;&gt;comments powered by Disqus.&lt;/a&gt;&lt;/noscript&gt;</code>

Dan berikut ini kode script komentar google plus.
<script src="https://apis.google.com/js/plusone.js"></script> <div id="comments"></div> <script> gapi.comments.render('comments', { href: window.location, width: '624', first_party_property: 'BLOGGER', view_type: 'FILTERED_POSTMOD' }); </script>


Dengan menggukan sistem komentar disqus dan google plus ini juga kita tidak perlu menunggu komentar terload dan akan cepat terbuka seperti yang sudah saya singgung tadi di atas kita akan menggukan CDN atau content delivery network dari GITHUB. Dan untuk menimalisir loading blog juga saya gunakan efek show hide di tiap tiap sistem komentar di amp HTML tersebut jadi loading blog juga akan cepat.


Sebenarnya juga cara ini sama seperti cara memasang komentar facebook pada AMP HTML
yang sudah saya posting kemarin.

dan saya anggap anda sudah memasang komentar facebook di AMP HTML, maka kita lanjut memasang komentar disqus dan google plus nya.

1.

Langkah pertama silahkan simpan/tulis kode berikut ini.
<b:includable id='disqus-comments' var='post'>
<div class='disqus-comments' id='disqus_comments'>
<amp-accordion>
    <section>
<h4>
<span class='show-more'>ADD A COMMENT WITH DISQUS</span>
<span class='show-less'>HIDE COMMENT</span>
</h4>
<amp-iframe expr:src='&quot;https://cdn.rawgit.com/KompiAjaib/kompi-html/master/disqus_amp2.html?shortname=www-bloggingmobile-blogspot-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>
</section>
  </amp-accordion>
                </div>

</b:includable>

<b:includable id='g-comments' var='post'>
<div class='g-comments' id='g_comments'>
<amp-accordion>
    <section>
<h4>
<span class='show-more'>ADD A COMMENT WITH GOOGLE PLUS</span>
<span class='show-less'>HIDE COMMENT</span>
</h4>
<amp-iframe expr:src='&quot;https://cdn.rawgit.com/sorrry/encep.github.io/acb26723/google%20plus%20comments.html?url=window.location&amp;url=&quot; + data:blog.canonicalUrl' frameborder='0' height='300' layout='responsive'
scrolling='yes'
sandbox='allow-scripts allow-same-origin allow-modals allow-popups' width='200'>
<div aria-label='google Comments' overflow='' role='button' tabindex='0'>google Comments</div>
  </amp-iframe>
</section>
  </amp-accordion>
                </div>
                <div class='clear'/>
</b:includable>


2.

Cari kode berikut ini dan simpan kode tadi di bawahnya.
<b:includable id='comments' var='post'>
............ ............
............
</b:includable>


3.

Cari kode seperti ini di template AMP HTML anda.
<b:include data='post' name='post'/>


4.

lalu simpan kode ini di bawahnya dan save template.
<b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='disqus-comments'/>
        <b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='g-comments'/>


5.

Selesai dan selamat mencoba.

Hasilnya bisa di liat di bawah blog ini.
Jika ada pertanyaan bisa ajukan pertanyaan di sistem komentar yang sudah tersedia, Insya Allah saya akan menjawab sesuai kemampuan saya dan jika tidak ada kesibukan lainnya saya akan meresponnya langsung hehe

blog views
Reactions:
Donate via PayPal

You Might Also Like:

ADD A COMMENT WITH YOUR FACEBOOK PLEASE WAIT FOR FACEBOOK COMMENT WILL SOON OPEN

ADD A COMMENT WITH DISQUS HIDE COMMENT

Disqus Comments

ADD A COMMENT WITH GOOGLE PLUS HIDE COMMENT

google Comments

Hello, how may we help you? Just send us a message now to get assistance.

Facebook Messenger ×