Blog, Facebook, PHP, WordPress, WordPress Plugins, WordPress Shortcode

Add Facebook’s Page Plugin To Your Website With WordPress Shortcode Or PHP

The Facebook Page plugin lets you easily embed and promote any Facebook Page on your website. Just like on Facebook, your visitors can like and share the Page without leaving your site.

Since June 23rd 2015, and with the release of Graph API v2.3, Facebook retired their old Like Box Plugin in favor of the Page Plugin , meaning that the old Like Box that we first shared in 2011 is entirely obsolete. While it has continued to work, it's only a matter of time before it's unsupported. The updated code we published in 2015 also inherited the wrath of Facebook's ever-changing graph features, and is also a little obsolete. The WordPress shortcode, plugin, and PHP function on this page will be updated as required to keep it in fashion.

The Page Plugin can be styled in a minimalist way (see my like button in our sidebar) or it can be further populated with some of your page data. Our shortcode will permit you to quickly and easily modify the look of your Page Plugin whenever a change is required.

Example Usage

You may configue the plugin in any number of ways. Consider the following examples:

[pageplugin hide_cover="true" small_header="true" tabs="" hide_cta="true" width="325"] returns:

BeliefMedia

■ ■ ■

[pageplugin hide_cover="false" small_header="true" tabs="timeline" hide_cta="false" show_facepile="true" width="500"] returns:

BeliefMedia

■ ■ ■

Using tabs="messages" is a feature that will invariably increase the number of people that contact you from your website. In this case, we've also used width="300" - a more acceptable width for a use in a sidebar. The shortcode of [pageplugin hide_cover="true" small_header="true" tabs="messages" hide_cta="false" height="300" width="300"] returns the following:

BeliefMedia

■ ■ ■

You may add multiple tabs - either default FB tabs or those that you create yourself. Usage is via a comma delimited list. The shortcode of [pageplugin hide_cover="false" small_header="true" tabs="timeline,messages" hide_cta="false" show_facepile="true" width="300"] returns:

BeliefMedia

The order of the tabs in your shortcode determines the order in which they're rendered.

■ ■ ■

The attributes can get a little confusing so you can refer back here for guidance. Shortcode usage is always a preferable option to pasting Facebook's default code into your website; their code and the features change regularly.

WordPress Shortcode

Copy and paste the WordPress function into your theme's functions.php file or, if you sensibly have one installed, your custom functions plugin. You may optionally download and install our plugin from the bottom of of the page.

It's a requirement when using this function that you download the FBSDK function. Review its use and download the code here. It's possible that your theme is already rendering the SDK by default (open up your source code and search for "connect.facebook.net" to confirm).

<?php

Add Facebook's Page Plugin To Your Website With WordPress Shortcode Or PHP

http://www.beliefmedia.com/facebooks-page-plugin

function beliefmedia_facebook_pageplugin($atts) {

extract(shortcode_atts(array(

'page' => 'BeliefMedia',

'width' => 340,

'height' => 0,

'tabs' => 'timeline', /* timeline, events, messages (or custom tab) */

'hide_cover' => 'false',

'show_facepile' => 'false',

'hide_cta' => 'false',

'small_header' => 'true',

'adapt_container_width' => 'true'

), $atts));

$return = '<p><div style="text-align:center;">';

$return .= '<div class="fb-page" data-href="https://www.facebook.com/' . $page . '/" data-tabs="' . $tabs . '" data-small-header="' . $small_header . '" data-adapt-container-width="' . $adapt_container_width . '" data-hide-cover="' . $hide_cover . '" data-show-facepile="' . $show_facepile . '" data-hide-cta="' . $hide_cta . '"';

if ($height) $return .= ' data-height="' . $height . '"';

if ($width) $return .= ' data-width="' . $width . '"';

$return .= '><blockquote cite="https://www.facebook.com/' . $page . '/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/' . $page . '/">' . $page . '</a></blockquote></div>';

$return .= '</div></p>';

return $return;

}

add_shortcode('pageplugin', 'beliefmedia_facebook_pageplugin');

If you require shortcode to work in a sidebar widget, you'll have to enable the functionality with a filter. If you're using our custom functions plugin, you'll have that feature enabled by default.

Shortcode Attributes

page

The page is your custom page username or ID.

width

The pixel width of the plugin. Minimum is 180 and maximum is 500.

height

The pixel height of the plugin. the minimum height is 70 (renders as per our first minimalist example)

tabs

The tabs (either Facebook or custom) to render, such as timeline, events, messages. Use a comma-separated list to add multiple tabs (tabs="timeline, events").

hide_cover

Using hide_cover="true" hides the cover photo in the header. It's false by default.

show_facepile

Using show_facepile="true" shows profile photos of friends that like your page. It is false by default.

hide_cta

Hides the custom call to action button (if available). It's false by default.

small_header

Use the small header instead of the larger image header. We've set this to false by default simply because the header often conflicts with your website.

adapt_container_width

Try to fit inside the container width. It's true by default. It's usually best to specify a width to ensure you maintain control over appearance.

Because of the large number of attributes, adjust the shortcode so that your defaults are 'pre-loaded', meaning that you can render your page plugin with just [pageplugin].

Considerations

You can adjust the language of the Page plugin plugin by loading a localized version of the Facebook JavaScript SDK. When you load the SDK adjust the value js.src to use your locale: Just replace en_US with your locale, e.g. ru_RU for Russian (Russia).
The plugin is expected to change regularly. Subscribe for updates.
If you're a client it's likely that we've already installed this feature for you. If not, get in touch.

Download

Title: Add Facebook's Page Plugin To Your Website
Description: The Facebook Page plugin lets you easily embed and promote any Facebook Page on your website.
Download • Version 0.3, 1.7K, zip, Category: WordPress Plugins (General)
WordPress Shortcodes, (785.0B) PHP Code & Snippets, (1.2K)

Download our 650-page guide on Finance Marketing. We'll show you exactly how we generate Billions in volume for our clients.