In this comprehensive tutorial, we’ll take you through the process of adding a Facebook Messenger chat button to your WordPress website using simple HTML. This functionality allows your site visitors to initiate a chat with you or your business directly from your website.
Why add Facebook Messenger to your WordPress?
The primary motive for utilizing a link to open Facebook Messenger is to kickstart a conversation or chat with a specific contact or business on the Facebook Messenger platform. When a user clicks on the Facebook Messenger link, it either prompts the Facebook Messenger app on their device (if installed) or redirects them to the Facebook Messenger web interface when accessed from a desktop browser.
Lightweight Approach vs. Plugin Usage
Opting for plain HTML code to integrate a Facebook Messenger chat button is considered a lightweight approach when compared to using WordPress plugins. Here’s why:
Performance: HTML code directly embedded into your theme performs more efficiently than plugins because it avoids introducing additional code overhead or database queries.
Control: With HTML, you retain complete control over the button’s placement, appearance, and functionality. You can customize it to seamlessly align with your website’s design.
Loading Speed: Plugins may introduce extra HTTP requests and assets, potentially affecting your website’s loading speed. Utilizing HTML code for a Facebook Messenger button minimizes additional resource requests.
Plugins that implement Facebook Messenger chat functionality in WordPress websites can often be quite heavy and are known culprits for slowing down website loading times and overall performance, especially when they include unnecessary features and scripts. These bulky plugins can have a negative impact on your Google PageSpeed Insights score, which can, in turn, affect your website’s search engine ranking and user experience.
Opening a chat window in a new tab, while not as direct as chatting within a small window inside the website, it still offers the chat service that eventually visitor is looking for. This approach can help maintain faster page loading times and provide a smoother overall experience, which is often more crucial than keeping visitors within a framework on the website, particularly when the alternative of opening a new tab is not overly inconvenient for the user. Prioritizing website performance ensures a better user experience and can lead to higher visitor satisfaction.
Obtaining a Copyright-Free Facebook Messenger Logo Image
Before we proceed with the technical steps, it’s crucial to acquire logos that are allowed by the respective owners of the App you would like to create the link for. Facebook Messenger has a descriptive page for the accepted brand policies and logos used, where you can find the allowed logos. Here are the detailed steps to get your Messenger logo:
- Visit Messenger Brand Resource Center: To ensure you’re going to use an allowed Messenger logo, head over to Messenger Brand Resource Center (https://about.meta.com/brand/resources/messenger/messenger-brand/), the source for official resources for Messenger.
- Carefully read and make sure you comply with the policies: Ensure you comply with the policies when using it in your project.
- Download the Appropriate Facebook Messenger Logo: Explore through the available logos in the Logo pack and pick the preferred one for your case.
- Upload it to your WordPress: After selecting the ideal Facebook Messenger logo, upload it straight to your WordPress website’s Media section in the admin dashboard.
Adding the Facebook Messenger Chat Button Code to WordPress
Now that you have a copyright-free Facebook Messenger logo, it’s time to integrate it into your WordPress website by adding the necessary HTML code to your child theme’s functions.php file.
The Facebook Messenger link uses the @Username of your Facebook page:
- https://m.me/myusername: This URL directs users to the Facebook Messenger chat. You should replace “myusername” with your actual Facebook page’s username.
- If your Facebook page does not have a username (and you see numbers instead), follow Facebook’s directions for adding a custom Username (and Facebook page URL).
This code snippet will allow you to display the Facebook Messenger chat button that floats in a fixed position on your website’s pages. Here’s how you can do it:
function add_facebook_messenger_button() {
echo '<a id="main-fb-messenger-button" href="https://m.me/myusername" target="_blank" rel="noopener noreferrer nofollow">
<img src="https://www.mywebsite.com/wp-content/uploads/facebook-messenger-logo.png" width="60px" height="60px" />
</a>';
echo '<div class="messenger-button-overlay"></div>';
}
add_action('wp_body_open', 'add_facebook_messenger_button');
This code is will create a simple Facebook Messenger button in all of your website pages. It hooks the Facebook Messenger button to the wp_body_open action, ensuring that the button is added just after the <body> tag in your website’s HTML structure. When users click on this link, it opens Facebook Messenger, allowing them to engage in a chat conversation. Additionally, we’ve added target="_blank" to open the link in a new tab or window.
We can also style the Facebook Messenger button and make it stick to the bottom right part of the screen using CSS:
/*** Style Facebook Messenger button ***/
#main-fb-messenger-button {
position: fixed;
bottom: 15px;
right: 15px;
z-index: 10;
}
.messenger-button-overlay{
width: 50px;
height: 50px;
position: absolute;
top: 5px;
left: 5px;
border-radius: 99px;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
background-color: transparent;
}By using the above styling, we instruct the button to always float on the bottom right of the screen. The final result should look like this:
Adding Facebook Messenger to Page with Shortcode
To make it even more convenient, you can create a shortcode that allows you to place the Facebook Messenger chat button in steady points on your pages or posts. Here’s a shortcode you can use:
<?php //do not copy this line
//... rest of functions.php code
function facebook_messenger_button_shortcode() {
ob_start();
?>
<a id="shortcode-fb-messenger-button" href="https://m.me/myusername" target="_blank" rel="noopener noreferrer nofollow"><img src="https://www.mywebsite.com/wp-content/uploads/facebook-messenger-logo.png" width="60px" height="60px"></a>
<?php
return ob_get_clean();
}
add_shortcode('facebook_messenger_button', 'facebook_messenger_button_shortcode');Just add [facebook_messenger_button] shortcode into your page or post’s HTML editor. This method allows you to add the Facebook Messenger button with ease, giving you complete control over its placement within your content.
And the final result will look like the following image:
Adding the Facebook Messenger Chat Button Code Directly
Apart from the previous solutions, you can seamlessly add the button into your WordPress website by incorporating the necessary HTML code directly into your web pages or posts. This straightforward HTML code snippet the display of the Facebook Messenger chat button wherever you choose within your content. Here’s the HTML code:
<a href="https://m.me/myusername" target="_blank" rel="noopener noreferrer nofollow"><img src="https://www.mywebsite.com/wp-content/uploads/facebook-messenger-logo.png" width="60px" height="60px" /></a>Add a lightweight Facebook Messenger button to your WordPress!
Consider this direct HTML approach if you prefer simplicity and want to embed the Facebook Messenger chat button directly into your web pages or posts. This method provides you with complete autonomy over the button’s placement, allowing your website visitors to easily initiate conversations with you or your business through Facebook Messenger. Whether you choose to employ WordPress functions, the previous HTML approach, or this direct HTML method, you’ll offer a convenient means for your visitors to engage with you via their preferred messaging platform.