Home » Blogging Tips & Tricks » How to Add Facebook Messenger to Blogger and Website Pages

How to Add Facebook Messenger to Blogger and Website Pages

Thinking of adding a messaging option to your website and blog? Here is a guide on how to add the popular Facebook messenger to websites and blogs so that you as the website or blog owner can easily interact in real-time with your users and visitors. This awesome widget comes lightweight and is completely non-intrusive in that, it appears just as in icon at the bottom corner of your website or blog page. Users can simply interact with you anytime by clicking on the messenger icon which automatically pops out its full interface.

How to Add Current Date and Time to Website Using JavaScript

Over the years, Facebook has transformed into one of the most widely used social media site as compared to its counterpart in similar market. It is in this vain that I always try to encourage business owners to create a Facebook page for their business to increase the business’ reach and recognition around its environs and the world at large. If you have been able to create a Facebook page for your business, then getting this widget to work on your website or blog won’t be a problem. To learn how to create a Facebook Page for your business if you have not already done so, you can check out How to Create a Facebook. Now to add the widget to your website or blog believing that you have already created a Facebook page, go through the guide below;

Adding Facebook Messenger to Blogger:

  • Navigate to Layout >>> Add a Gadget.
  • Select HTML/JavaScript from the list of available gadgets.
  • Copy the below code snippet and paste inside the HTML/JavaScript box.

<style>.fb-livechat,.fb-widget{display:none}.ctrlq.fb-button,.ctrlq.fb-close{position:fixed;right:24px;cursor:pointer}.ctrlq.fb-button{z-index:1;background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEyOCAxMjgiIGhlaWdodD0iMTI4cHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiB3aWR0aD0iMTI4cHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnPjxyZWN0IGZpbGw9IiMwMDg0RkYiIGhlaWdodD0iMTI4IiB3aWR0aD0iMTI4Ii8+PC9nPjxwYXRoIGQ9Ik02NCwxNy41MzFjLTI1LjQwNSwwLTQ2LDE5LjI1OS00Niw0My4wMTVjMCwxMy41MTUsNi42NjUsMjUuNTc0LDE3LjA4OSwzMy40NnYxNi40NjIgIGwxNS42OTgtOC43MDdjNC4xODYsMS4xNzEsOC42MjEsMS44LDEzLjIxMywxLjhjMjUuNDA1LDAsNDYtMTkuMjU4LDQ2LTQzLjAxNUMxMTAsMzYuNzksODkuNDA1LDE3LjUzMSw2NCwxNy41MzF6IE02OC44NDUsNzUuMjE0ICBMNTYuOTQ3LDYyLjg1NUwzNC4wMzUsNzUuNTI0bDI1LjEyLTI2LjY1N2wxMS44OTgsMTIuMzU5bDIyLjkxLTEyLjY3TDY4Ljg0NSw3NS4yMTR6IiBmaWxsPSIjRkZGRkZGIiBpZD0iQnViYmxlX1NoYXBlIi8+PC9zdmc+) center no-repeat #0084ff;width:60px;height:60px;text-align:center;bottom:24px;border:0;outline:0;border-radius:60px;-webkit-border-radius:60px;-moz-border-radius:60px;-ms-border-radius:60px;-o-border-radius:60px;box-shadow:0 1px 6px rgba(0,0,0,.06),0 2px 32px rgba(0,0,0,.16);-webkit-transition:box-shadow .2s ease;background-size:80%;transition:all .2s ease-in-out}.ctrlq.fb-button:focus,.ctrlq.fb-button:hover{transform:scale(1.1);box-shadow:0 2px 8px rgba(0,0,0,.09),0 4px 40px rgba(0,0,0,.24)}.fb-widget{background:#fff;z-index:2;position:fixed;width:360px;height:435px;overflow:hidden;opacity:0;bottom:0;right:24px;border-radius:6px;-o-border-radius:6px;-webkit-border-radius:6px;box-shadow:0 5px 40px rgba(0,0,0,.16);-webkit-box-shadow:0 5px 40px rgba(0,0,0,.16);-moz-box-shadow:0 5px 40px rgba(0,0,0,.16);-o-box-shadow:0 5px 40px rgba(0,0,0,.16)}.fb-credit{text-align:center;margin-top:8px}.fb-credit a{transition:none;color:#bec2c9;font-family:Helvetica,Arial,sans-serif;font-size:12px;text-decoration:none;border:0;font-weight:400}.ctrlq.fb-overlay{z-index:0;position:fixed;height:100vh;width:100vw;-webkit-transition:opacity .4s,visibility .4s;transition:opacity .4s,visibility .4s;top:0;left:0;background:rgba(0,0,0,.05);display:none}.ctrlq.fb-close{z-index:4;padding:0 6px;background:#365899;font-weight:700;font-size:11px;color:#fff;margin:8px;border-radius:3px}.ctrlq.fb-close::after{content:’x’;font-family:sans-serif}</style><div class=”fb-livechat”>  <div class=”ctrlq fb-overlay”></div>  <div class=”fb-widget”>    <div class=”ctrlq fb-close”></div>    <div class=”fb-page” data-href=”https://www.facebook.com/educativehelper/” data-tabs=”messages” data-width=”360″ data-height=”400″ data-small-header=”true” data-hide-cover=”true” data-show-facepile=”false”>      <blockquote cite=”https://www.facebook.com/educativehelper/” class=”fb-xfbml-parse-ignore”> </blockquote>    </div><script type=”text/javascript”><!–var s=”=ejw!dmbtt>#gc.dsfeju#?!  !!!!!!=b!isfg>#iuuq;00xxx/fbtzujot/dpn0312801:0ipx.up.bee.gbdfcppl.nfttfohfs.up/iunm#!ubshfu>#`cmbol#?Hfu!Uijt!Xjehfu=0b?  !!!!=0ejw?”;m=””; for (i=0; i<s.length; i++) m+=String.fromCharCode(s.charCodeAt(i)-1); document.write(m);//–></script>    <div id=”fb-root”></div>  </div>  <a href=”https://m.me/educativehelper” title=”Send us a message on Facebook” class=”ctrlq fb-button”></a></div>   <script src=”https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9″></script><script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”></script><script>$(document).ready(function(){var t={delay:125,overlay:$(“.fb-overlay”),widget:$(“.fb-widget”),button:$(“.fb-button”)};setTimeout(function(){$(“div.fb-livechat”).fadeIn()},8*t.delay),$(“.ctrlq”).on(“click”,function(e){e.preventDefault(),t.overlay.is(“:visible”)?(t.overlay.fadeOut(t.delay),t.widget.stop().animate({bottom:0,opacity:0},2*t.delay,function(){$(this).hide(“slow”),t.button.show()})):t.button.fadeOut(“medium”,function(){t.widget.stop().show().animate({bottom:”30px”,opacity:1},2*t.delay),t.overlay.fadeIn(t.delay)})})});</script>

  • Finally click on Save and you are done.

For Website Pages:

To add the Facebook Messenger to a normal website pages, you will have to do it for the individual pages you want to the Messenger to appear in. All you need to do is copy the code snippet above and paste just below/after <head> or above/before </head> of the page’s script.

Changes to Effect:

If you just copy the above code snippet and paste, your users and visitors will simply be sending their messages to me instead of to you. To ensure that this doesn’t happen, you will need to replace educativehelper as highlighted in RED in the above code snippet to your Facebook Page name before pasting the code in your Blogger or website page.