AMP HTML Blogları İçin Disqus Son Yorumlar Widget'ı

Blog yayınlarına yapılan yorumlar blog sitelerinin en önemli unsurlarından biridir. Yorumlar, blog ziyaretçilerinin ve blog ziyaretçileri ile blog yöneticisi arasında etkileşim kuran araçtır.

Yorumlar, arama sonuçlarından trafik çekmeye yardımcı olur. Blogger ve Disqus yorumlarının bir widget üzerinde gösterilmesi de blog sitelerine trafik çekmeye yardımcı olan önemli eklentilerden biridir.

Blog sitelerinin sayfalarında bulunan yorum sayısı ne kadar çok olursa, hem sayfa görüntüleme sayısı artar hem de arama sonuçlarından trafik çekme fırsatı daha yüksek olacaktır. Bu nedenle, bir widget üzerinde Disqus yorumlarının takip edilmesi blog sayfalarınızın sürekli etkileşim içerisinde olmasını sağlar. Aynı zaman da Disqus yorumlarının yönetilmesini de kolaylaştırır.

Son yorumlar widget'ının daha bir çok sağlamış olduğu kolaylıklar var, Disqus yorum formu üzerinden sorulan sorulara daha hızlı cevap verebilmek ve ziyaretçilerin de etkileşim içerisinde olmasından dolayı, ziyaretçilerinde soruları cevaplama imkanı sağlar.

Daha önceki yazılarımızda HTML blog siteleri için paylaşmış olduğumuz Disqus son yorumlar widget'ını şimdi AMP HTML blog sitelerine nasıl ekleneceğini paylaşacağım.

Disqus Son Yorumlar Widget'ı Nasıl Eklenir?

AMP HTML blog sitenize Disqus son yorumlar widget'ını eklemek istiyorsanız aşağıdaki adımları takip edin.

AMP HTML Blog Sitelerine Disqus Son Yorumlar Widget'ı Nasıl Eklenir?

Birinci adım: Blogger hesabınızda oturum açın ve widget'ı eklemek istediğiniz blogun kumanda panelinde Tema > HTML'i Düzenle yolunu takip ederek blogunuzun şablon editör sayfasını açın.

İkinci adım: AMP HTML blogunuzun şablon kodları arasında aşağıdaki javaScript kodlarının olup olmadığını kontrol edin, eğer aşağıdaki kodlar şablon kodlarınız arasında bulunmuyorsa, şablon kodlarınız arasında bulunan </head> veya </head> kodunun bir satır üzerine ekleyin.

AMP javaScript

<script async="" custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
<script async="" custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

Üçüncü adım: Aşağıdaki Disqus son yourumlar widget'ını görüntülemek için komut butonu simgesi HTML kodunu blogunuzda görünmesini istediğiniz yere ekleyin.

AMP HTML (Simge)

<div class='disqus-open-recent' id='disqus-open-recent' on='tap:disqus-recent.show,disqus-recent-iframe.show,recent-disqus-drawer' role='button' tabindex='0' aria-label='Yorumları aç'>
<svg width='24' height='24' viewBox="0 0 24 24"><path fill="gray" d="M12,22A2,2 0 0,0 14,20H10A2,2 0 0,0 12,22M18,16V11C18,7.93 16.36,5.36 13.5,4.68V4A1.5,1.5 0 0,0 12,2.5A1.5,1.5 0 0,0 10.5,4V4.68C7.63,5.36 6,7.92 6,11V16L4,18V19H20V18L18,16Z" /></svg></div>

Yukarıdaki komut butonunu düzenlemek için CSS kodları arasında bulunan aşağıdaki kodları değiştirerek yapabilirsiniz.

AMP CSS (Simge)

.disqus-open-recent{cursor:pointer;position:fixed;top:0;right:0;z-index:997}

Dördüncü adım: Aşağıdaki CSS kodlarını blogunuzun amp-custom stil dosyası içerisine ekleyin.

AMP CSS (amp-custom)

