OneSignal Push Notification Intergration

@mj00712 The CSS from the 4th step will need to be added to your active themes functions.php file as opposed to directly into your reader mode templates. Place the CSS inside the following function:

add_action( 'amp_post_template_css', 'xyz_amp_my_additional_css_styles' );
function xyz_amp_my_additional_css_styles( $amp_template ) {
?>
  // CSS here 

 <?php
}

You have other issues with the meta charset tag in use, which could be caused another plugin causing the meta charset tag.

There are two codes one for the head and one for where the widget will appear. Do both have to be added to the function?

Meta charset tag
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
This appears in the head of html-start.php

I don’t see that error anymore, I assume you found the source. Eitherway you’re almost there. For the remaining validation error (The tag ‘style amp-custom’ appears more than once in the document) you can remove the <style amp-custom> and closing </style> from that CSS you added to your functions.php file.

Encoding
It was due to the encoding being set to windows-1252. The utf-8 encoding solves the issue.

• This reply was modified 5 years, 1 month ago by Muhammad Junaid.

Everything is fixed now. Now I want to know, how should I place the subscription button just before the facebook comments plugin?

That’s up to yourself to choose the placement, wherever suits.

application/x-httpd-php single.php ( PHP script text )
<?php
/**
 * Single view template.
 *
 * ??????
 * DO NOT EDIT THIS FILE WHILE INSIDE THE PLUGIN! Changes You make will be lost when a new version
 * of the AMP plugin is released. You need to copy this file out of the plugin and put it into your
 * custom theme, for example. To learn about how to customize these Reader-mode AMP templates, please
 * see: https://amp-wp.org/documentation/how-the-plugin-works/classic-templates/
 * ??????
 *
 * @package AMP
 */

/**
 * Context.
 *
 * @var AMP_Post_Template $this
 */

$this->load_parts( [ 'html-start' ] );
?>

<?php $this->load_parts( [ 'header' ] ); ?>

<article class="amp-wp-article">
	<header class="amp-wp-article-header">
		<h1 class="amp-wp-title"><?php echo esc_html( $this->get( 'post_title' ) ); ?></h1>
		<?php $this->load_parts( apply_filters( 'amp_post_article_header_meta', [ 'meta-author', 'meta-time' ] ) ); ?>
	</header>

	<?php $this->load_parts( [ 'featured-image' ] ); ?>

	<div class="amp-wp-article-content">
		<?php echo $this->get( 'post_amp_content' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
			    	<!-- A subscription widget -->
<amp-web-push-widget visibility="unsubscribed" layout="fixed" width="261" height="45">
  <button class="subscribe" on="tap:amp-web-push.subscribe">
    <amp-img
             class="subscribe-icon"
             width="24"
             height="24"
             layout="fixed"
             src="data:image/svg+xml;base64,PHN2ZyBjbGFzcz0ic3Vic2NyaWJlLWljb24iIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMS44NCAxOS44ODdIMS4yMnMtLjk0Ny0uMDk0LS45NDctLjk5NWMwLS45LjgwNi0uOTQ4LjgwNi0uOTQ4czMuMTctMS41MTcgMy4xNy0yLjYwOGMwLTEuMDktLjUyLTEuODUtLjUyLTYuMzA1czIuODUtNy44NyA2LjI2LTcuODdjMCAwIC40NzMtMS4xMzQgMS44NS0xLjEzNCAxLjMyNSAwIDEuOCAxLjEzNyAxLjggMS4xMzcgMy40MTMgMCA2LjI2IDMuNDE4IDYuMjYgNy44NyAwIDQuNDYtLjQ3NyA1LjIyLS40NzcgNi4zMSAwIDEuMDkgMy4xNzYgMi42MDcgMy4xNzYgMi42MDdzLjgxLjA0Ni44MS45NDdjMCAuODUzLS45OTYuOTk1LS45OTYuOTk1SDExLjg0ek04IDIwLjk3N2g3LjExcy0uNDkgMi45ODctMy41MyAyLjk4N1M4IDIwLjk3OCA4IDIwLjk3OHoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=">
    </amp-img>
    Subscribe to get Job updates
  </button>
</amp-web-push-widget>
           

<!-- An unsubscription widget -->
<amp-web-push-widget visibility="subscribed" layout="fixed" width="230" height="45">
   <button class="unsubscribe" on="tap:amp-web-push.unsubscribe">Unsubscribe from updates</button>
</amp-web-push-widget>
	</div>

	<footer class="amp-wp-article-footer">
		<?php $this->load_parts( apply_filters( 'amp_post_article_footer_meta', [ 'meta-taxonomy', 'meta-comments-link' ] ) ); ?>
	</footer>
</article>

<?php $this->load_parts( [ 'footer' ] ); ?>

<?php
$this->load_parts( [ 'html-end' ] );

I have used this. But this appears in between the related posts. Sorry, I don’t where to place it so that it appears at the end of content or just before the comments plugin.

@westonruter can you help regarding that?

The way to do that would be to add it to the content as opposed to adding it to the template. This will also eliminate the need to manually add the scripts to the Reader mode templates.

From looking at Jetpack’s Related Posts module, you can see it appears to have a priority of 40: https://github.com/Automattic/jetpack/blob/57e79e0788be81a6a758ddca653a0fb67cfc8efe/modules/related-posts/jetpack-related-posts.php#L1670

So to insert it before, you can just put this into a custom plugin or your custom theme’s functions.php:

add_filter( 'the_content', function( $content ) {
	if ( ! ( is_singular() && function_exists( 'is_amp_endpoint' ) && is_amp_endpoint() ) ) {
		return $content;
	}
	
	ob_start();
	?>
	<amp-web-push-widget visibility="unsubscribed" layout="fixed" width="261" height="45">
		<button class="subscribe" on="tap:amp-web-push.subscribe">
			<amp-img
				class="subscribe-icon"
				width="24"
				height="24"
				layout="fixed"
				src="data:image/svg+xml;base64,PHN2ZyBjbGFzcz0ic3Vic2NyaWJlLWljb24iIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMS44NCAxOS44ODdIMS4yMnMtLjk0Ny0uMDk0LS45NDctLjk5NWMwLS45LjgwNi0uOTQ4LjgwNi0uOTQ4czMuMTctMS41MTcgMy4xNy0yLjYwOGMwLTEuMDktLjUyLTEuODUtLjUyLTYuMzA1czIuODUtNy44NyA2LjI2LTcuODdjMCAwIC40NzMtMS4xMzQgMS44NS0xLjEzNCAxLjMyNSAwIDEuOCAxLjEzNyAxLjggMS4xMzcgMy40MTMgMCA2LjI2IDMuNDE4IDYuMjYgNy44NyAwIDQuNDYtLjQ3NyA1LjIyLS40NzcgNi4zMSAwIDEuMDkgMy4xNzYgMi42MDcgMy4xNzYgMi42MDdzLjgxLjA0Ni44MS45NDdjMCAuODUzLS45OTYuOTk1LS45OTYuOTk1SDExLjg0ek04IDIwLjk3N2g3LjExcy0uNDkgMi45ODctMy41MyAyLjk4N1M4IDIwLjk3OCA4IDIwLjk3OHoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=">
			</amp-img>
			Subscribe to get Job updates
		</button>
	</amp-web-push-widget>

	<!-- An unsubscription widget -->
	<amp-web-push-widget visibility="subscribed" layout="fixed" width="230" height="45">
		<button class="unsubscribe" on="tap:amp-web-push.unsubscribe">Unsubscribe from updates</button>
	</amp-web-push-widget>
	<?php
	$web_push = ob_get_clean();
	
	return $content . $web_push;
}, 39 );

Note the priority of 39 instead of 40.

There would no need to modify the AMP template in this case either.

When I add this code using Code Snippets plugin, it gives Error 404.

Now, I am not using Jetpacks related posts due to the conflict with the sharing buttons.