Blog, Facebook, WordPress, WordPress Shortcode

Add a Facebook Like Button in WordPress with Shortcode

The Facebook Like Button Plugin WordPress shortcode is our latest article in a series that shows various ways of embedding social share buttons into your WP posts and pages. The buttons associated with array of platforms will all be shared individually before we publish another article showing how to include post-level share options (at the top and bottom of each page) and various other floating solutions.

This article will show you how to render the Facebook Like Plugin Buttons within a post or page. When clicked, that content will be shared to Facebook and possibly make its way into your friends' timeline. You can optionally display a Share button next to the Like button to let people add a personal message and customize who they share with. The WordPress shortcode includes a number of shortcode parameters (as detailed in the Facebook documentation

) to alter the manner in which the button renders to your page. The example large like button right aligned was returned as follows: [fblike share="1" size="large" align="right" width="380"]).

The Result

To show a basic like button centered in a post, use [fblike width="365"] (the button container defaults to 450 pixels so we've added the width to move the button close to the center of the page). The result:

The button may optionally include a share component. In this example we'll add a big like and share button with no count or other text, and we'll align the button to the right. Shortcode used was [fblike size="large" align="right" share="1" width="365"].

The like button performs a secondary funky function of returning a Facebook page like button (not unlike the FB Page Plugin). For example, [fblike size="large" layout="button" url="https://www.facebook.com/beliefmedia/" faces="0"] returns the following like button for the BeliefMedia Facebook page (so feel free to like it!):

In the next example we'll center a recommend box for our front page. Shortcode of [fblike size="small" action="recommend" layout="box_count" url="https://www.beliefmedia.com.au/"] returns:

The last exapmple is used to simply show a like button for another page. Shortcode of [fblike size="small" layout="button" url="https://www.beliefmedia.com.au/"] returns:

Any number of combinations might be used. Adding faces is accomplished with faces="1".

Shortcode Attributes

The following attributes are available.

url

If a URL isn't provided we'll use the permalink associated with your current post.

action

The verb to display on the button. Can be either like or recommend.

layout

The button layout can be either standard, button_count, button or box_count.

kids

If your web site or online service, or a portion of your service, is directed to children under 13 you must enable this. False by default. Enable with kids="1".

size

The button is available in two sizes: large and small.

faces

Specifies whether to display profile photos below the button (standard layout only). You must not enable this on child-directed sites. False by default. Enable with faces="1".

share

Specifies whether to include a share button beside the Like button. False by default. To enable, use share="1".

color

The color scheme used by the plugin for any text outside of the button itself. Can be light (default) or dark.

ref

A label for tracking referrals which must be less than 50 characters and can contain alphanumeric characters and some punctuation (currently +/=-.:_). If you're interested in tracking Facebook analytics from within the Facebook platform, this field is essential. Because of its importance, we'll add a ref based on the page slug by default. Replace it with something of your choosing that actually makes sense if you actually use the feature.

width

The width of the plugin. See the following FB screenshot for minimum (and maximum) button dimensions.

Add a Facebook Like Button in WordPress with Shortcode

align

The button will center by default. Use align="right" or align="left".

padding

If alignment right or left is used, the padding as defined in the shortcode function (default: 8px 15px 5px 15px) will be applied. If centered, the like button will be wrapped in paragraph tags. Alter as required.

WordPress Shortcode

The shortcode requires the Facebook SDK be added to the head of your website.

Copy and paste the WordPress function into your theme's functions.php file or, if you sensibly have one installed, your custom functions plugin.

<?php

Add a Facebook Like Button in WordPress with Shortcode (Includes PHP Function)

https://www.beliefmedia.com.au/facebook-like-button

function beliefmedia_facebook_like_button($atts) {

$atts = shortcode_atts(array(

'url' => 0, /* Eg: https://www.beliefmedia.com.au/ */

'action' => 'like', /* like, recommend */

'layout' => 'standard', /* standard, button_count, button, box_count */

'kids' => 0, /* 1 for true */

'size' => 'small', /* small, large */

'faces' => 0, /* 1 for true */

'share' => 0, /* 1 for true */

'color' => 'light', /* light (default) or dark */

'ref' => 0, /* Tracking Label */

'width' => '450',

'align' => 0,

'padding' => '8px 15px 5px 15px' ), $atts);

/* Embed code */

$return .= '<div class="fb-like" data-layout="' . $atts['layout'] . '" data-action="' . $atts['action'] . '" data-size="' . $atts['size'] . '" data-colorscheme="' . $atts['color'] . '" data-width="' . abs($atts['width']) . '"';

$return .= ($atts['url']) ? ' data-href="' . $atts['url'] . '"' : ' data-href="' . get_permalink() . '"';

if ($atts['faces']) $return .= ' data-show-faces="true"';

if ($atts['kids']) $return .= ' data-kid-directed-site="true"';

if ($atts['share']) $return .= ' data-share="true"';

$return .= ($atts['ref']) ? ' data-ref="' . $atts['ref'] . '"' : ' data-ref="' . preg_replace('/[^a-z-]/i', '', str_replace('-', '_', basename(get_permalink()))) . '"';

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

/* Formatting */

$css = ($atts['align']) ? 'float: ' . $atts['align'] . '; padding:' . $atts['padding'] . ';' : 'text-align:center;';

$return = '<div style="' . $css . '">' . $return . '<div style="clear: both;"></div>

</div>';

/* Result */

return ($atts['align']) ? $return : '' . $return . '';

}

add_shortcode('fblike', 'beliefmedia_facebook_like_button');

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.

Considerations

Since we first published the like shortcode on Internoetics, the Facebook plugin code has changed numerous times. The constant depreciation of some features and the addition of others makes shortcode the only suitable means for rendering the plugin. Don't embed code!
Somtime soon we'll share a bunch of options for sharing various social buttons at the top and/or bottom of every page, and another with various floating options.

Download

Title: Add a Facebook Like Button in WordPress with Shortcode
Description: Add the Facebook like plugin to WordPress with shortcode. Format the plugin to your liking.
Download • Version 0.2, 936.0B, zip, Category: WordPress Shortcodes

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