Move the Squarespace 7.1 blog comment box

Site URL: https://www.angeliquemartina.com/articles-archive/article-1

Hi, I'm trying to move the Squarespace comment box on blog pages. So that it will show up above the 'Other articles' summary block. It's now placed automatically right above the footer. Can anyone help? 

I see fine here. Did you solve?

I tried, by creating a code block with html (see below) 

But now I'm getting this. So I'm not sure I solved it.  

<section class="blog-item-comments">
        <div class="blog-item-comments-toggle-wrapper">
          <div id="blogItemCommentsContent" class="blog-item-comments-content" data-content-field="comments" style="z-index: 1; position: relative; cursor: pointer;">
            
            <div id="comments-5eeb4e234d4d4012b8f6c372" class="p-comment">
              
  <div class="squarespace-comments empty" id="comments-5eeb4e234d4d4012b8f6c372" data-item-id="5eeb4e234d4d4012b8f6c372" data-public-comment-count="0" data-comment-state="1"><div class="comments-content" style="opacity: 1;"><section id="comments">

<!--COMMENTS HEADER-->
<div class="header-controls">
  <div class="controls">

    <h3 class="comment-count">
      <span>Comments (0)</span>
    </h3>

    <div class="comment-controls">

      <span class="comment-sort">
        <span>Newest First</span>
        <select class="hidden-ordering">
          <option value="1">Oldest First</option>
          <option value="2" selected="selected">Newest First</option>
          
        </select>
      </span>

      
      <span class="subscribe subscribe-control">Subscribe via e-mail</span>
      

    </div>

  </div>
</div>

<!--NEW COMMENT TOP-->

<div class="new-comment-area top-level-comment-area edit-mode logged-in-commenting-unsupported">
<!--    <span class="squarespace-comment-login"></span>    <div class="new-comment-title">Add Comment</div>-->
  <div class="input">
    <form action="#" method="post" class="comment-form">
      <textarea class="comment-input" name="comment" data-defaulttext="Leave a comment here." data-edited="false"></textarea>                                  
    </form>
  </div>
  <div class="comment-btn-wrapper">
    
    <span class="btn-text preview-comment top-level-preview-btn">Preview</span>
    <!--toggle class on .new-comment-area to hide/show the appropriate button below
    <span class="btn-text edit-comment">Edit</span>-->
    
    
    
      
        <span class="comment-btn sqs-system-button sqs-editable-button-font sqs-editable-button-shape">Post Comment…</span>
      
    
  </div>
</div>

<!--COMMENT LIST-->
<div class="comment-list avatars-hidden" id="yui_3_17_2_1_1602596854699_661">
  
</div>

</section></div></div>

            </div>
            
          </div>
        </div>
      </section>

Can you remove your code? We will check easier.

Also do you use Personal Plan or higher?

Thank you so much for checking it out.  I removed the code. And I'm using a Business plan. 

On 10/14/2020 at 5:58 PM, lieslmaduro said:

Thank you so much for checking it out.  I removed the code. And I'm using a Business plan. 

Add to Blog Page Settings > Advanced > Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() { 
		$('section.blog-item-comments').insertBefore('.sqs-block-summary-v2');
	});
</script>

--

If you need to create Related Posts, you can use this plugin.

Quote

The plugin will automatically add a summary block if it finds related posts based on categories and tags of the current post. All options of Summary Block will be available for customization. The current post will be hidden.

Thank you so much! Worked perfectly! 

Question about this same topic. I'm trying to add text and code block under the comment box. 
How to do it? The code above wasn't enough. 

I'm using also the business plan.

On 3/11/2022 at 6:59 PM, Terhi said:

Question about this same topic. I'm trying to add text and code block under the comment box. 
How to do it? The code above wasn't enough. 

I'm using also the business plan.

Just a simple text or? We can give code easier.

On 10/15/2020 at 10:24 PM, tuanphan said:

Add to Blog Page Settings > Advanced > Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() { 
		$('section.blog-item-comments').insertBefore('.sqs-block-summary-v2');
	});
</script>

--

If you need to create Related Posts, you can use this plugin.

 

Hi @tuanphan,

I'm hoping to change the order of things on my blog posts.

For example: https://www.meghanfandrich.com/blog/fallen-leaf

• Recently updated to Business plan. 
• I downloaded & installed the Related Posts plugin, above.

On blog posts, I'd like the blog elements to appear in this order:

1. Body text & photos
2. Author bio
3. Newsletter signup
4. Related posts (using plugin)
5. Tags
6. Comments
7. Footer

Is that possible?

Thanks,
Meghan

23 hours ago, MF0708 said:

Hi @tuanphan,

I'm hoping to change the order of things on my blog posts.

For example: https://www.meghanfandrich.com/blog/fallen-leaf

