Make Google Comments Responsive

27 Mar 2018

While procrastinating for my assignments doing my latest web site revamp, I decided to try out the Google+ comment plugin. It’s super easy to set up, fits nicely with my web site’s aesthetic, and doesn’t require any contortions to work around static site generation (I use Jekyll). But when I checked my site out on my phone, this nonsense happened:

Overly wide google comment box

A quick google search didn’t turn up anything, just this StackOverflow post from a few years ago, which still didn’t have an answer.

Here’s my solution.

For reference, this is (one of the ways) you can embed Google+ comments:

<script src="https://apis.google.com/js/plusone.js"></script>
<div id="comments"></div>
<script>
  gapi.comments.render('comments', {
    href: window.location,
    width: '624',
    first_party_property: 'BLOGGER',
    view_type: 'FILTERED_POSTMOD'
  });
</script>

snippet source

The width parameter is passed as an integer string. You can’t specify something like, say, “100%.” So I added a dummy container around it to use that as a reference when setting the size.

<script src="https://apis.google.com/js/plusone.js"></script>
<div class="comments-container"> <!-- dummy container! -->
  <div id="comments"></div>
</div>
<script>
  $(document).ready(function() {
    var w = $('.comments-container').width();
    gapi.comments.render("comments", {
      href: window.location,
      width: w.toString(),  /* pass the dummy's width */
      first_party_property: 'BLOGGER',
      view_type: 'FILTERED_POSTMOD'
    });
  });
</script>

I’m already using jQuery, but it probably wouldn’t be that hard to rejig this to do without.

There, no more stupidly wide comment box:

Appropriately sized Google comment box