How To Add Facebook Messenger To WordPress Site

add facebook messenger

Facebook is one of the most common social platforms and nowadays almost everything can be done on this platform. This makes communication much easier and convenient. If you add a messenger button on your website your audience will be able to contact you via live call/chat for any sort of pre-sale questions, inquiries, sales support, etc. 

If you don’t know how to add Facebook Messenger to WordPress site then you are in the right place. From this post, you will be able to learn to add Facebook messenger button to your WordPress site. At here I will show you to add Facebook messenger button using a plugin and without using a plugin. 

Let’s begin then. 

Add Messenger Using Plugin

If you don’t want any sort of trouble then using a plugin is very helpful. There are several plugins available in the WordPress plugins repository, but ‘The official Facebook chat plugin’ is best. This is a free plugin that is developed by the official Facebook developers for placing the responsive messenger in few clicks. 

To add Facebook messenger, first you have to install and activate the plugin. 

From the dashboard, navigate to Customer chat and click on ‘Setup Chat Plugin’.

A new window will appear to ask you to select the Facebook page on which you want to select the messenger button. (If you are not logged in to your Facebook, then you have to log in to your Facebook id first).

Select the page and click on the ‘Continue’ button. It will direct you to the language page from where you can change the language and greeting text. When you are done click on the ‘Next’ button.

Now appearance page will appear from where you will be able to choose the color for your messenger button that matches your overall site design. 

After choosing the color don’t forget to click on the ‘Finish’ button. A code snippet containing the codes will be automatically added on ‘The official Facebook Chat plugin’. 

Now visit your WordPress site to look for your messenger button. In this way you can add Facebook messenger to your WordPress site.

Add Messenger Using Codes

If you do not entrust any plugin and have coding knowledge then this is the best way. 

At first, you have to enter your domain name on Facebook’s Whitelist Domain. To do this enter your Facebook profile and navigate to Page Settings -> Messenger Platform -> Customer Chat

Now enter your domain name here. 

Go to Appearance ->Theme Editor. Now copy the following code and paste on each page where you want to display the messenger button.

<!-- Load Facebook SDK for JavaScript -->
     <div id="fb-root"></div>
     <script>
       window.fbAsyncInit = function() {
         FB.init({
           xfbml            : true,
           version          : 'v4.0'
         });
       };

       (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 = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js';
       fjs.parentNode.insertBefore(js, fjs);
     }(document, 'script', 'facebook-jssdk'));</script>

     <!-- Your customer chat code -->
     <div class="fb-customerchat"
       attribution=setup_tool
       page_id="104226807612999">
     </div>

. I have done it on the footer bar. 

After you are done, don’t forget to save the file. Now visit your site you will find the new messenger button on the right footer. 

Last Words

Which procedure do you consider easy to add Facebook messenger on your site? Whichever method you choose, both are safe and easy to implement. If you liked the post share it with your friends and don’t forget to write your thought in the comment box below. 

Leave a Comment

Your email address will not be published. Required fields are marked *

Copy link
Powered by Social Snap