Pasang Komentar Default Blogger di blog AMP, Kenapa tidak?
Beberapa minggu yang lalu saya sedikit bereksperimen dengan komentar blog ini, beberapa blog AMP yang ada sering kali hanya menggunakan kolom komentar disqus ataupun facebook.
Nyoba-nyoba cari ternyata ada yang berhasil memasang komentar default blogger yang dimodifikasi di blog AMP, setelah saya coba tetap saja gagal.
Bukan gagal juga sih, komentarnya ada dan berhasil menampilkan komentar menggunakan iframe, namun komentar blog default juga ikut tampil jadinya ada 2 kolom komentar di halaman artikel.
Belum lagi error dari komentar default yang ada di template masih terbaca, akhirnya terbaca error di validator AMP.
Saya orangnya malas bikin host, upload-upload segala macem, jadi kalau pake komentar disqus yang make kode orang lain terutama make host orang lain, takutnya pas link scriptnya mati, komentar blog saya ikutan error.
Maka dari itu saya ngebet buat cobain komentar default ini.
Oke langsung saja...
1. Langkah pertama
Untuk langkah awal setting widget Blog1 di tata letak, dan centang post footer untuk kolom komentar...
Setelah itu ubah pengaturan Lokasi Komentar di setelan, ubah menjadi tersemat
2. Langkah Kedua
Setelah konfigurasi diatas telah selesai, saya sarankan pakai cara igniel buat masang komentar default yang versi terbaru blogger v3 kalau ga salah, biar tidak terjadi error pada komentar blog.
<b:includable id="threadedComments-amp" var="post">
<section class="comments" expr:data-embed="data:post.embedCommentForm" expr:data-num-comments="data:post.numberOfComments" id="comments">
<div class="title-komen"><span>Komentar</span></div>
<ul>
<b:loop values="data:post.comments" var="comment">
<li>
<figure class="avatar">
<amp-img alt="Avatar" expr:alt="data:comment.author" expr:src="data:comment.authorAvatarSrc" expr:title="data:comment.author" height="32" layout="responsive" width="32" />
</figure>
<div class="ckomen">
<a expr:href="data:comment.authorUrl" expr:title="data:comment.author" rel="nofollow"><data:comment.author /></a>
<b:if cond="data:post.adminClass == data:comment.adminClass"><span class="icon user blog-author" /><b:else /></b:if><small> - <data:comment.timestamp /></small>
</div>
<div class="tkomen">
<b:if cond="data:comment.isDeleted"><span class="text-gray">Comment Deleted</span><b:else /><data:comment.body /></b:if>
</div>
</li>
</b:loop>
</ul>
<b:if cond="data:post.allowNewComments ">
<div id="threaded-comment-form">
<amp-iframe expr:src="data:post.commentFormIframeSrc" height="150" id="comment-editor" layout="fixed-height" sandbox="allow-scripts allow-same-origin allow-forms allow-top-navigation">
<amp-img layout="fill" placeholder="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" />
</amp-iframe>
</div>
</b:if>
</section>
</b:includable>
Buka Edit HTML, lalu pasang kode di atas di widget Blog1 di antara tag widget settings dan tag main
</b:widget-settings>
// Kodenya disini
<b:includable id='main' var='this'>
atau bisa juga taruh di atas kode dibawah... soalnya jika udah refresh kode di atas biasanya bakalan pindah kebawah, jadi sekalian aja sy kasih tau pindahnya kemana...
<b:includable id='threadedComments' var='post'>Setelah itu masukan kode dibawah ini ke dalam <b:includable id='post' var='post'> tepat di bawah tag postbody.
<b:include data='post' name='threadedComments-amp'/>Cek blog kalian, akan tampil 2 buah kolom komentar...
Jika di cek pada validator AMP akan tampil 3 FAIL, yang nantinya kita akan bereskan...
3. Langkah Ketiga
a. Menghilangkan Kolom komentar default.
Nah awalnya saya coba menghilangkan komentar default blogger yang ada dibawahnya dengan cara menonaktifkan di setelan blogger, namun komentar blogger iframe juga ikut menghilang.
Akhirnya saya menggunakan "noscript" yang kita tau fungsinya untuk menonaktifkan javascript akan tetapi saya gunakan untuk menghilangkan komentar default blogger.
lumayan bikin kerjaan sih namun cara ini berhasil, berikut baris-baris yang saya noscript-kan...
tag commentAuthorAvatar
<b:includable id='commentAuthorAvatar'>tag comments
<b:includable id='comments' var='post'>tag threadedComments
<b:includable id='threadedComments' var='post'>Pasang tag <noscript> di tag lnclude commentAuthorAvatar, seperti dibawah ini...
<b:includable id="commentAuthorAvatar">
<noscript> //Menonaktifkan Javascript
//isi tag commentAuthorAvatar
</noscript>
</b:includable>Sama seperti commentAuthorAvatar pasang juga pada tag comments dan threadedComments persis dengan cara di atas.
tag commentFrom
<b:includable id='commentForm' var='post'>tag threadedCommentForm
<b:includable id='threadedCommentForm' var='post'>
<b:include data="post" name="commentFormIframeSrc" />
<iframe allowtransparency="allowtransparency" class="blogger-iframe-colorize blogger-comment-from-post" expr:height='data:cmtIframeInitialHeight ?: "90px"' frameborder="0" id="comment-editor" name="comment-editor" src="" width="100%" />
<data:post.cmtfpIframe />
<script type="text/javascript">
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>');
</script>kemudian hapus lagi kode yang ada di dalam tag <b:includable id='threadedCommentJs' var='post'>
<script async="async" expr:src="data:post.commentSrc" type="text/javascript" />
<b:template-script inline="true" name="threaded_comments" />
<script type="text/javascript">
blogger.widgets.blog.initThreadedComments(
<data:post.commentJso/>,
<data:post.commentMsgs/>,
<data:post.commentConfig/>);
</script>tapi belum selesai...
karena kita mengaktifkan kolom komentar default, link komentar pada post footer yang ada di halaman homepage juga ikut tertampil, dan sayangnya menampilkan error juga..
untuk mengatasi hal tersebut, kita perlu menghapus baris kode yang ada dalam tag <b:includable id='postCommentsLink'>, kurang lebih seperti ini...
<b:if cond="data:view.isMultipleItems">
<span class="byline post-comment-link container">
<b:include cond="data:post.commentSource != 1" name="commentsLink" />
</span>
</b:if>