Add Facebook Live Messenger Chatbox Placeholder for Blogger Theme with AMP HTML

Theme Version: 2-0-0

Facebook Messenger Live Chatbox for Blogger themes available here been a hit ever since we shared the full working tutorial, codes, & style markups for AMP HTML powered Blogger blogs.

Due to the easy integrations, we also received plenty of requests via socials on how to further capitalize the "empty" Facebook Messenger app displayed while waiting for the Facebook assets to retrieve & render.

In this tutorial, we will show you how to add an AMP supported placeholder which will be shown to users before the Facebook Messenger chatbox is displayed on user's screen.

Here's the basic instructions to add Facebook Messenger Live Chatbox at your blog on Blogger;-

1. Install Facebook Messenger Live Chatbox Blogger Plugin like explained in this tutorial
2. Add AMP supported placeholder markup
3. (Optional) Add custom CSS to style placeholder.
4. Save your theme/widget changes
5. Preview your new integration updates.

Live working example is available here at BlogrAMP theme, test out the shiny Facebook Messenger button far right. While you're there, leave a "Like" if you find this article useful ;).

Install Facebook Messenger Live Chatbox Blogger Plugin

The easy to install Facebook Messenger Live Chatbox Blogger plugin is available at below tutorial.

https://blogr-amp.blogspot.com/2018/02/facebook-messenger-live-chatbox-for-amp.html?m=0

Follow the simple instructions to add your custom Facebook chat plugin to your AMP HTML integrated blog easily.

If you have installed the above Blogger plugin, proceed to below.

Update Facebook Messenger Chatbox AMP HTML Markup

Below will be an example of an AMP HTML valid markup to include the Facebook Messenger Live Chatbox for Blogger Theme with AMP integrations. (explained in this instructions)

<button on="tap:blogramp-fb"> </button>
<amp-lightbox id="blogramp-fb" layout="nodisplay">
  <div class="blogramp-fb-wrap">
    <div class="blogramp-fb-inner">
     <amp-facebook-page width="310" height="310"
       layout="fixed"
       data-href="https://www.facebook.com/irsahindesigns"
       data-adapt-container-width="true"
       data-show-facepile="true"
       data-hide-cover="false"
       data-small-header="true"
       data-tabs="messages"
       data-width="310"
       data-height="310">
     <div placholder="placeholder">
       <amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2oMjJGJ5YAYVzZcGzvNNJJlG6JCOFR-CHzxTU0F89gtK5WzJpzxxbqveTXLJYxSCkW0Y8xQgzV-FjFJmJSUzc6UvYoU53X-YHrJkswV8WPk5XmyH5urFk7vG4pUxmZxn-_SaepSCIzd0/s1600/Blogr-AMP-facebook-messenger+%25281%2529.png" layout="fixed" width="40" height="40"></amp-img>
       <p>Connecting to Favcebook. Please Hold..</p>
     </div>
     </amp-facebook-page>
     <button class="fb-chat-button" on="tap:blogramp-fb.close">
      x
     </button>
    </div>
  </div>
</amp-lightbox>

Before/above highlighted green, add the AMP supported placeholder HTML (highlighted yellow).

Edit the amp-img src to the image URL you have uploaded earlier. The above example is using Facebook Messenger App icon as an image.

Update the text to display within the placeholder.

Click Save to update your Theme/Widget changes.

Add Facebook Messenger Live Chatbox Placeholder Styles (CSS)

Optional add below CSS within your theme <style amp-custom="amp-custom"> ...</style> tag to style your Facebook Messenger Live Chatbox placeholder..

#blogramp-fb amp-img {
   margin: 0 auto;
   /* todo: add styles for the placeholder image */
}

#blogramp-fb [placeholder="placeholder"]  {
   text-align: center;
   /* todo: add styles for the placeholder text */
}

Click Save Theme, refresh your blog pages & test it out

If you need assistance or questions regarding installing Facebook Messenger Live Chatbox for Blogger blogs, contact theme contributors or leave your comments below.