Embedded Comments iframe Height

Support
1

I recently got embedded comments working on my blog (only snafu was that the domains are case sensitive). Great feature, awesome work, etc etc etc.

However, the default height of the embedded iframe always seems to be 150. This means that users can not see the Continue Discussion button at the bottom. The iframe doesn’t show a scrollbar either, so users can’t even scroll down to reach the button. All they see is the top comment, and the rest of the content is cut off.

I can manually set the height of the iframe using css and that works (although I still don’t see a scroll bar even after setting overflow:scroll, but honestly I haven’t poked very much in that direction yet).

Is this the expected behavior? Is the height purposely left up to me, or is this indicative that something is wrong with my configuration? I read this reply to the original embed guide, but I’m a little confused about whether this is required or not.

As a comparison, if I go to Coding Horror’s latest blog, it looks like the height of the embedded iframe is based on the number of comments, which is how I expected it to work.

Am I missing a step in the embed process?

1 Like
2

Sorry to bump this, but does anybody know if this is the expected behavior, or if it sounds like something is wonky with my setup?

1 Like
3

Here’s some more info in case it helps:

I’m following this guide on setting up embedded comments.

Here is a screenshot of my embedding settings:

Pasted image771×927 42 KB

Here is a sample blog post on my site: http://happycoding.io/blog/hello-world

If you scroll to the bottom, you’ll see the comments section (and the fact that it’s only 150 pixels high), which leads to this forum topic: http://forum.happycoding.io/t/hello-world-happy-coding/23/1

Looking at the source for the blog post page, here’s the embed code I’m using:

<div id="discourse-comments"></div>

<script type="text/javascript">
DiscourseEmbed = { discourseUrl: 'http://forum.HappyCoding.io/',
	discourseEmbedUrl: 'http://happycoding.io/blog/hello-world' };
	
(function() {
	var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
	d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
	(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
})();
</script>

Now, if I look at the source for Coding Horror’s latest blog, I see this:

<div id="discourse-comments"></div>
<script type="text/javascript">
      var discourseUrl = "https://discourse.codinghorror.com/",
          discourseEmbedUrl = 'https://blog.codinghorror.com/can-software-make-you-less-racist/';

      (function() {
        var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
          d.src = discourseUrl + 'javascripts/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
      })();
    </script>

This is almost exactly what I’m doing, and more importantly, I don’t see anywhere else that’s modifying the iframe height. But the comments section on the Coding Horror post does grow to fit all of the comments, whereas mine doesn’t.

Am I missing something obvious? Do my Discourse settings look correct? Is there something on the blog post side that I need to be doing?

Sorry to bump this again. If this isn’t enough info to get an answer, I’ll try asking on the Discourse tag on Stack Overflow, but it would be useful just to know whether this is the expected behavior or not, since I see that other people have the same issue in the original guide, but I can’t tell whether their issues were expected or a result of something not working correctly.

4

It looks like the URL checking is case-sensitive:

image.png1411×400 160 KB

…so if you were to change your config such that it’s all lower-case, things should work.

I would suggest that this is a bug in the embedding – the normalizeURL method should probably lower-case the URLs on both sides before comparing. One of the Discourse team members is probably better-placed to make that decision, though! :slight_smile:

4 Likes
5

Aaah that was exactly it! Thanks so much!

I should have noticed this, because I had some trouble with the url being case sensitive upon initial setup of the comments, which caused them to not load at all. Ack, oh well!

One more tiny question: I noticed that the comments on Coding Horror and Evil Trout show Continue Discussion at the top of the comments, whereas that shows up at the bottom of mine. I don’t mind this (in fact I think I prefer it at the bottom), but I’m curious about what causes that difference? Maybe different versions of Discourse? Or maybe some logic that moves the button when there are a ton of comments?

6

Can you add this to your list @techapj?

2 Likes
7

Good catch :thumbsup: … Done via:

6 Likes