How to Connect(Embed) Facebook Message Buttons and Whatsapp Button in your Website / Blogger

You can embed the Facebook Messenger button or Whatsapp Button  in your website and receive messages from anyone who has a Facebook account. People can message your Facebook page or your personal profile.

This step-by-step guide explains the various techniques that you can use to easily embed the Facebook Messenger button or Whatsapp Button in your website. When someone clicks the Message Me button, it will directly launch the Facebook Messenger app  or Whatsapp App in on their Smart 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.

Only Three Step By Step  facebook button or Whatsapp Messenger Link Your website or Blogger.

Step:1 Simple Tricks for 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  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 “ABC” 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.

1. <a href="https://m.me/ABC">
2. Message us on Facebook
3. </a>

Best Tip for you: 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” drop down and choose “Filtered” to see all messages that are not in your main inbox.

Step:2 Facebook Messenger Button add in your Website or Blogger

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 “ABC” with the numeric ID of you Facebook Page. You can set the color as white for a blue text on white background button.

1. <script>
2. window.fbAsyncInit = function() {
3. FB.init({
4. appId : '95100348886',
5. xfbml : true,
6. version : 'v2.6'
7. });
8. };
9.  
10. (function(d, s, id){
11. var js, fjs = d.getElementsByTagName(s)[0];
12. if (d.getElementById(id)) {return;}
13. js = d.createElement(s); js.id = id;
14. js.src = "//connect.facebook.net/en_US/sdk.js";
15. fjs.parentNode.insertBefore(js, fjs);
16. }(document, 'script', 'facebook-jssdk'));
17. </script>
18.  
19. <div class="fb-messengermessageus"
20. messenger_app_id="95100348886"
21. page_id="XYZ"
22. color="blue"
23. size="large">
24. </div>

Best Tip For you: 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”.

Step :3 Facebook Messenger Box add in your website or Blogger

You have seen the Facebook Like box embedded 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 alive demo.

In this case you need to replace “ABC” 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.

1. <script>
2. window.fbAsyncInit = function() {
3. FB.init({
4. appId : '95100348886',
5. xfbml : true,
6. version : 'v2.6'
7. });
8. };
9.  
10. (function(d, s, id){
11. var js, fjs = d.getElementsByTagName(s)[0];
12. if (d.getElementById(id)) {return;}
13. js = d.createElement(s); js.id = id;
14. js.src = "//connect.facebook.net/en_US/sdk.js";
15. fjs.parentNode.insertBefore(js, fjs);
16. }(document, 'script', 'facebook-jssdk'));
17. </script>
18.  
19. <div class="fb-page"
20. data-href="https://www.facebook.com/XZY/"
21. data-tabs="messages"
22. data-width="400"
23. data-height="300"
24. data-small-header="true">
25. <div class="fb-xfbml-parse-ignore">
26. <blockquote></blockquote>
27. </div>
28. </div>

How to ADD Whatsapp Button in your Website-Blogger