AMP Facebook Messenger - Popup Tutorial

mypopup.css

.mypopup_button {
  position: fixed;
  bottom: 20px;
  width: 40px;
  height: 40px;
  right: 20px;
  border: 0px solid #d6d6d6;
  z-index: 99;
  background: linear-gradient(#CC3366, #0066ff);
  border-radius: 40px;
  display: grid;
  place-items: center;
  font-weight: bold;
  font-size: 18px;
  color: #d6d6d6;
}

.mypopup_lightbox {
  background: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 600px) {
  .mypopup_button{
    display:none;
  }
}

mypopup.php

<?php
/**
 * Plugin Name: AMP Popup
 * Description: My AMP Popup
 * Author: Your Name Here
 * Plugin URI: https://gist.com/
 * Version: 0.1
 * Author: James
 * Author URI: https://yourwebsite.com/
 * License: GNU General Public License v2 (or later)
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 *
 * @package amp-popup
 **/

add_action( 'wp_head', 'mypopup_button' );

/**
 * Add the button.
 */
function mypopup_button() {
	if ( function_exists( 'is_amp_endpoint' ) && is_amp_endpoint() ) {
		?>
	<div class="mypopup_button">
		<div on="tap:mypopup-lightbox" role="button" tabindex="0" >
			<svg width="41.000000pt" height="82.000000pt">
				<g transform="translate(5.000000,28.000000) scale(0.0350000,-0.035000)" fill="#fff" stroke="none">
				<path d="M169 242 c-86 -98 -155 -179 -154 -180 2 -2 61 21 131 52 70 31 133 56 140 56 6 0 48 -38 92 -85 l80 -85 175 193 c97 105 174 193 173 194 -1 2 -69 -33 -151 -77 -82 -44 -150 -80 -151 -80 -2 0 -25 24 -51 52 -26 29 -66 71 -88 94 l-40 42 -156 -176z"/>
				</g>
			</svg>
		</div>
	</div
		<?php
	}
}

/**
 * Load  CSS files.
 */
function mypopup_css() {
	wp_register_style( 'mypopup-style', plugin_dir_url( __FILE__ ) . 'mypopup.css', null, '0.1' );
	wp_enqueue_style( 'mypopup-style' );
}

add_action( 'wp_enqueue_scripts', 'mypopup_css' );

/**
 * Adds Facebook Chat Popup.
 *
 * @return void
 */
function mypopup_lightbox() {
	if ( function_exists( 'is_amp_endpoint' ) && is_amp_endpoint() ) {
		?>
		<div>
			<amp-lightbox id="mypopup-lightbox" layout="nodisplay">
				<div class="mypopup_lightbox" on="tap:mypopup-lightbox.close" role="button" tabindex="0">
					<div class="inner" on="tap:mylightbox.open">
						<amp-facebook-page width="300" height="500"
							layout="fixed"
							data-href="https://www.facebook.com/MiamiHeat"
							data-adapt-container-width="true"
							data-show-facepile="true"
							data-hide-cover="false"
							data-small-header="true"
							data-tabs="messages"
							data-width="300"
							data-height="500">
						</amp-facebook-page>
					</div>
				</div>
			</amp-lightbox>
		</div>
		<?php
	}
}

add_action( 'wp_head', 'mypopup_lightbox' );