Below, you’ll find a detailed guide on how to add the Cresta Social Messenger Shortcode to your WordPress website, including its parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the Cresta Social Messenger Plugin shortcode not to show or not to work correctly.
Before starting, here is an overview of the Cresta Social Messenger Plugin and the shortcodes it provides:
"Cresta Social Messenger is a dynamic WordPress plugin that seamlessly integrates Facebook Messenger into your website. Engage directly with your audience in real-time, increasing customer satisfaction and conversions."
- [cresta-facebook-messenger]
Cresta Social Messenger [cresta-facebook-messenger] Shortcode
The Cresta Facebook Messenger shortcode allows users to add a Facebook Messenger button to their WordPress site. It customizes the button’s text, icon, position, and associated Facebook page. The related PHP code extracts shortcode attributes, fetches plugin settings, and constructs an HTML and JavaScript output. This output includes the Messenger button and a script for handling click events. In mobile view, it redirects users to the Messenger app. For desktop users, it opens a chat box. This shortcode provides a convenient way to integrate Facebook Messenger into your WordPress site.
Shortcode: [cresta-facebook-messenger]
Parameters
Here is a list of all possible cresta-facebook-messenger shortcode parameters and attributes:
text– allows to customize the display text on the messenger button.icon– controls if the messenger button should show an icon (‘yes’ or ‘no’).position– sets the positioning of the messenger box (‘top’ or other values).fbpage– allows to specify a Facebook page different from the default one.
Examples and Usage
Basic example – Displaying the Facebook messenger icon with default settings
[cresta-facebook-messenger]Advanced examples
Displaying the Facebook messenger icon with custom text, icon turned off, and positioned at the bottom of the page
[cresta-facebook-messenger text="Chat with us" icon="no" position="bottom"]Displaying the Facebook messenger icon with custom text, icon turned on, positioned at the top of the page, and linked to a specific Facebook page
[cresta-facebook-messenger text="Need help?" icon="yes" position="top" fbpage="yourFBpage"]Please replace “yourFBpage” with your actual Facebook page username.
PHP Function Code
In case you have difficulties debugging what causing issues with [cresta-facebook-messenger] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'cresta-facebook-messenger', 'cresta_facebook_messenger_shortcode' );Shortcode PHP function:
function cresta_facebook_messenger_shortcode( $atts ) {
extract(shortcode_atts( array(
'text' => 'Need Help?',
'icon' => 'yes',
'position' => 'top',
'fbpage' => ''
), $atts ));
$cfm_options = get_option( 'crestafacebookmessenger_settings' );
$facebook_page_url = $cfm_options['cresta_facebook_messenger_page_url'];
$facebook_box_text = $cfm_options['cresta_facebook_messenger_box_text'];
$facebook_hide_cover = $cfm_options['cresta_facebook_messenger_hide_cover'] ? 'true' : 'false';
$facebook_small_header = $cfm_options['cresta_facebook_messenger_small_header'] ? 'true' : 'false';
$facebook_show_facepile = $cfm_options['cresta_facebook_messenger_show_facepile'] ? 'true' : 'false';
$facebook_tabs_to_show = $cfm_options['cresta_facebook_messenger_tabs'];
$facebook_language = $cfm_options['cresta_facebook_messenger_box_language'];
$facebook_mobile = $cfm_options['cresta_facebook_messenger_mobile_option'];
$what_icon = $cfm_options['cresta_facebook_messenger_what_icon'];
if ($facebook_box_text) {
$top_text = '<div class="cresta-facebook-messenger-top-header"><span>'. esc_html($facebook_box_text) .'</span></div>';
} else {
$top_text = '';
}
if ($icon == 'yes') {
if ($what_icon == 'facebook') {
$svg_icon = '<svg id="fb-msng-icon-button" data-name="messenger icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path d="M40,0H10C4.486,0,0,4.486,0,10v30c0,5.514,4.486,10,10,10h30c5.514,0,10-4.486,10-10V10C50,4.486,45.514,0,40,0z M39,17h-3 c-2.145,0-3,0.504-3,2v3h6l-1,6h-5v20h-7V28h-3v-6h3v-3c0-4.677,1.581-8,7-8c2.902,0,6,1,6,1V17z" style="fill:#ffffff"></path></svg>';
} else {
$svg_icon = '<svg id="fb-msng-icon-button" data-name="messenger icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30.47 30.66"><path d="M29.56,14.34c-8.41,0-15.23,6.35-15.23,14.19A13.83,13.83,0,0,0,20,39.59V45l5.19-2.86a16.27,16.27,0,0,0,4.37.59c8.41,0,15.23-6.35,15.23-14.19S38,14.34,29.56,14.34Zm1.51,19.11-3.88-4.16-7.57,4.16,8.33-8.89,4,4.16,7.48-4.16Z" transform="translate(-14.32 -14.34)" style="fill:#ffffff"/></svg>';
}
} else {
$svg_icon = '';
}
if ($fbpage == '') {
$thepage = $facebook_page_url;
} else {
$thepage = $fbpage;
}
$random_number = rand(1,1000);
return '<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/'.esc_attr(trim($facebook_language)).'/sdk.js#xfbml=1&version=v11.0&autoLogAppEvents=1"></script>
<script>
(function($) {
"use strict";
$(document).ready(function() {
var mobileDetect = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
if (mobileDetect && $(".cresta-facebook-messenger-button").hasClass("onApp")) {
$(".cresta-facebook-messenger-container-button").css("display","none");
$(".cresta-facebook-messenger-button.click-'.esc_attr($random_number).'").on("click", function(){
window.location = "https://m.me/'. esc_attr(trim($thepage)).'";
});
} else {
$(".cresta-facebook-messenger-button.click-'.esc_attr($random_number).'").on("click", function(){
$(this).find(".cresta-facebook-messenger-container-button").toggleClass("open");
});
}
});
})(jQuery);
</script>
<div class="cresta-facebook-messenger-button '.esc_attr($facebook_mobile).' click-'.esc_attr($random_number).'">
'.$svg_icon.'
<span>'.esc_html($text).'</span>
<div class="cresta-facebook-messenger-container-button '.esc_attr($position).'">
'.$top_text.'
<div class="fb-page" data-href="https://facebook.com/'. esc_attr($thepage).'" data-tabs="'. esc_attr($facebook_tabs_to_show) .'" data-width="300" data-height="350" data-small-header="'.esc_attr($facebook_small_header).'" data-adapt-container-width="true" data-hide-cover="'.esc_attr($facebook_hide_cover).'" data-show-facepile="'.esc_attr($facebook_show_facepile).'"></div>
</div>
</div>';
}
Code file location:
cresta-facebook-messenger/cresta-facebook-messenger/cresta-facebook-messenger.phpConclusion
Now that you’ve learned how to embed the Cresta Social Messenger Plugin shortcode, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.
Leave a Reply