Add Facebook Messenger Popup Button In Blogger

Blogger Facebook Messenger Page Attachment - In this post I will share with you the tips about the Facebook messenger page add-on to blog sites. Almost all blog sites have a Facebook page. Now let's try to integrate the Facebook messenger page plugin into your blog site using a few different techniques to interact more closely with your Facebook page and blog site.

How to Add Facebook Messenger Page Attachment to Blog Site?

The widget running in the bottom right corner of the screen is displayed in the center of the screen. Log in to your Blogger account to add the Facebook messenger plugin to your blog. Open the template codes page of your blog by following the theme> Edit HTML in your blog's control panel and follow the steps below. 

1- Add the following CSS </head>code on a line of code found in your blog . On the Template codes page you can find the codes you are looking for using CTRL + F.

<style>
#fb-modal iframe{border:0;margin-bottom:-5px}
.overlay{position:fixed;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,.6);overflow:hidden;transition:opacity .2s;display:none;z-index:100000}
.overlay .cancel{position:absolute;width:100%;height:100%;cursor:default}
.modal{margin:-165px 0 0 -150px;top:50%;left:50%;padding:0;width:300px;height:330px;box-shadow:0 0 50px rgba(0,0,0,.6);position:absolute;text-align:center;-webkit-animation-name:slideInUp;animation-name:slideInUp;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.open_plugin{position:fixed;bottom:0;right:0;cursor:pointer;}
.open_plugin:hover .fb-close{display:block;}
.fb-close{position:absolute;top:-60px;right:5px;z-index:1070;display:none;width:276px;padding:5px 10px;font-size:13px;font-style:normal;font-weight:400;line-height:1.42857143;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;word-wrap:normal;white-space:normal;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.3);border-radius:6px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,.3);box-shadow:0 5px 10px rgba(0,0,0,.3);line-break:auto;}
.fb-close p{margin:0;padding:0}
.fb-close:before{bottom:-19px;right:10px;content:" ";border-top-color:#fff!important;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-width:0;border-width:10px;position:absolute;width:0;height:0;border-color:transparent;
border-style:solid;z-index:2}
.fb-close:after{bottom:-20px;right:10px;content:" ";border-top-color:#888!important;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-width:0;border-width:10px;position:absolute;width:0;height:0;border-color:transparent;
border-style:solid;z-index:1}
@-webkit-keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}100%{-webkit-transform:translateY(0);transform:translateY(0)}}
@keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}100%{-webkit-transform:translateY(0);transform:translateY(0)}}
</style>

2- Add the following codes on </body>a line of code found in your blog .

<div onclick="showDiv()" class="open_plugin">
<svg style="width:45px;height:45px" viewBox="0 0 24 24">
<path fill="#007fff" d="M12,2C6.5,2 2,6.14 2,11.25C2,14.13 3.42,16.7 5.65,18.4L5.71,22L9.16,20.12L9.13,20.11C10.04,20.36 11,20.5 12,20.5C17.5,20.5 22,16.36 22,11.25C22,6.14 17.5,2 12,2M13.03,14.41L10.54,11.78L5.5,14.41L10.88,8.78L13.46,11.25L18.31,8.78L13.03,14.41Z" />
</svg>
<div class="fb-close">
<p>Hello, How can i Help You Send Me Msg for More Detail and Get Help.</p>
</div>
</div>
<div id="fb-modal" class="overlay">
<a class="cancel" href="javascript:void(0)" onclick="hideDiv()"></a>
<div class="modal">
<iframe src="https://rawgit.com/Bloggeritunes/amp/master/fbpage_plugin.html?page=lifechangetip" frameborder="0" scrolling="no" width="300" height="330">
</iframe>
</div>
</div>
<script>
function showDiv() {document.getElementById('fb-modal').style.display = "block";}
function hideDiv() {document.getElementById('fb-modal').style.display = "none";}
</script>

Replace the lifechangetip place marked in the above code with the Username of your Facebook page. 

Preview Image