How to Add a Facebook Messenger Button on WordPress website


A Simple Guide for Add an Official Facebook Messenger Button on WordPress website

How to Add a Facebook Messenger Button on WordPress website

Recently Facebook Launches a Messenger Web version you can Access the Facebook Messenger on your PC and Laptops by using this link https://www.messenger.com/ just use your Facebook Password and Username for Login Messenger PC version also they provide a Custom Messenger Chatting Link for Pages and Profiles.

How to Get My Facebook Messenger Link?

Here is the http://m.me/ Short URL for Messenger Just add your Page or Profile username in that Link check the below Example

Our Allwebtuts Facebook Page link is https://www.facebook.com/allwebtuts My Messenger link is http://m.me/allwebtuts just add your Page username in that link if your page does not have the username means use your PAGE ID (http://m.me/allwebtuts/519144624910418) you can Get it From you page About section.Same Procedure for our profile also.

Facebook Messenger Button

Advantages

  • Provide 24X7 Support
  • Your visitors can easily contact you through your website

 View Demo

Method 1

Facebook Like Box + Messenger

Facebook Messenger Button

  • Log into to your WordPress website
  • Go to Appearance > Widgets > Choose Text Box

Facebook Messenger Button

  • Paste the Below Facebook Messenger Widget in Textbox and save it

 

<script>
 window.fbAsyncInit = function() {
 FB.init({
 appId : 'YOUR APP ID',
 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="YOUR PAGE URL" 
 data-tabs="messages" 
 data-width="400" 
 data-height="300" 
 data-small-header="true">
 <div class="fb-xfbml-parse-ignore">
 <blockquote></blockquote>
 </div>
 </div>
  • Replace YOUR APP ID your Facebook Application ID
  • Replace YOUR PAGE URL with your Page URL
  • Adjust the Width and Height by editing the data-width and data-height.

Method 2

Messenger Button

Facebook Messenger Button

  • Installation Process Same as Above Method
  • Paste the below Widget code in the Text Box
<script>
 window.fbAsyncInit = function() {
 FB.init({
 appId : 'YOUR APP ID',
 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="YOUR PAGE ID or PROFILE ID"
 page_id="519144624910418"
 color="blue"
 size="large">
 </div>
  • Replace YOUR APP ID with your Facebook Application ID
  • Replace YOUR PAGE ID OR PROFILE ID with your page id or profile id

Learn How to create a Facebook application for your website

Method 3

Custom Facebook Messenger Button

Facebook Messenger Button

Custom Facebook Messenger Widget Button without Facebook SDK

  • Installation Same as Above Methods
  • Paste the Below Custom Facebook Messenger Widget Button code on the Textbox
<style>
.button {color:white!important; font-family:open sans; margin:10px 10px 10px 0;text-decoration:none!important; font-weight:700;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-oborder-radius:5px; transition:all .4s;-webkit-transition:all .4s;-moz-transition:all .4s;-ms-transition:all .4s;-o-transition:all .4s;}
.blue {background: #3498db;border-bottom: 3px solid #226693;}
.blue:hover {background:#2980b9;}
.small {font-size:12px; padding:8px 10px;}
</style>


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">


<a class="button blue small" href="YOUR  Messenger URL" target="_blank"><i class="fa fa-envelope-o" aria-hidden="true"></i> Message us on Facebook</a>
  • Replace YOUR Messenger URL with your Messenger URL

Learn How to add Custom CSS in WordPress website

How to Find My Facebook Page ID

  • Open your Page page
  • Go to About > Page INFO and check the Last Line on the Page Check the Below image

Facebook Messenger Button

Credits

Thanks to Amit Agarwal (labnol.org) For this Awesome Facebook Messenger Widgets

From the Editor’s Desk

If you Want to Display this Widget in your Below Post Title or Below Post widget Means Install our WordPress Plugin MY HTML POST WIDGETS.

If you need Any help Regarding this Topic Please Feel Free to Comment, Here I will Help you.

 



Was this article helpful?
Thanks!

Your feedback helps us improve Allwebtuts.com