How to Add Facebook Messenger to Blogger, WordPress and Website Pages


Thinking of adding a messaging option to your Blogger, WordPress or any website page?  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.

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="" data-tabs="messages" data-width="360" data-height="400" data-small-header="true" data-hide-cover="true" data-show-facepile="false">
          <blockquote cite="" class="fb-xfbml-parse-ignore"> </blockquote>
        <div id="fb-root"></div>
      <a href="" title="Send us a message on Facebook" class="ctrlq fb-button"></a>
    <script src=""></script>
    <script src=""></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(),":visible")?(t.overlay.fadeOut(t.delay),t.widget.stop().animate({bottom:0,opacity:0},2*t.delay,function(){$(this).hide("slow"),})):t.button.fadeOut("medium",function(){t.widget.stop().show().animate({bottom:"30px",opacity:1},2*t.delay),t.overlay.fadeIn(t.delay)})})});</script>

For WordPress:

The Facebook Messenger can be added to WordPress in two ways;

  1. By pasting the above code just below/after the <head> tag or above/before the </head> tag in the theme’s header section.
  2. By adding the code as a widget in the widget section of your WordPress Dashboard.

I prefer the second method since it is easier for those of us that are not good with codes. So here is how to add the Facebook Messenger to WordPress by adding it as a widget.

  • On your WordPress Dashboard, move to Appearance >>> Widgets

login with wordpress

  • Locate and click on the drop down arrow next to Custom HTML.

login with wordpress1

  • Select any option (preferably the first) and click on Add Widget.

login with wordpress2

  • Copy the code snippet provided above and paste into the box provided.
  • Finally click on Save then on Done and you are done.

login with wordpress4

For Website Pages:

To add the Facebook Messenger to any website page of choice, 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 CAPITAL LETTERS in the above code snippet to your Facebook Page name before applying the code in your Blogger, WordPress or website page.


Please enter your comment!
Please enter your name here