WebPro Education

Tech tips everyday
Menu
  • REVIEWS
  • HOW TO
  • TECH NEWS
  • About Us
Home
how to
How To Add a Facebook Messenger Button To Your Website
how to

How To Add a Facebook Messenger Button To Your Website

Chris Muniu April 25, 2017

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.

facebook messenger button

              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.

 

Share
Tweet
Linkedin
Reddit
Tumblr
Stumble
Whatsapp
Telegram
Email
Prev Article
Next Article

Related Articles

How To See Wi-Fi Password On Samsung Galaxy A05

How To See Wi-Fi Password On Samsung Galaxy A05

How To Close Background Apps On Apple Watch In WatchOS 10

How To Close Background Apps On Apple Watch In WatchOS 10

  • How To Share Reels To Instagram Story
  • How To See ALL Follow Requests On Instagram
  • How To Tag (Mention) Someone In Instagram Story After Posting
  • How To Delete CapCut Project
  • How To Change Roaming Clock Region & Time Zone On Samsung Galaxy A36/A26/A56
DMCA.com Protection Status

Associates Disclosure

WebPro Education is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to amazon.com.

WebPro Education

Tech tips everyday
Copyright © 2025 WebPro Education

Ad Blocker Detected

Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by disabling your ad blocker.

Refresh