How'd They Do That? Embed Facebook Messenger

Navigate to your Post You can get the embed code directly from the post itself. If the post is public, click on the icon that appears in the top right corner of the post on Facebook. Choose Embed Post from the drop down menu. Facebook is midway through a program to integrate WhatsApp’s underlying platform with those of Messenger and Instagram. The idea is to create a vast, interoperable messaging giant that brings. Facebook has announced new tools for Facebook Messenger so that individuals find it easier to complain against cyber harassment. These tools will be rolled out for both iOS and Android, with these, users can report conversations containing violence, sexual abuse or nudity and possible terrorism. How to Report Harassment on Facebook Messenger Facebook Shuts Over 583.

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.

How to embed facebook messenger in your website

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

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

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

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

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

How

Items to Note:

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

Full Code

HTML

CSS

DEMO
Message us on Facebook

How

Full Code (with Bonus Step – Rounded Corners)

HTML

CSS

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

How'd They Do That Embed Facebook Messenger App

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.

How'd They Do That Embed Facebook Messenger Web

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

How'd They Do That Embed Facebook Messenger Messages

Embed

How To Embed Facebook Messenger In Your Website

Troubleshooting

How'd They Do That Embed Facebook Messenger Conversations

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.