Facebook Messenger is a free messaging service that lets Facebook users chat with friends both on mobile as well as on the main website. Facebook is an extremely valuable tool to utilize along with your website to not only maintain your current users/clients but to also gain new potential ones. With Facebook reporting that Messenger has reached 1 billion monthly active users, integrating a Messenger button on your website to allow direct contact naturally makes sense. In this tutorial we are going to teach you how to embed a Facebook Messenger button onto your website and then customize it with CSS.

Step 1: Embed the FB Messenger Button

In the first step of this tutorial we will need to embed the actual Facebook Messenger button onto your website. There are currently 3 methods for embedding the Facebook Messenger button, but there is only one method that will allow you to customize the button which is to embed it as a hyperlink.

HTML

<a href="https://m.me/your-profile-username" target="_blank">Message us on Facebook</a>

Items to Note:

  • Make sure that you change ‘your-profile-username’ to your actual Facebook profile/page username.
  • You can change what your button says by changing ‘Message us on Facebook’ to anything you want.
  • To enable messaging on your Facebook page, go to your ‘Page Settings’. In the ‘General’ tab in the ‘Messages’ section, when you click edit, “Allow people to contact my Page privately by showing the Message button” should be checked.
  • Clicking on the link will take you to the Facebook Messenger interface in order to send a message; we added the link target attribute to open in a new window so that your website stays open.
  • We will briefly cover the other 2 Facebook Messenger embed options at the end of this tutorial.

Step 2: Setting Up the Facebook Messenger Button CSS Class

In the second step we are going to simply add a CSS class to the Facebook Messenger button that we embedded in Step 1 which will allow us to customize it via CSS in the next step.

HTML

<a href="https://m.me/your-profile-username" class="fb-msg-btn" target="_blank">Message us on Facebook</a>

Items to Note:

  • We named our CSS class ‘fb-msg-btn’, but feel free to change this to whatever you feel necessary.

Step 3: Customizing the Facebook Messenger Button via CSS

In the third step we are going to customize the FB Messenger button by referencing the CSS class we set up in the previous step. Since this is a tutorial we will show you the most basic way to style the button and provide you with a basic platform to expand upon. Have fun and get creative with your button!

CSS

a.fb-msg-btn{
display: inline-block;
font-family: inherit;
font-size: 14px;
font-weight: bold;
color: #fff;
text-align: center;
padding: 12px 16px;
margin: 0;
background-color: #0084ff;
border: 0;
cursor: pointer;
outline: none;
}
a:hover.fb-msg-btn { 
background-color: #0268c7; 
}

Items to Note:

  • We used the ‘inline-block’ display attribute however, depending on your application you may need to use ‘block’ and/or float.
  • We used ‘font-family: inherit;’ to pick up whatever font you are using on your website, change the font family as necessary.
  • We used the Facebook blue for the background color of the button, simply change the background-color attribute to match your site if needed. Also if you change the background-color, don’t forget to change the hover background-color as well.
  • Remember this was set up as basic as possible to provide you with a base to work with, have fun with it and feel free to provide a link to your custom Facebook Messenger button in the comments.

Bonus Step: Add Pure CSS3 Rounded Corners to your Custom FB Messenger Button

In this bonus step we wanted to give you the option to add rounded corners to your custom Facebook Messenger button using pure CSS3.

CSS

a.fb-msg-btn{
border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px;
}

Items to Note:

  • You can change the size of your rounded corners by adjusting the value ‘5px’.

Full Code

HTML

<a href="https://m.me/your-profile-username" class="fb-msg-btn" target="_blank">Message us on Facebook</a>

CSS

a.fb-msg-btn{
display: inline-block;
font-family: inherit;
font-size: 14px;
font-weight: bold;
color: #fff;
text-align: center;
padding: 12px 16px;
margin: 0;
background-color: #0084ff;
border: 0;
cursor: pointer;
outline: none;
}
a:hover.fb-msg-btn { 
background-color: #0268c7; 
}

DEMO
Message us on Facebook

Full Code (with Bonus Step – Rounded Corners)

HTML

<a href="https://m.me/your-profile-username" class="fb-msg-btn" target="_blank">Message us on Facebook</a>

CSS

a.fb-msg-btn{
display: inline-block;
font-family: inherit;
font-size: 14px;
font-weight: bold;
color: #fff;
text-align: center;
padding: 12px 16px;
margin: 0;
background-color: #0084ff;
border: 0;
border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px;
cursor: pointer;
outline: none;
}
a:hover.fb-msg-btn { 
background-color: #0268c7; 
}

DEMO
Message us on Facebook

Facebook Messenger Widget Embed Methods

These two methods are strictly for embedding a Facebook Messenger widget onto your site and are extremely limited in the ability to customize.

Facebook Messenger Box Widget

You can also add a ‘Facebook Messenger Box Widget’ similar to the ‘Facebook Like Box Widget’. To generate the embed code you will need to visit the Facebook Developer website by clicking here. Adjust your settings and click ‘Get Code’ then follow the instructions.

*Please note that this method requires you to include Facebook Javascript SDK on your website.

Facebook Messenger IFrame Technique

If you do not want to add Facebook Javascript SDK to your website then you will need to utilize the IFrame method. You can find the IFrame method in the same place as the box widget above but after clicking ‘Get Code’ select the IFrame tab instead of the Javascript SDK tab.

*Please note that we strongly recommend against using this method as it is not good practice for website performance.

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.

Share This