Ghost CMS'ye nasıl Disqus entegre edilir?

Selam arkadaşlar, bugün sizlere tema düzenleme vb. dertlerle işiniz olmadan nasıl sitenize Disqus entegre edebileceğinizi anlatacağım. Öncelikle Ghost admin paneline giriş yaptıktan sonra ayarlardan Code İnjection bölümüne gelip aşağıdaki verdiğim kodu header kısmına yapıştırın:

<script>
// Disqus Temel Konfigürasyon
var disqus_config = function () {
    this.page.url = window.location.href;
    this.page.identifier = window.location.pathname.replace(/\/$/, ""); // Son slash'ı temizle
};
// Sayfa Tipi Kontrolü
function isPostPage() {
    const pathCheck = /(\/post\/|\/yazi\/|\/p\/)/i.test(window.location.pathname);
    const metaCheck = document.querySelector("meta[name='ghost:page_type']")?.content === 'post';
    return pathCheck || metaCheck || document.body.classList.contains('post-template');
}
// Disqus Yükleme Fonksiyonu
function loadDisqus() {
    if (!isPostPage()) return;
    // Konteyner Oluşturma
    const container = document.createElement('div');
    container.className = 'disqus-compact-container';
    
    const disqusThread = document.createElement('div');
    disqusThread.id = 'disqus_thread';
    
    container.appendChild(disqusThread);
    
    // İçerik Alanına Ekleme
    const contentArea = document.querySelector('article, .post-content, .kg-prose');
    if (contentArea) {
        contentArea.appendChild(container);
        
        // Dinamik Script Yükleme
        const d = document, s = d.createElement('script');
        s.src = 'https://example.disqus.com/embed.js';
        s.async = true;
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
    }
}
// Optimize CSS
const style = document.createElement('style');
style.textContent = `
/* Ana Konteyner */
.disqus-compact-container {
    max-width: 680px !important;
    margin: 25px auto !important;
    padding: 0 15px !important;
}
/* Disqus Thread */
#disqus_thread {
    width: 100% !important;
    min-height: 300px;
    position: relative;
}
/* Mobil Optimizasyonlar */
@media (max-width: 768px) {
    .disqus-compact-container {
        max-width: 100% !important;
        margin: 15px 0 !important;
        padding: 0 8px !important;
    }
    
    #disqus_thread iframe {
        width: 100% !important;
        min-width: 100% !important;
        transform: scale(0.98) !important;
        transform-origin: left top !important;
        margin-left: -1px !important;
    }
}
/* Emoji Düzeni */
.reaction-buttons-container {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
    padding: 8px 0 !important;
    overflow-x: auto !important;
}
button.reaction-button {
    padding: 6px 10px !important;
    min-width: 80px !important;
    flex-shrink: 0 !important;
}
`;
document.head.appendChild(style);
// Yükleme Tetikleyici
document.addEventListener('DOMContentLoaded', function() {
    loadDisqus();
    
    // Mobil için Ekstra Optimizasyon
    if(window.innerWidth <= 768) {
        const observer = new MutationObserver(() => {
            const iframes = document.querySelectorAll('#disqus_thread iframe');
            iframes.forEach(iframe => {
                iframe.style.maxWidth = '100vw';
                iframe.style.overflow = 'hidden';
            });
        });
        observer.observe(document.body, { childList: true, subtree: true });
    }
});
</script>

example.disqus.com
Kısmını kendi Disqus kısa adınız ile değiştirin. Disqus hesabı ayarlamak vb. işlemler için aşağıdaki linke tıklayın:

#1 in audience engagement and community growth | Disqus

More publishers trust us to engage, grow, and understand their audiences than any other. Build your on-site community with Disqus.

Disqus

Hepinize iyi günler diliyorum. Kendinize iyi bakın.