Using Facebook Messenger On Your Website

I may be one of the few people that have a big challenge with email. Most people put their email addresses on their web pages and make a clickable hyperlink using the mailto protocol to assist website visitors with making contact with their business. Things are changing fast, and while email is still considered important, the instant gratification generation is well-known to prefer instant texting messaging solutions like Facebook Messenger over email.

I want to share a few solutions that you can use to easily embed the Facebook Messenger button in your website. If someone clicks the Message Me button, it will directly launch the Facebook Messenger application on their mobile phone or the messenger.com website if they are on the desktop computer. You can choose to receive messages on your Facebook Business Page or your personal Facebook page. For businesses, we highly recommend you direct people to your business page, and we suggest you also download the "Pages" app for your smartphone device to ensure you don't miss messages.

Solution 1 : Facebook Messenger Link

The Facebook Messenger button is rendered on your website using technology called JavaScript, but you can also incorporate a solution using HTML without requiring JavaScript. The advantage of using HTML is that the button will show up even if the user enables ad blockers. Also, as an added benefit you can embed the message link inside email newsletters or any place you can provide HTML text.

The Released Solution

All you have to do is replace “YourBusinessNameHere” in the snippet example code below with your Facebook vanity username or business name. If you don’t have a username yet, you can use your numerical Facebook profile ID instead.

Html Section
[code language="html"] <a href="https://m.me/YourBusinessNameHere">
Message us on Facebook
</a>
[/code]

Solution 2 : Facebook Messenger Button

Above I mentioned that using JavaScript was an additional solution you may consider for implementing the Facebook Messenger button into your website. Unlike the previous solution 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.

The Released Solution

Begin by copy-pasting the following snippet in your website but remember to replace “your business pageID” with the numeric ID of your Facebook Page.

JavaScript Section
[code lang="js"] <script>
window.fbAsyncInit = function() {
FB.init({
appId : '255764971238848',
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>
[/code]

HTML Section
[code lang="html"] <div class="fb-messengermessageus"
messenger_app_id="255764971238848"
page_id="your business pageID"
color="blue"
size="large">
</div>
[/code]

TIP: Need help finding your Facebook pageID? Try using this easy to use tool: http://findmyfbid.com/

TIP for WordPress Users: The best approach to adding JavaScript snippet code into your website is to add a plugin called XYZ Html: https://wordpress.org/plugins/insert-html-snippet/

Solution 3 : Facebook Messenger Box

By now, you more than likely have seen the famous Facebook Like box on several websites. Did you know that you can also include an inline form, on your website, allowing any Facebook user to contact you without even leaving your webpage?

The Released Solution

This is another JavaScript example. Copy and paste the code below. You need to replace “YourBusinessNameHere” 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.

JavaScript Section
[code lang="js"]

window.fbAsyncInit = function() {
FB.init({
appId : '255764971238848',
xfbml : true,
version : 'v2.6'
});
};

[/code]

Html Section
[code lang="html"]

[/code]