How To Embed Facebook Message Buttons In Your Website

 Email has 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 preferinstant 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.

A: SIMPLE FACEBOOK MESSENGER LINK

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.

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 boxembedded 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.

Share this: