Blog, Facebook, PHP, WordPress, WordPress Shortcode

Facebook Share Button in WordPress With Shortcode

Most of us are familiar with the Facebook share button. It's normally integrated with other social sharing services - as it should be - but it can also be included on your website in isolation. This post will show you how to add a Facebook share button (with WordPress shortcode) to share a page to Facebook. There's a post forthcoming that'll deal with including a multitude of social share icons at the top and/or bottom of each page.

This post is part one of three; the remaining two posts dealing with how to integrate custom property types with your content as it's shared. The custom property types (object graph tags) ensure that your page is properly represented on Facebook and other social platforms.

The Result:

Using the shortcode of [fbshare width="200" p="1"], we'll render the following basic text on our WordPress website (we've used p="1" to wrap the text in paragraph tags. The text can be altered with text="something").

Share on Facebook

I like and use the text option regularly, however, it's not the most common application. Other layout options are as follows:

box_count

Usage: [fbshare layout="box_count"]

Result:

button_count

Usage: [fbshare layout="button_count" align="right" size="large"]

Result:

button

Usage: [fbshare layout="button"]

Result:

icon

Usage: [fbshare layout="icon"]

Result:

Shortcode Attributes

The following shortcode attributes are available.

url

If a URL is not specified (normally the case), the post permalink will be used.

layout

Available layout options are box_count, button_count, button, icon, and link. Use as follows: layout="button".

size

Available size options are small and large.

text

For a text link, default text rendered is Share on Facebook. Alter as required.

mobile

If set to true (mobile="true"), the share button will open the share dialog in an iframe (instead of a popup) on top of your website on mobile. This option is only available for mobile, not desktop. false by default.

padding

Default padding is 8px 15px 8px 15px.

align

If alignment is not specified (left or right), the button will center.

The button or text link will wrap in paragraph tags by default. Use p="0" to disable.

WordPress Shortcode

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).

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

Embed Facebook Share Button in WordPress With Shortcode

http://www.beliefmedia.com/facebook-share-button

function beliefmedia_facebook_share_button($atts) {

$atts = shortcode_atts(array(

'url' => '',

'layout' => 'link', // box_count, button_count, button, icon, link

'size' => 'small',

'text' => 'Share on Facebook',

'mobile' => 'false',

'padding' => '8px 15px 8px 15px',

'align' => false,

'p' => 1

), $atts);

global $post;

/* Get URL */

if ($atts['url'] == '') $atts['url'] = get_permalink($post->ID);

/* Link only */

if ($atts['layout'] == 'link') {

$return = '<a href="https://www.facebook.com/sharer/sharer.php?kid_directed_site=0&u=' . urlencode($atts['url']) . '&display=popup&ref=plugin&src=share_button" onclick="javascript:window.open(this.href, \'\', \'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=400\');return false;">' . $atts['text'] . '</a>';

if ($atts['p']) $return = '' . $return . '';

return $return;

}

/* Build button */

$return = '<div class="fb-share-button" data-href="' . $atts['url'] . '" data-size="' . $atts['size'] . '" data-layout="' . $atts['layout'] . '" data-mobile-iframe="' . $atts['mobile'] . '"></div>';

/* Formatting */

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

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

</div>';

return $return;

}

add_shortcode('fbshare', 'beliefmedia_facebook_share_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

Share Button Configuration on Facebook .
The code necessary to include anything above and below posts, common with social shares, is scheduled here.

Download

Title: Facebook Share Button in WordPress With Shortcode (WP Plugin)
Description: Embed a Facebook Share Button in WordPress With Shortcode.
Download • Version 0.2, 1.7K, zip, Category: WordPress Plugins (General)
WordPress Shortcodes, (957.0B)

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