如何通过 CSS 隐藏 Disqus 的社交分享

Question

我想使用 Disqus cmets 系统作为基于 bootstrap/html5 模板的婚礼网站上的留言簿。

由于网站上的内容是个人的，我想删除出现在 cmets 框上方和每个单独评论下方的 Facebook、Twitter 等共享链接。

截图在这里，http://imgur.com/pkvUSoF

有没有办法通过在 CSS 中隐藏共享元素来实现这一点？

我了解新的 Disqus 使用 iframe，但是有一个类似的线程可以隐藏 Disqus 页脚 linked here，并且下面的 CSS 代码确实有效。

#disqus_thread{
     position: relative;
}
#disqus_thread:after{
     content: "";
     display: block;
     height: 55px;
     width: 100%;
     position: absolute;
     bottom: 0px;
     background:white;
}

使用 Chrome 中的“检查元素”，我可以使用“显示：无”隐藏共享元素

.nav-secondary>ul>li.share-menu {
float: right;
display: none;
}

和

.post-content footer .share {
position: relative;
display: none;
}

任何人都可以帮助我使用正确的代码/语法将其添加到我的 styles.css 以隐藏社交共享按钮。

谢谢！

Answer 1

如文章中所述，这是不可能的。 https://help.disqus.com/customer/portal/articles/545277

原因：它使用 iframe 渲染 cmets 以防止XSS

即使我不建议你这样做，但有办法这样做。

请在执行任何操作之前阅读terms and conditions。

    <div id="disqus_thread"><div>

    <style>
    .hide-social-discuss {
        background: white; // change color according to your site back.
        height: 20px;
        position: relative;
        width: 80%;
        top: -60px;
    }
    <script>
        //add this to script
        $("#disqus_thread").append("<div class='hide-social-discuss'></div>")
    </script>

Answer 2

与您提到的相同 CSS，但已调整为覆盖共享按钮。

请在使用此之前阅读 disqus 条款和条件。

disqus_thread {
  position: relative;
}
#disqus_thread:before {
  content: "";
  display: block;
  height: 20px;
  width: 80%;
  position: relative;
  bottom: -72px;
  background: white; //replace with your background colour
}

您将无法再使用精选 cmets，但嘿，它可以工作

looks like this for me¯_(ツ)_/¯