Below, you’ll find a detailed guide on how to add the Mongoose Page 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 Mongoose Page Plugin shortcode not to show or not to work correctly.
Before starting, here is an overview of the Mongoose Page Plugin and the shortcodes it provides:
"Mongoose Page Plugin is a WordPress tool that seamlessly integrates with Facebook's Graph API. It efficiently displays your Facebook page feed on your website, keeping your content fresh and engaging."
- [facebook-page-plugin]
Mongoose Page [facebook-page-plugin] Shortcode
The Facebook Page Plugin shortcode is designed to embed a Facebook page into your WordPress site. It allows customization of various elements such as page width, height, language, and more.
Shortcode: [facebook-page-plugin]
Parameters
Here is a list of all possible facebook-page-plugin shortcode parameters and attributes:
href
– The Facebook page URL to display.width
– The width of the Facebook feed in pixels.height
– The height of the Facebook feed in pixels.cover
– Defines whether to display the page’s cover photo.facepile
– Determines whether to display profile photos of friends who like the page.posts
– Specifies whether to display posts from the Facebook page.tabs
– Defines which sections of the page to display (timeline, events, messages).language
– Sets the language of the plugin.cta
– Defines whether to hide the custom call to action button (if available).small
– Determines whether to use the small header instead.adapt
– Specifies whether to adapt to the container width.link
– Decides whether to include a link to the Facebook page.linktext
– The text to display for the Facebook page link.method
– The method of implementation, either ‘sdk’ or ‘iframe’._implementation
– Specifies that the method of implementation is through shortcode.
Examples and Usage
Basic example – A simple usage of the shortcode to display a Facebook page feed with the default parameters.
[facebook-page-plugin href="your-facebook-page-url" /]
Advanced examples
Displaying a Facebook page feed and customizing the width, height, and language of the feed. The width and height are set to 500 and 300 respectively, and the language is set to French.
[facebook-page-plugin href="your-facebook-page-url" width="500" height="300" language="fr_FR" /]
Displaying a Facebook page feed with custom tabs, hiding the cover photo, and showing facepile. The tabs are set to timeline and events, the cover photo is hidden, and the facepile is shown.
[facebook-page-plugin href="your-facebook-page-url" tabs="timeline,events" cover="false" facepile="true" /]
Displaying a Facebook page feed and customizing the call to action, header size, and container width. The call to action is hidden, the header is set to small, and the container width is adapted to the width of the parent container.
[facebook-page-plugin href="your-facebook-page-url" cta="false" small="true" adapt="true" /]
PHP Function Code
In case you have difficulties debugging what causing issues with [facebook-page-plugin]
shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'facebook-page-plugin', array( $this, 'facebook_page_plugin' ) );
Shortcode PHP function:
function facebook_page_plugin( $filter ) {
wp_enqueue_script( 'facebook-page-plugin-responsive-script' );
$return = '';
$a = shortcode_atts(
array(
'href' => null,
'width' => 340,
'height' => 130,
'cover' => null,
'facepile' => null,
'posts' => null,
'tabs' => array(),
'language' => get_bloginfo( 'language' ),
'cta' => null,
'small' => null,
'adapt' => null,
'link' => true,
'linktext' => null,
'method' => 'sdk',
'_implementation' => 'shortcode',
),
$filter
);
if ( isset( $a['href'] ) && ! empty( $a['href'] ) ) {
$a['language'] = str_replace( '-', '_', $a['language'] );
$return .= sprintf(
'<div class="cameronjonesweb_facebook_page_plugin" data-version="%1$s" data-implementation="%2$s" id="%3$s" data-method="%4$s">',
esc_attr( $this->version ),
esc_attr( $a['_implementation'] ),
esc_attr( $this->facebook_page_plugin_generate_wrapper_id() ),
esc_attr( $a['method'] )
);
if ( 'sdk' === $a['method'] ) {
$return .= sprintf(
'<div id="fb-root"></div><script async defer crossorigin="anonymous" src="https://connect.facebook.net/%1$s/sdk.js#xfbml=1&version=v17.0"></script>', // phpcs:ignore WordPress.WP.EnqueuedResources.NonEnqueuedScript
esc_attr( $a['language'] )
);
$return .= sprintf(
'<div class="fb-page" data-href="https://facebook.com/%1$s" ',
esc_attr( $a['href'] )
);
if ( isset( $a['width'] ) && ! empty( $a['width'] ) ) {
$return .= sprintf(
' data-width="%1$s" data-max-width="%1$s"',
esc_attr( $a['width'] )
);
}
if ( isset( $a['height'] ) && ! empty( $a['height'] ) ) {
$return .= sprintf(
' data-height="%1$s"',
esc_attr( $a['height'] )
);
}
if ( isset( $a['cover'] ) && ! empty( $a['cover'] ) ) {
if ( 'false' == $a['cover'] ) {
$return .= ' data-hide-cover="true"';
} elseif ( 'true' == $a['cover'] ) {
$return .= ' data-hide-cover="false"';
}
}
if ( isset( $a['facepile'] ) && ! empty( $a['facepile'] ) ) {
$return .= ' data-show-facepile="' . esc_attr( $a['facepile'] ) . '"';
}
if ( isset( $a['tabs'] ) && ! empty( $a['tabs'] ) ) {
$return .= sprintf(
' data-tabs="%1$s"',
esc_attr( $a['tabs'] )
);
} elseif ( isset( $a['posts'] ) && ! empty( $a['posts'] ) ) {
if ( 'true' == $a['posts'] ) {
$return .= ' data-tabs="timeline"';
} else {
$return .= ' data-tabs="false"';
}
}
if ( isset( $a['cta'] ) && ! empty( $a['cta'] ) ) {
$return .= sprintf(
' data-hide-cta="%1$s"',
esc_attr( $a['cta'] )
);
}
if ( isset( $a['small'] ) && ! empty( $a['small'] ) ) {
$return .= sprintf(
' data-small-header="%1$s"',
esc_attr( $a['small'] )
);
}
if ( isset( $a['adapt'] ) && ! empty( $a['adapt'] ) ) {
$return .= ' data-adapt-container-width="true"';
} else {
$return .= ' data-adapt-container-width="false"';
}
$return .= '><div class="fb-xfbml-parse-ignore">';
if ( 'true' == $a['link'] ) {
$return .= sprintf(
'<blockquote cite="https://www.facebook.com/%1$s"><a href="https://www.facebook.com/%1$s">',
esc_attr( $a['href'] )
);
if ( empty( $a['linktext'] ) ) {
$return .= 'https://www.facebook.com/' . esc_attr( $a['href'] );
} else {
$return .= esc_html( $a['linktext'] );
}
$return .= '</a></blockquote>';
}
$return .= '</div>'; // .fb-xfbml-parse-ignore.
$return .= '</div>'; // .fb-page.
} elseif ( 'iframe' === $a['method'] ) {
$url = add_query_arg(
array(
'href' => $a['href'],
'width' => $a['width'],
'height' => $a['height'],
'hide_cover' => ! is_null( $a['cover'] ) ? strval( ! filter_var( $a['cover'], FILTER_VALIDATE_BOOLEAN, FILTER_NULL_ON_FAILURE ) ) : null,
'show_facepile' => $a['facepile'],
'tabs' => ! empty( $a['posts'] ) ? 'timeline' : $a['tabs'],
'hide_cta' => $a['cta'],
'small_header' => $a['small'],
'adapt_container_width' => $a['adapt'],
'locale' => $a['language'],
),
'https://www.facebook.com/plugins/page.php'
);
$return .= sprintf(
'<iframe src="%1$s" width="%2$s" height="%3$s" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>',
esc_url( $url ),
esc_attr( $a['width'] ),
esc_attr( $a['height'] )
);
}
$return .= '</div>'; // .cameronjonesweb_facebook_page_plugin.
}
return $return;
}
Code file location:
facebook-page-feed-graph-api/facebook-page-feed-graph-api/inc/class-mongoose-page-plugin.php
Conclusion
Now that you’ve learned how to embed the Mongoose Page 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