Replace highlighted yellow to your Facebook Page ID.
Add amp-facebook-page & amp-lightbox Components in Theme
Copy and paste below amp-lightbox & amp-facebook-page component within your theme ... tag.
Note: Check if your Blogger theme already has the above AMP components installed. If your theme already has this then continue below to add the plugin styles.
Add Facebook App ID
This is most important as this Facebook App ID identifies which app is used & associated with for management purposes at your Fb Developer page/account.
If you have a Facebook App ID, then copy & paste below at your theme ... tag.
Replace highlighted yellow to your Facebook App ID.
If you want to create a new Facebook App ID to associate with this new widget, head over to Facebook Developer page & create your free Fb app. Here's the step-by-step guide to create your Facebook App ID.
Add Facebook Messenger Live Chatbox Styles (CSS)
Copy & paste below CSS within your theme tag.
#blogramp-fb {
text-align:center;
background-color: rgba(0,0,0,.85);
color:#fff;
}
[on="tap:blogramp-fb"],
#blogramp-fb [on="tap:blogramp-fb.close"] {
text-align: center;
display: inline-block;
width: 40px;
height: 40px;
margin: 0 auto;
z-index: 999;
background-color: #0075FF;
background-repeat: no-repeat;
background-size: 30px 30px;
background-position: center;
border: 0;
border-radius: 100%;
}
[on="tap:blogramp-fb"]{
position: fixed;
bottom: 50%;
right: 0;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx6HXf5-lT4lPmTL_s8MGz93YxYvyQToUXRYNlvzZ2XmzzbR70fFQIwYq7XEjZVKSDtQz0LzmrsXeEgrMngSAGdkr0-m1AzaIWxLr0HquaHgkEJU6pMIkJ1JQ6roJvFq0oXRuO7Gnufqo/s1600/Blogr-AMP-facebook-messenger+%25281%2529.png);
margin-bottom: -20px;
}
#blogramp-fb [on="tap:blogramp-fb.close"] {
position: absolute;
top: 10px;
right: 10px;
z-index: 9;
}
.blogramp-fb-wrap {
display: table;
max-width: 320px;
width: 100%;
height:100%;
margin:0 auto;
}
.blogramp-fb-inner {
display: table-cell;
text-align: center;
vertical-align: middle;
}
Adjust the Facebook Messenger button placement at highlighted green.
Click Save Theme, refresh your blog pages & test it out
Final results, a Facebook Messenger icon is displayed in your blog pages (refer image earlier) and at your Facebook Page Messenger app, all messages sent from his widget will be displayed here -- refer screen capture below.
In the future, we may release this AMP integrated Facebook Messenger Live Chatbox Blogger widget one-click auto installer at this blog.
For the time being, users can simply add in manually these markups as on Blogr-AMP themes all designated locations have been clearly identified to ease users customization.
If you need assistance, reach us here, or leave your comments below.
Facebook Resources Tutorial V2 Widgets
Topics You Might Be Interested...
Pop Up Follow/Subscribe by Email Widget for AMP HTML Blogger Themes #WidgetsPop Up Follow/Subscribe by Email Widget for AMP HTML Blogger Themes
Blogr-AMP for Facebook Comments#WidgetsBlogr-AMP for Facebook Comments
#WidgetsBlogr-AMP (V2) Enabling & Arranging Disqus, Google+ & Facebook Comments
#WidgetsAdd Facebook Live Messenger Chatbox Placeholder for Blogger Theme with AMP HTML
#WidgetsDisplay Instagram Feed & Followers for AMP HTML Blogger Themes
Disqus Comments
Facebook Comments
Code Parser
Article Archive
201810
APRIL2
MARCH5
FEBRUARY2
Facebook Messenger Live Chatbox for AMP HTML Blogg...
Blogger Blog RSS/Atom Feed Issues Use AMP HTML wit...
JANUARY1
201735
NOVEMBER3
OCTOBER3
SEPTEMBER2
JUNE1
MAY1
MARCH4
FEBRUARY15
JANUARY6
201612
DECEMBER2
NOVEMBER9
OCTOBER1
Popular Posts
Getting Started — Create Your 1st AMP Blogger Blog Pages
Getting Started — Create Your 1st AMP Blogger Blog Pages
This post is a good reference & guide on how to integrate Blogger templates & use Accelerated Mobile Pages (AMP HTML) fundamentals w...
Blogr-AMP (V2) Display Icons with Font Awesome
Blogr-AMP (V2) Display Icons with Font Awesome
Over 500 Font Awesome icons is included with Blogr-AMP Blogger template with Accelerated Mobile Pages HTML hosted by MaxCDN -- Content Deli...
Facebook Messenger Live Chatbox for AMP HTML Blogger Themes.
Facebook Messenger Live Chatbox for AMP HTML Blogger Themes.
We've received many requests by Blogger platform users to integrated social media plugins, due to high demand & visitors traffic com...
No comments