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

Display The Facebook Save Button With WordPress Shortcode (or PHP)

From Facebook, "the Save button lets people save items or services to a private list on Facebook, share it with friends, and receive relevant notifications. For example, a person can save an item of clothing, trip, or link that they're thinking about and go back to that list for future consumption, or get notified when that item or trip has a promotional deal".

Pages saved to Facebook via a website save button may later be shared on the platform. In its most basic form, the save button acts like a social bookmark. If you're in the 'business of business', having the save button continues to work for your conversion by reminding users of saved pages.

Saves can be removed from within Facebook or your website.

The Result

The button above shows a small button aligned to the left ([fbsave align="left" size="small"]). By default, the code will return a large button centered as follows (using [fbsave]):

When our shortcode is used, the current page is returned by default, although another page can be referenced. Attributes are listed below.

Shortcode Attributes

The following shortcode are available to alter the save button's behaviour.

url

The current page is returned by default. To use another page, use [fbsave url="http://www.beliefmedia.com/"].

size

Two sizes are available: small and large. Use as follows: [fbsave size="small"].

align

By default the button will center in paragraph tags. To align left or right, use [fbsave align="left"] (CSS applies as per below).

padding

The padding applies to the button when aligned left or right only (defaults to 8px 15px; 8px 15px. To change the default behaviour, alter the shortcode function, or use the following in your shortcode: [fbsave padding="5px 10px 5px 10px"].

Shortcode Function

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

Embed Facebook Save Button with WordPress Shortcode (or with PHP)

http://www.beliefmedia.com/facebook-save-button-wordpress

Requires Facebook SDK: http://www.beliefmedia.com/facebook-sdk-wordpress

function beliefmedia_facebook_save_button($atts) {

extract(shortcode_atts(array(

'url' => false, /* Defaults to current WP page */

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

'align' => false,

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

), $atts));

/* Current page or defined URL? */

$url = ($url !== false) ? $url : get_permalink();

/* Formatting */

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

$return = '<div style="' . $css . '"><div class="fb-save" data-uri="' . $url . '" data-size="' . $size . '"></div><div style="clear: both;"></div></div>';

/* Result */

return ($align === false) ? '<p>' . $return . '</p>' : $return;

}

add_shortcode('fbsave','beliefmedia_facebook_save_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.

PHP Function

The following function may be used outside of WordPress. Again, the SDK is required.

<?php

Embed Facebook Save Button with WordPress Shortcode (or with PHP)

http://www.beliefmedia.com/facebook-save-button-wordpress

Requires Facebook SDK: http://www.beliefmedia.com/facebook-sdk-wordpress

function beliefmedia_facebook_save_button($args = '') {

$atts = array(

'url' => false, /* Defaults to current WP page */

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

'align' => false,

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

);

/* Merge $args with $atts */

$atts = (empty($args)) ? $atts : array_merge($atts, $args);

/* Current page or defined URL? */

$url = ($atts['url'] !== false) ? $url : $actual_link = (isset($_SERVER['HTTPS']) ? "https" : "http") . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";

/* Formatting */

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

$return = '<div style="' . $css . '"><div class="fb-save" data-uri="' . $url . '" data-size="' . $atts['size'] . '"></div><div style="clear: both;"></div></div>';

/* Result */

return ($atts['align'] === false) ? '<p>' . $return . '</p>' : $return;

}

/* Basic Usage */

echo function beliefmedia_facebook_save_button();

/* Usage with $args */

$args = array('align' => 'left', 'size' => 'small');

echo beliefmedia_facebook_save_button($args);

The $args array keys of url, size, align, and padding are merged into the resulting $atts array.

Considerations

If you're a business and require that the SAVE button be integrated with your product catalogue, get in touch with us. It's somewhat of a necessity for any e-commerce presence to build these Facebook features into your website as a means to supplement your advertising and marketing strategies.
All saved links will be added to the Saved view, which can be found at www.facebook.com/saved or for mobile apps via navigating to More -> Saved.

Download

Title: Display Facebook Save Button (WP Plugin)
Description: Display Facebook Save Button with WordPress Shortcode (or with PHP).
Download • Version 0.1, 1.6K, zip, Category: WordPress Plugins (General)
WordPress Shortcodes, (714.0B) PHP Code & Snippets, (1.1K)

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