Adding a Facebook chat popup to your AMP site

You can use the below guide to create a popup messenger feature to your AMP URLs. The popup will use the amp-lightbox component for the modal popup, along with the amp-facebook-page component to initiate the messenger feature. 

Prerequisite: We’ve tried to make this tutorial as easy as possible to follow, however it does assume a very basic understanding of CSS and WordPress hooks. If you prefer to get straight into it and download the mini plugin as opposed to following the tutorial jump to the bottom of the page, or click here to download the mini plugin. 

  1. Create a mini plugin to add the content

Creating a mini plugin instead of  making changes to your active WordPress theme can be useful for a variety of reasons, including the below:

  • Theme updates won’t overwrite your them changes
  • You can use the mini plugin on other sites
  • You can safely deactivate when you wish

In order to create a mini plugin follow the steps below:

  1. Create a folder on your computer, title it “mypopup”.
  2. Open up your favourite text editor.
  3. Add the following content to the file. Feel free to change the “Author Name”.
<?php
/**
* Plugin Name: AMP Popup
* Description: My AMP Popup
* Author: Joe Bloggs
**/
  1. Save the file as mypopup.php within the new folder you just created.
  2. That’s it. Next is to add content to the plugin. 
  1. Create the button to open the popup

Next is to create a static button that when pressed opens your Facebook messenger popup. Follow the steps below to create the button, which will appear in AMP URLs:

  1. Open the mypopup.php file that you’ve created. 
  2. Add the following code to the mypopup.php file. This code inserts a static button in your AMP URLs, using the wp_head hook for placement and ‘is_amp_endpoint’ to ensure it runs on AMP URLs only. 
add_action(‘wp_head’, ‘mypopup_button’);
function mypopup_button()
{
    if (function_exists(‘is_amp_endpoint’) && is_amp_endpoint()) {
        echo ‘<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>
‘;
    }}
  1. Optional: You can change the SVG image that appears within the button with your own SVG.  
  1. Add some CSS to style the button

Now that we’ve added the button we’ll want to style it. For best practice we’ll do this using the recommended WordPress way, by creating a CSS file and then enqueuing it. 

  1. Create a new file with your favourite text editor
  2. Add the following to this newly created file
.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;}
  1. Save the file as mypopup.css. This file must be placed within your plugin folder.
  2. In order to include this new CSS file as part of your plugin add the following to your mypopup.php file to enqueue this CSS file
function mypopup_css() {
    $plugin_url = plugin_dir_url(__FILE__);
    wp_enqueue_style(‘style1’, $plugin_url . ‘mypopup.css’);
}
add_action( ‘wp_enqueue_style’, ‘mypopup_css’ );
  1. Save this update to your mypopup.php

Note you can also add some additional styling to the CSS file mentioned above. Some alterations you may prefer might include some rules to ensure the button only appears on desktop devices, or to position the button to the left. 

  1. Create the Lightbox popup

So far so good. Next we’re going to create the content to appear within the popup window. We’re going to use the wp_head hook once more to insert this into our website:

  1. Copy and paste the below code into your mypopup.php file. 
add_action(‘wp_head’, ‘mypopup_lightbox’);
function mypopup_lightbox()
{
    if (function_exists(‘is_amp_endpoint’) && is_amp_endpoint()) {
        echo ‘
    <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>
      ‘;
    }}
  1. Replace the MiamiHeat reference from the above code snippet with your own Facebook Page ID.
  2. Save this update 

Note you don’t necessarily need to add a Facebook messenger window within your popup. If you prefer to add some static text or a YouTube video simple remove the amp-facebook-page markup from the above and include your own content. 

  1. Upload your plugin

Now that you’ve created your mini plugin it’s time to upload and give it a test run. 

  1. Compress the contents of your mypopup folder into a zip file, so it’s ready to be uploaded as a WordPress plugin. Title the zip file mypopup.zip 
  2. Access your WordPress dashboard.
  3. Upload and install as you would any other WordPress plugin.
  4. Activate the plugin.
  5. Visit any AMP URL on your site and test our how your plugin works
  1. That’s it, you’re done! 

Congratulations, you’ve created a way for visitors to your AMP site to message your Facebook page directly. Not only that, you managed to create your own WordPress mini plugin while also making use of the amp-lightbox and amp-facebook-page components. 

Feel free to customize the above code snippets to suit your needs. If you manage to run into any problems simply deactivate the plugin from your WordPress admin dashboard, or alternatively you can rename the plugin  from mypopup to _mypopup to deactivate it manually. You’ll find the plugin within your WordPress install at wp-content/plugins/mypopup.

I don’t feel comfortable creating this mini plugin, but I really want this feature.

Fear not, we’ve created a working plugin for you. Simply download the mini plugin here.

You can modify to suit your needs. Please ensure you change the “MiamiHeat” reference with your own Facebook Page ID, preferably before uploading and installing. 

But it’s not working, what can I do?

If you find the plugin is not working as intended check the following:

  • Is the plugin activated? After installing the plugin did you activate the plugin?
  • Are you viewing an AMP URL? The popup is intended to feature on AMP URLs only. You can use the AMP validator Chrome extension or the plugins toolbar to ensure you are visiting an AMP URL. 

Be aware that this tutorial should preferably be followed on a staging site, it’s a demonstration of manually adding features to your AMP website. While we don’t provide support for this in the WordPress support forums you can seek assistance using standard channels as listed on the “Support” page. 

Can I see a sample?

Sure, click on the button below. Alternatively download, install and active the mini plugin yourself and try it out. Be sure you check an AMP URL after installing.

Sure, click on the button below. Alternatively download, install and active the mini plugin yourself and try it out. Be sure you check an AMP URL after installing.


Sure, click on the button below. Alternatively download, install and active the mini plugin yourself and try it out. Be sure you check an AMP URL after installing.