How to Remove Disqus footer from webpage

Question

I want to remove the footer of Disqus plugin. Disqus works fine, but the footer looking a little iterating. I want to remove the footer so that I can only see the relevant comments.

You can see the footer at the end of the image.

enter image description here

<div class="well">
  <div id="disqus_thread"></div>
  <script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'destinationcompk'; // required: replace example with your forum shortname
    function disqus_config() {
      this.callbacks.afterRender.push(function() { alert('clayton') });
    }

    var disqus_identifier = "image_".concat(12);
    var disqus_title = "image_title".concat(12);

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function () {
        var dsq = document.createElement('script');
        dsq.type = 'text/javascript';
        dsq.async = true;
        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
  </script>
  <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments
  </a></noscript>
</div>

I'm just trying to hide footer that's it!

Im not au fait with the terms of service Disqus employ, but I would imagine this would be in breach of them. — SW4, Dec 17 '13 at 11:56
Its actually in violation of their ToS if you remove the footer: https://help.disqus.com/customer/portal/articles/466260-terms-of-service "you agree not to ... modify ... adapt ... edit ... works from any Disqus Content.","You agree that Disqus may include advertisements and/or content provided by Disqus ... as part of the implementation of the Service. You agree to comply ... to enable proper delivery, display, tracking and/or reporting of Ads." If you don't agree to the ToS, don't use it. — davidcondrey, Jul 03 '14 at 17:33
Using or not using is a separate debate. We are engineers, we should know if this thing can be performed or not. Makes sense? — A.J., Jul 08 '14 at 08:56
@Clayton We should also avoid being dicks to people who are giving us free stuff for our websites. — ceejayoz, Jul 30 '15 at 20:12

score 42 · Answer 1 · edited Jan 29 '15 at 19:13

42

In your CSS add:

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

edited Jan 29 '15 at 19:13

tanguy_k

11,307
6
54
58

answered Mar 06 '14 at 07:06

fanta

561
4
6

Do you know if in Iframe, Our Css is not applied there? – A.J. Mar 06 '14 at 07:14
It should be applied to the ID of the element where the iframe is injected. If you look at the Universal Code, there is an empty element
where the iframe will go. And to that one you will be adding an extra element with :after CSS. Hope it helps! – fanta Mar 12 '14 at 03:28
4

This IS the correct answer. Even though I dont believe Disqus would be Ok with hiding the footer, this solution does the job. – Drewman Apr 17 '14 at 14:41
1

There is a typo in that answer, discus should be disqus in first css selector – Thomas Davis May 23 '14 at 00:31
The `height` hack falls apart if you're using Disqus in a responsive setup. For instance, on a phone where the Disqus footer is no longer 55px. – Yahreen Jul 21 '14 at 00:56
1

Hello Yahreen, you can use media-queries to adjust it, using this concept. – fanta Jul 24 '14 at 23:52
2

Oh behalf of the anonymous user who suggested an edit, it should be noted that the background should be changed to match the background of the surrounding content. – bjb568 Aug 05 '14 at 02:29

score 9 · Answer 2 · answered Jul 30 '15 at 20:05

9

You can use negative margins and overflow hidden.

#disqus_thread {
  overflow: hidden;

  iframe {
    margin-bottom: -54px;
  }
}

answered Jul 30 '15 at 20:05

Robert Bokori

259
1
3
8

Much better, since it doesn't just leave a white box on top of that. – Matthias Jul 22 '16 at 02:05
Also, add `overflow-x:hidden` for mobile. (At least tested with iOS.) – Matthias Jul 22 '16 at 02:36

score 6 · Accepted Answer · answered Dec 17 '13 at 11:59

I was under the impression that the new disqus uses an iframe and therefore custom CSS can't be applied:

http://help.disqus.com/customer/portal/articles/526768-introducing-the-new-disqus-and-f-a-q-

For the most part, customization is different in the new Disqus because we decided to completely re-implement our commenting embed inside of an iframe. This iframe is hosted on disqus.com and, as such, the browser won't let your website apply styles to it using CSS statements.

i think you are right. so any case we can remove that footer? — A.J., Dec 17 '13 at 12:14

score 1 · Answer 4 · answered Jan 04 '19 at 05:06

Outside of the technical workarounds, there is a legitimate way to do this. According to the website, you can remove this with a Pro subscription, which is around $100/month at the time of this answer.

https://<accountname>.disqus.com/admin/settings/general/

score -4 · Answer 5 · edited Aug 17 '16 at 12:35

-4

In the Joomla administration panel go to administrator - extensions - plugin manager and disable Disqus. Example screenshot below:

enter image description here

edited Aug 17 '16 at 12:35

Jonathan Argentiero

5,687
8
29
34

answered Aug 17 '16 at 11:32

nini

1

2

This will remove Disqus from the page, not Disqus Footer. Sorry. – A.J. Aug 19 '16 at 09:46

How to Remove Disqus footer from webpage

5 Answers5

Linked