.disqus-comments-box-fixed{background:#fff;position:fixed;height:100vh;width:300px;top:0;right:0;padding:0;z-index:999;-webkit-animation-name:slideInRight;animation-name:slideInRight;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.disqus-comments-box-fixed h3{font-size:18px;margin:0;padding:0 0 0 10px;background:#2e9fff;color:#fff;height:50px;line-height:50px;position:relative;-webkit-box-shadow:0 1px 8px rgba(0,0,0,.3);box-shadow:0 1px 8px rgba(0,0,0,.3)}
.disqus-comments-box-fixed h3 span{position:relative;z-index:2}
.disqus-comments-box-fixed h3:after{content:"";background:url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgNDM4IDgwJyB3aWR0aD0nMTYwJyBoZWlnaHQ9JzQwJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbG5zOnhsaW5rPSdodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rJz48Zz48cGF0aCBzdHlsZT0nZmlsbDojZmZmZmZmJyBkPSdNMzAuMjA4IDEuNjAySC44Nzh2NzYuMDM5aDI4Ljg5NWMyNy4zNzYgMCA0My4zNDItMTYuMjkzIDQzLjM0Mi0zOC4yMzV2LS4yMTljLjAwMi0yMS45NDMtMTUuNzUtMzcuNTg1LTQyLjkwNy0zNy41ODV6TTUxLjQ5OSAzOS43M2MwIDEyLjI3Mi04LjM2NCAxOS4yMjctMjAuOTY0IDE5LjIyN2gtOC41ODJWMjAuMjg2aDguNTgyYzEyLjYgMCAyMC45NjQgNy4wNiAyMC45NjQgMTkuMjI2di4yMTh6bTM1LjYyOSAzNy45MDdoMjEuMTgyVjEuNjAySDg3LjEyOHY3Ni4wMzV6bTcwLjA2NS00Ny4zNThjLTEwLjUzOC0yLjM5MS0xMy4xNDUtMy45MTEtMTMuMTQ1LTcuMzg1di0uMjJjMC0yLjcxNiAyLjUtNC44ODggNy42MDQtNC44ODggNi43MzMgMCAxNC4zMzggMi42MDUgMjEuMjkyIDcuNDk2bDEwLjUzNi0xNC44ODVDMTc1LjIyMyAzLjc3MiAxNjUuMTIyLjI5NCAxNTIuMTk2LjI5NGMtMTguMjUgMC0yOS40MzggMTAuMjEtMjkuNDM4IDI0LjMzMnYuMjE4YzAgMTUuNjQ0IDEyLjQ5MiAyMC4yMDcgMjguNjc2IDIzLjg5NiAxMC4zMiAyLjM4OSAxMi44MTggNC4xMjcgMTIuODE4IDcuMjc5di4yMTdjMCAzLjI1OC0zLjA0MiA1LjIxMy04LjY5IDUuMjEzLTguNzk4IDAtMTcuMTYzLTMuMTQ4LTI0LjY1Ny05LjEyM0wxMTkuMTczIDY2LjM0YzkuMzQyIDguMzY1IDIyLjE2IDEyLjYwNCAzNS42MyAxMi42MDQgMTguNDY2IDAgMzAuNzQyLTkuMjMyIDMwLjc0Mi0yNC43Njh2LS4yMTdjLS4wMDEtMTQuMjI5LTEwLjg2NS0xOS44NzctMjguMzUyLTIzLjY4em0xMjAuNTczIDkuMzQzdi0uMjE4QzI3Ny43NjYgMTcuNTcgMjYwLjM4Ny4wOCAyMzYuOTIyLjA4Yy0yMy40NjIgMC00MS4wNiAxNy43MDgtNDEuMDYgMzkuNTQydi4yMTZjMCAyMS44MzQgMTcuMzggMzkuMzI0IDQwLjg0NSAzOS4zMjQgOC42ODkgMCAxNi42MTktMi41IDIzLjEzNy02LjczNmw4LjM2MyA3LjQ5NCAxMC42NDUtMTEuODQtNy44MTgtNi42MjNjNC4zNDEtNi4xOTMgNi43MzItMTMuNzk5IDYuNzMyLTIxLjgzNXptLTIxLjM5OC40MzNjMCAyLjYwNy0uNDM1IDUuMTA1LTEuMzA0IDcuMzg0bC0xMC4zMTktOS4zNDFMMjM0LjEgNTAuMDQ3bDEwLjUzNyA5LjAxOGEyMS42NTUgMjEuNjU1IDAgMCAxLTcuNzExIDEuNDEyYy0xMS42MjEgMC0xOS40NDMtOS42NjYtMTkuNDQzLTIwLjYzOXYtLjIxNmMwLTEwLjk3MiA3LjcxMi0yMC41MzIgMTkuMjI1LTIwLjUzMiAxMS43MzMgMCAxOS42NjQgOS42NjggMTkuNjY0IDIwLjc0OHYuMjE2bC0uMDA0LjAwMXptODMuNTM0IDQuMzQ1YzAgMTAuNjQzLTUuNTQzIDE1LjYzOS0xNC4wMTYgMTUuNjM5LTguNDcyIDAtMTQuMDEzLTUuMjExLTE0LjAxMy0xNi4xODRWMS42MDJoLTIxLjM5N3Y0Mi42OWMwIDIzLjc4OSAxMy41NzggMzQuNzYzIDM1LjE5NCAzNC43NjMgMjEuNjE3IDAgMzUuNjI5LTEwLjc1NCAzNS42MjktMzUuMzA1VjEuNjAyaC0yMS4zOTdWNDQuNHptNjguODY4LTE0LjEyMWMtMTAuNTM3LTIuMzkxLTEzLjE0NS0zLjkxMS0xMy4xNDUtNy4zODV2LS4yMmMwLTIuNzE2IDIuNS00Ljg4OCA3LjYwNy00Ljg4OCA2LjczIDAgMTQuMzM4IDIuNjA1IDIxLjI4OSA3LjQ5Nkw0MzUuMDU5IDEwLjRDNDI2LjgwNSAzLjc3NSA0MTYuNzA1LjI5NyA0MDMuNzc4LjI5N2MtMTguMjUgMC0yOS40MzggMTAuMjEtMjkuNDM4IDI0LjMzMnYuMjE4YzAgMTUuNjQ0IDEyLjQ5MiAyMC4yMDUgMjguNjc3IDIzLjg5NiAxMC4zMTkgMi4zOTEgMTIuODE3IDQuMTI5IDEyLjgxNyA3LjI4di4yMTZjMCAzLjI1OC0zLjA0MyA1LjIxNS04LjY5IDUuMjE1LTguOCAwLTE3LjE2NC0zLjE1Mi0yNC42NTgtOS4xMjVsLTExLjcyOSAxNC4wMTJjOS4zNDMgOC4zNjcgMjIuMTYgMTIuNjAzIDM1LjYyNyAxMi42MDMgMTguNDY4IDAgMzAuNzQyLTkuMjMzIDMwLjc0Mi0yNC43Njd2LS4yMTljLS4wMDQtMTQuMjI4LTEwLjg2OC0xOS44NzYtMjguMzU2LTIzLjY3OXonPjwvcGF0aD48L2c+PC9zdmc+") no-repeat 10px 0;background-size:70%;opacity:0.3;top:0;left:0;bottom:0;right:0;position:absolute;z-index:1}
.disqus-open-recent:focus,.disqus-open-recent:active,.disqus-recent-close:focus,.disqus-recent-close:active{outline:0}
.disqus-recent-close{position:absolute;width:50px;height:50px;top:0;right:0;line-height:45px;text-align:center;font-size:40px;font-weight:300;color:#fff;cursor:pointer;z-index:2}
.disqus-comments-box-fixed amp-iframe{height:calc(100vh - 50px);width:300px;position:absolute;top:50px;left:0;animation:myframe 1s;-moz-animation:myframe 1s;-webkit-animation:myframe 1s}
.content-recent-disqus{background:rgba(0,0,0,.8);width:100%;height:100%;position:absolute}
@keyframes myframe{from{top:100%}to{top:50px}}
@-moz-keyframes myframe{from{top:100%}to{top:50px}}
@-webkit-keyframes myframe{from{top:100%}to{top:50px}}
@-webkit-keyframes slideInRight{0%{-webkit-transform:translateX(100%);transform:translateX(100%);visibility:visible}100%{-webkit-transform:translateX(0);transform:translateX(0)}}
@keyframes slideInRight{0%{-webkit-transform:translateX(100%);transform:translateX(100%);visibility:visible}100%{-webkit-transform:translateX(0);transform:translateX(0)}}

Beşinci adım: Son olarak aşağıdaki HTML kodu blogunuzun </body> kodunun bir satır üzerine ekleyin.

AMP HTML Widget

<amp-lightbox id='recent-disqus-drawer' layout="nodisplay">
<div class="content-recent-disqus" on="tap:disqus-recent.hide,disqus-recent-iframe.hide,recent-disqus-drawer.close" role="button" tabindex="0" aria-label="Kapat">
<div class='disqus-comments-box-fixed' id='disqus-recent' hidden=''>
<h3><span>Son Yorumlar:</span><div class='disqus-recent-close' on='tap:disqus-recent.hide,disqus-recent-iframe.hide,recent-disqus-drawer.close' role='button' tabindex='0' aria-label='Close Box'>&amp;times;</div></h3>
<amp-iframe noloading='' id='disqus-recent-iframe' frameborder='0' height='300' layout='responsive' sandbox='allow-forms allow-scripts allow-same-origin allow-modals allow-popups' src='https://cdn.rawgit.com/jquerycods/jquery/master/disqus_recent_commets.html?shortname=Disqus kullanıcı adınızı eklenyin&amp;fontBodyColor=555555&amp;fontBodyFamily=sans-serif&amp;fontLinkColor=2B0C93&amp;linkHoverColor=333333' width='600' hidden=''>
<amp-img noloading='' src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAALQCAAAAACftP71AAAAAXNCSVQI5gpbmQAAAF96VFh0UmF3IHByb2ZpbGUgdHlwZSBBUFAxAAAImeNKT81LLcpMVigoyk/LzEnlUgADYxMuE0sTS6NEAwMDCwMIMDQwMDYEkkZAtjlUKNEABZiYm6UBoblZspkpiM8FAE+6FWgbLdiMAAAAKElEQVRIiWN8wMDEwMD4n4GJYRShIJaHoyEzikbRKBpFwx+Nlvb0QQDdTAtAToIrJwAAAABJRU5ErkJggg=="
 layout="fixed-height" height="100vh" width="auto" placeholder=''>
</amp-img>
</amp-iframe>
</div>
</div>
</amp-lightbox>

Yukarıdaki kod içerisinde belirtilen yeri Disqus kullanıcı adınız ile değiştirin ve şablonu kaydedin.

Ön İzleme

Bu yazımızda AMP HTML blog kullanıcıları için Disqus AMP HTML Son Yorumlar Widget'ını paylaştık. Eklenti ile ilgili soru ve yardım için yorum formunu kullanarak bize ulaşabilirsiniz.