How To Add a Facebook Messenger Button To Your Website

For a long time,  email have been the main mode of communication availed by website owners to their audience. Websites had clickable email addresses in their contacts section.  Clicking on this email address would launch your favorite email client so you can send an email to the company.

With time,  and mobile computing,  the preferred mode of communication online has gradually changed to instant messaging tools like Whatsapp and Facebook messenger.

Website owners are now including Whatsapp and Facebook messenger buttons on their websites so that the audience can send a message directly to them. In this article, I’ll be showing you how to add a Facebook message button to your blog/website.

Method 1: Use a Facebook Message Link:

With a little HTML knowledge,  you can create a html hyper link on your website that launches Facebook messenger when clicked on.

<a href=“https://m.me/XYZ“>Message us on Facebook</a>

Replace ‘XYZ’ in the url with your Facebook account or page username. Then you can change the anchor text to whatever you want.  Better still, you can download a Facebook message button and make it clickable with this link. 

Below is an example of a link and an image link that will prompt your to send a message to my Facebook page.

              Message us on Facebook

The main advantage of these, is that it has no java script. Therefore even people with Ad block will be able to see the link or image button.

Method 2: Use a Facebook Messenger Button

This Facebook button is created in Java script. Unlike the button in method 1 above,  this only allows messages to be sent to a Facebook page.

All you need to do is copy the code below and paste it where you want it to appear in your website.

<script>      
      window.fbAsyncInit = function() {
        FB.init({
          appId      : '95100348886',
          xfbml      : true,
          version    : 'v2.6'
        });
      };

      (function(d, s, id){
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement(s); js.id = id;
        js.src = "https://connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));      
    </script>

    <div class="fb-messengermessageus" 
         messenger_app_id="95100348886" 
         page_id="XYZ" 
         color="blue"
         size="large">
    </div>

Change XYZ to your Facebook page’s url.