How to Embed Facebook Message Buttons in your Website

Email has always been the preferred mode for reaching out to people on the Internet. Websites would put their email addresses on web pages and made them clickable hyperlinks using the mailto protocol. Things have changed and while email is still considered important, the new generation is known to prefer instant texting apps like Facebook Messenger over email. For them, writing an email is as boring as creating a résumé.

This step-by-step guide explains the various techniques that you can use to easily embed the Facebook Messenger button in your website. When someone clicks the Message Me button, it will directly launch the Facebook Messenger app on their mobile phone or the messenger.com website if they are on the desktop. You can choose to receive messages in your Facebook profile or your Facebook page, if you have one.

The default Facebook Messenger button is rendered using JavaScript but you can also write them in pure HTML without requiring JavaScript. The advantage is that these buttons (see demo) would show up even if the user has enabled ad blockers and second, you can embed message links inside email newsletters.

Facebook Messenger

All you have to do is replace “XYZ” in the snippet below with your Facebook vanity username. If you don’t have a username yet, you can use your numerical Facebook profile ID instead. The link may be customized with CSS to resemble a button as seen in this live demo.

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

Tip: If you are not seeing messages sent to your Facebook profile, it is because Facebook automatically hides messages from people that are not in your contacts / friends list. Go to facebook.com/messages, click the “More” dropdown and choose “Filtered” to see all messages that are not in your main inbox.

B: Facebook Messenger Button

This is the default Facebook Messenger button (see live demo) rendered with JavaScript. Unlike the previous option that allows messaging to personal profile as well, this button is only available to Facebook Page owners for them to receive messages from other Facebook users.

To get started, copy-paste the following snippet in your blog template but remember to replace “XYZ” with the numeric ID of you Facebook Page. You can set the color as white for a blue text on white background button.

<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 = "//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>

Tip: If you are unable to use the Facebook Messenger button, it is likely that your Facebook Page is configured to not receive messages. Go to your Facebook Page settings, choose General, Messages and turn on the option that says “Allow people to contact my Page privately by showing the Message button”.

C: Facebook Messenger Box

You have seen the Facebook Like box embedded in websites but did you know that the same box can also include an inline form allowing any Facebook user to contact you without even leaving your webpage. Here’s a live demo.

In this case you need to replace “XYZ” in the snippet below with the vanity username or ID of your Facebook Page. Anyone who is logged into Facebook can message you from your website itself, similar to regular contact us forms.

<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 = "//connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
    </script>

    <div class="fb-page"
         data-href="https://www.facebook.com/XZY/"
         data-tabs="messages"
         data-width="400"
         data-height="300"
         data-small-header="true">
      <div class="fb-xfbml-parse-ignore">
        <blockquote></blockquote>
      </div>
    </div>

You should also check the Facebook Page Plugin to learn about all the other configuration options that can be easily set using the data attributes.

Related: How to Embed Facebook Posts in Webpages

Amit Agarwal

Amit Agarwal

Google Developer Expert, Google Cloud Champion

Amit Agarwal is a Google Developer Expert in Google Workspace and Google Apps Script. He holds an engineering degree in Computer Science (I.I.T.) and is the first professional blogger in India.

Amit has developed several popular Google add-ons including Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory

0

Awards & Titles

Digital Inspiration has won several awards since it's launch in 2004.

Google Developer Expert

Google Developer Expert

Google awarded us the Google Developer Expert award recogizing our work in Google Workspace.

ProductHunt Golden Kitty

ProductHunt Golden Kitty

Our Gmail tool won the Lifehack of the Year award at ProductHunt Golden Kitty Awards in 2017.

Microsoft MVP Alumni

Microsoft MVP Alumni

Microsoft awarded us the Most Valuable Professional (MVP) title for 5 years in a row.

Google Cloud Champion

Google Cloud Champion

Google awarded us the Champion Innovator title recognizing our technical skill and expertise.

Email Newsletter

Sign up for our email newsletter to stay up to date.

We will never send any spam emails. Promise.