• Recently updated to Business plan. 
• I downloaded & installed the Related Posts plugin, above.

On blog posts, I'd like the blog elements to appear in this order:

1. Body text & photos
2. Author bio
3. Newsletter signup
4. Related posts (using plugin)
5. Tags
6. Comments
7. Footer

Is that possible?

Thanks,
Meghan

Move this only?

1 minute ago, tuanphan said:

Move this only?

Yes please!

On 12/19/2023 at 7:51 AM, MF0708 said:

Yes please!

Can you enable Comment box? Now it doesn't show comment here

6 hours ago, tuanphan said:

Can you enable Comment box? Now it doesn't show comment here

Sorry, yes, enabled now! And I'll stop adjusting things. : )

14 hours ago, MF0708 said:

Sorry, yes, enabled now! And I'll stop adjusting things. : )

Add to Website Tools (under Not Linked) > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
   jQuery(document).ready(function($){
  $('section.blog-item-comments').insertBefore('div.blog-item-content-wrapper div.newsletter-block');
})
</script>

16 hours ago, tuanphan said:

Add to Website Tools (under Not Linked) > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
   jQuery(document).ready(function($){
  $('section.blog-item-comments').insertBefore('div.blog-item-content-wrapper div.newsletter-block');
})
</script>

Thanks! I'm trying to move up the author profile, however, not the comments. Is there a way to move it instead?

10 hours ago, MF0708 said:

Thanks! I'm trying to move up the author profile, however, not the comments. Is there a way to move it instead?

You mean move author above newsletter and keep comment still at bottom of page?

9 hours ago, tuanphan said:

You mean move author above newsletter and keep comment still at bottom of page?

Yes -- like this:

On 12/21/2023 at 1:06 PM, tuanphan said:

Add to Website Tools (under Not Linked) > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
   jQuery(document).ready(function($){
  $('section.blog-item-comments').insertBefore('div.blog-item-content-wrapper div.newsletter-block');
})
</script>

Use this new code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
   jQuery(document).ready(function($){
  $('.blog-item-author-profile-wrapper').insertBefore('div.blog-item-content-wrapper div.newsletter-block');
})
</script>

Hi @tuanphan

Thank you for your advise on this forum, it is very helpful.

I used your script above to move the comment box on my #1 blog so that it was positioned above the summary box. This is working perfectly.

On the same website, I have a #2 blog with its own articles and have used the same script to do the same thing however the comment box does not show anywhere on the second blog's articles.

My question is; Is it possible to have comments on two altogether different blogs? I'm not sure what it is I'm overlooking.

This is already done correctly which is why the #1 blog has the comment box showing.

1. Open the Blog preferences panel.
2. Click Comments Settings.
3. Edit settings to enable comments, control permissions, and choose how they display.
4. Everything is enabled

Thank you in advance for your assistance.

This is the script I used in the Header on both Blogs

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function() { 

$('section.blog-item-comments').insertBefore('.sqs-block-summary-v2');

});

</script>

4 hours ago, Sharon-Evans said:

Hi @tuanphan

Thank you for your advise on this forum, it is very helpful.

I used your script above to move the comment box on my #1 blog so that it was positioned above the summary box. This is working perfectly.

On the same website, I have a #2 blog with its own articles and have used the same script to do the same thing however the comment box does not show anywhere on the second blog's articles.

My question is; Is it possible to have comments on two altogether different blogs? I'm not sure what it is I'm overlooking.

This is already done correctly which is why the #1 blog has the comment box showing.

1. Open the Blog preferences panel.
2. Click Comments Settings.
3. Edit settings to enable comments, control permissions, and choose how they display.
4. Everything is enabled

Thank you in advance for your assistance.

This is the script I used in the Header on both Blogs

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function() { 

$('section.blog-item-comments').insertBefore('.sqs-block-summary-v2');

});

</script>

Can you share link to #2 blog? I can check easier.

Hi @tuanphan

Thank you for your quick response, it is greatly appreciated.

Link to #2 Blog: https://www.freewheelingkiwi.com/teararoablog

Link to article in #2 Blog where I've embedded your above script https://www.freewheelingkiwi.com/teararoablog/day0

FYI Link to #1 Blog's Article showing the comment box as correct  https://www.freewheelingkiwi.com/blog/swayambhunath

Thanks in advance for your further assistance 

Can you disable script code you added? I will check again.

I see code run, but it looks like second page has problem with Comment box, so you need to disable script code, so I can test code again easier.

Hi @tuanphan

This is odd, I can no longer find the block with the script embed code on the page. It's disappeared so I'm unable to disable it 🫣

Hi @tuanphan Are you still able to see the script as I can't locate it on the page?

Thanks again for your help.