Skip to content

Instantly share code, notes, and snippets.

@jamesozzie

jamesozzie/mypopup.css

Last active Nov 20, 2020
Embed
What would you like to do?
AMP Facebook Messenger - Popup Tutorial
.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;
}
}
<?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' );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment