Insert Facebook message buttons on your website

facebook message button embed : Email has always been the preferred way to reach people on the Internet. The websites would put their e-mail addresses on web pages and make them hyperlinks by clicking the mailto protocol. Things have changed and while e-mail is still thought of as important, the next generation is known for instant messaging applications like Facebook messenger via email. For them, writing an email is as boring as creating a resume.

Also Check : How to mention / tag all friends on Facebook Comments at once 2017 (Working Tricks)

This step-by-step guide explains the various techniques you will only use to simply embed the Facebook messaging button on your website. Once someone clicks the Me message button, they will directly launch the Facebook messaging application on their mobile phone or the messenger.com website if they are on the desktop. You will choose to receive messages on your Facebook profile or on your Facebook page, if you have one.

Insert Facebook message buttons on your website

Insert Facebook message buttons on your website

 

1. Simple Facebook Messenger Link

The default Facebook Messenger button is processed using JavaScript, but it will also be written in pure HTML without JavaScript. The advantage is that these buttons would appear even though the user has enabled the ad blockers and, secondly, they will insert message links into e-mail newsletters.

All you have to do is replace “XYZ” within the next snippet along with your Facebook username. If you do not yet have a username, you will use your Facebook profile numeric ID. The link is also customized with CSS to look like a button as seen during this live demo.

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

Tip: If you do not see the messages sent to your Facebook profile, it is as if Facebook automatically hides messages from people who do not appear to be on your contacts / friends list. Go to facebook.com/messages, click the “More” drop-down menu and choose “Filtering” to check all messages that are not in your main inbox.

2. Facebook Messenger Button

This is the default Facebook messenger rendered button with JavaScript. Not like the previous option that allows messaging to your personal profile, well, this button is simply available to Facebook page owners so they can receive messages from different Facebook users.

To get started, copy and paste the following snippet into your blog template, however note to replace “XYZ” with the numeric ID of your Facebook Page. You will set the color as white for a blue text on the 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 can not use the Facebook Messenger button, it is likely that your Facebook Page is configured to not receive messages. Visit the Facebook page settings, select General, Messages and activate the option that says “Allow people to contact my page privately by displaying the Message button”.

3. Facebook Messenger Box

You have seen the Facebook box as embedded in websites but you recognized that the same box can also include an inline form that allows any Facebook user to contact you while not even leaving your webpage.

In this case, you must replace “XYZ” inside the following fragment with the username or ID of your Facebook page. Anyone who is connected to Facebook will send you a message from your own website, similar to regular contact forms with us.

<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 Plugin for information on all other configuration options that can be easily configured using data attributes.

LEAVE A REPLY

Please enter your comment!
Please enter your name here