Ditulis oleh: Ditulis pada: 12/18/2016
Hari ini saya masih berbicara tentang komentar Disqus. Dari beberapa postingan tentang komentar Disqus untuk blog AMP HTML yang saya posting, semuanya menggunakan kode universal Disqus sesuai petunjuk dari Disqus.Untuk itu saya mencoba kutak-katik kode disqus yang khusus untuk Blogger. Dan ternyata berhasil serta dirasa lebih pas untuk dipasang pada platform Blogger karena memang kodenya khusus untuk Blogger.
Sebagai perbandingan penampakan kode universal Disqus dan kode Disqus untuk Blogger seperti 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 penyesuaian kode komentar Disqus khusus Blogger untuk Blogger AMP HTML yang saya buat seperti 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 menggunakan komentar Disqus dengan kode khusus untuk Blogger pada blog AMP, silahkan gunakan kode amp-iframe untuk komentar Disqus di bawah ini.
<amp-iframe expr:src='"https://cdn.rawgit.com/KompiAjaib/kompi-html/master/ampdisqus_blogger3.html?shortname=kompiajaib&fontBodyFamily=sans-serif&fontLinkColor=e8554e&canonicalurl=" + data:blog.canonicalUrl + "&url=" + data:blog.url + "&homepageurl=" + data:blog.homepageUrl + "&canonicalhomepageurl=" + 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 kode
kompiajaib dengan shortname Disqus blog Anda, gunakan sans-sarif jika jenis huruf blog Anda tumpul, ganti dengan serif jika jenis huruf blog Anda lancip. Ganti kode e8554e dengan kode warna untuk link blog Anda.