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

Question

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

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

这里的屏幕截图，https://i.stack.imgur.com/jE2IY.jpg

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

我知道新的Disqus使用了iframe，但是有一个类似的线程可以隐藏链接到这里的Disqu页脚，下面的CSS代码确实有效。

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

使用Chrome中的"inspect元素"，我可以使用"display:none"隐藏共享元素

.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来呈现注释，以防止XSS

尽管我不建议你这样做，但有一种方法可以做到。

在执行任何操作之前，请阅读条款和条件。

    <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
}

你将无法再使用特色评论，但嘿，它可以

对我来说是这样的_(ツ)_/