Topics

Create Blogger AMP HTML template install & download Accelerated Mobile Pages themes for Blogspot platform.


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

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.

AMP HTML Blogger Theme Facebook Chatbox Messenger Plugin Tutorial

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://1.bp.blogspot.com/-iD5VDA_zPeQ/Wo8YHQ7POsI/AAAAAAAAntY/uX1xWh_wnsELIsThskRC8j8X34kbe9YagCLcBGAs/s1600/Blogr-AMP-facebook-messenger%2B%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.

Blogr-AMP Blogger AMP HTML TemplateRated 5/5 based on 98 reviewsInstall AMP HTML placeholder Facebook Messenger Live Chatbox plugin for Blogger blog, easy integrations, full tutorial, code snippets & explanations available.Blogr-AMP: Add Facebook Live Messenger Chatbox Placeholder for Blogger Theme with AMP HTML
5/ 5
Best AMP Blogger template, Blogr-AMP exceeded my expectations. Search engine friendly, easy to use, backed by great support Facebook Messenger Live Chatbox for Blogger themes  available here  been a hit ever since we shared the full working tutorial, codes, & ....

Topics You Might Be Interested...


Disqus Comments

Facebook Comments

Working to get connected...

Ooops! We're having trouble connecting. Please refresh your page or contact us...

Code Parser

Have a code snippet to share? Format RAW codes here...

Users who needs to share code snippets in comments, use helper below to paste your codes & copy to comments body.

Follow us on Instagram
@irsahindesigns





More from Instagram...

Working...

Ooops! We're having trouble connecting...