Disqus

  • 7 October 2013
  • 3 replies
  • 3 views

I would like to use Disqus on my Unbounce landing pages but the limitation seems to be the page not extending in length as more comments are made. Is there a way to have this work flawlessly?


3 replies

Hey Sam - page sections in Unbounce are given absolute values for their height because of the drag and drop functionality. It may be possible though with some CSS. Can you send me a link to your page? (you can email support@unbounce.com if you prefer)

We may be able to puzzle something out.

Got this working flawlessly both on Desktop & Mobile

The following is a simple fix done with css.

Desktop Version:
Firstly, don’t drop Disqus code into the Javascript snippet area.
Instead, create a new “page section” at the bottom of your page and drop in the Disqus script as html (using the “custom html” block).

This desktop version will automatically add whatever background you have in the last page section.

Next, the following css is what I used:
(the second id “#lp-code-221” may be different for your page)

/*Auto extend page for Disqus*/
#lp-pom-root {
height: 100%;
overflow: auto;
}

#lp-code-221 {
height: auto;
}

html, body, .lp-pom-body {
overflow: hidden;
}

Mobile Version:
For mobile, it’s straight forward and basic. Just drop the Disqus script into the javascript snippet area & then add the following css:

#disqus_thread {
background-color: rgba(34,34,34,1); Use whatever background you wish
padding: 20px !important;
}

I have not yet tried Facebook comments but I’m sure this will work as easily as Disqus with similar css.

Has anyone tried for Facebook comments and made it work?

Reply