Comment system in AMP

[harryqt]

• Show WP comments in AMP version
• Disqus commenting system
• Facebook commenting system

Please post +1 if you are interested.

[aliaghdam]

Hi @Dibbyo456 ,

Thanks for suggestion. I added even more to your suggestion ;)

BetterStudio, Ali

[Nemo64]

Wordpress should be possible to implement right away using a combination of amp-(live-)list, amp-form and amp-access. If lazy, amp-iframe could also be a way.

Disqus can be implemented too using an amp-iframe as they document here: https://blog.disqus.com/disqus-now-compatible-with-google-amp Even though it looks like they suggest to implement it that way, it has some disqusting drawbacks like having menues trapped in the iframe.

I'd say these 3rd party services would need to either support the amp-iframe directly (like supporting url configuration, resizing messages etc.) or have there own amp-extension. 1st party implementations could implement them like documented here using existing amp extension: https://ampbyexample.com/samples_templates/comment_section/

[Van-Halen]

I found and used this example by Suraj Krishna Air

https://medium.com/@surajair/creating-comment-form-on-amp-pages-in-wordpress-9dd675ba383b

Maybe someone can improve upon, or better yet integrate it the right way into Better AMP.

The code below is far from perfect. I could not get the error response returned with the right headers (don't know why) so i removed the novalidate field from the form so the form does check for required fields, and refreshes the page after submit.

I added this to template/functions.php

function amp_comment_submit() {
    $comment = wp_handle_comment_submission( wp_unslash( $_POST ) );
    if ( is_wp_error( $comment ) ) {
        $data = intval( $comment->get_error_data() );
        if ( ! empty( $data ) ) {
        status_header( 500 );
            wp_send_json( array(
                'msg'       => $comment->get_error_message(),
                'response'  => $data,
                'back_link' => true
            ) );
        }
    } else {
        @header( "Content-type: application/json" );
        @header('AMP-Redirect-To: '. get_permalink($_POST['comment_post_ID']) . '#respond');
        @header('AMP-Access-Control-Allow-Source-Origin: ' . $_REQUEST['__amp_source_origin'] ); $_REQUEST['__amp_source_origin'] );

        wp_send_json( array( 'success' => true ) );
    }

}

add_action( 'wp_ajax_amp_comment_submit', 'amp_comment_submit', 5 );
add_action( 'wp_ajax_nopriv_amp_comment_submit', 'amp_comment_submit', 5 );

And added a comment form in template/single.php

<?php if(!comments_open(get_the_ID())): ?>
<div class="commentForm">
    <h3>Comments Are Closed</h3>
    <p></p>
</div>
<?php else: ?>
<div class="commentForm">
    <h3>Respond</h3>
    <form method="post" id="commentform" target="_top" class="comment-form" action-xhr="<?php echo admin_url('admin-ajax.php') ?>" target="_top">
        <input name="action" value="amp_comment_submit" type="hidden">
        <?php if(is_user_logged_in()): ?>
        <p class="comment-notes">
            <?php get_currentuserinfo(); ?>
            <span id="email-notes">Logged in as <?php echo $current_user->user_login; ?></span>
        </p>
        <?php else: ?>
        <p class="comment-notes">
            <span id="email-notes">Your email address will not be published.</span>
        </p>
        <?php endif; ?>

        <p class="comment-form-comment">
            <textarea id="comment" placeholder="your comment..." class="formInput" name="comment" cols="45" rows="8" maxlength="65525" aria-required="true" required="required"></textarea>
        </p>

        <?php if(!is_user_logged_in()): ?>
        <p class="comment-form-author">
            Naam: <input id="author" name="author" placeholder="your name..." class="formInput" type="text" value="" maxlength="245" aria-required="true" required="required" />
        </p>
        <p class="comment-form-email">
            Email: <input id="email" name="email" placeholder="your email..." class="formInput" type="email" value="" maxlength="100" aria-describedby="email-notes" aria-required="true" required="required" />
        </p>
        <p class="comment-form-url">
            Website: <input placeholder="Web" id="url" name="url" type="url" value="" maxlength="200" class="formInput"/>
        </p>
        <?php endif; ?>

        <p class="form-submit">
            <input type="hidden" name="comment_post_ID" value="<?php echo get_the_ID(); ?>" id="comment_post_ID" /><br/>
            <input type="hidden" name="comment_parent" id="comment_parent" value="0" />
            <input name="submit" type="submit" id="submit" class="submit" value="Reactie plaatsen" />
        </p>
    <div submit-error>
    <template type="amp-mustache">
      {{msg}}
    </template>
  </div>
    </form>
</div>
<?php endif; ?>

[harryqt]

@Nemo64 @aliaghdam, any update on adding built-in disqus comment in AMP? AMP for WP - Accelerated Mobile Pages Plugin does this already, since it's GPL, can you take a look?