Blog, PHP, WordPress, WordPress Shortcode

Add a Google +1 Button in WordPress with Shortcode

The Google +1 button now forces a share dialogue rather than behaving like the Facebook 'like' button. The bizarre move essentially depreciates the former feature that was, quite frankly, one of the more redeeming features of the platform.

Note: Google+ is now a retired platform for personal use. The demos have been disabled.

The button offered "social proof" by providing visible credibility to a page. While the +1 was never a entirely accurate indication of article or page popularity (it was flawed because of the somewhat misleading count), fixing the intrinsic feature was always a better option of removing it. The site is called Google Plus and they've disabled the flagship feature - the Google Plus button. Could you image if Facebook removed the 'like' button and instead forced a share?

The +1 button was also a good quasi-bookmarking service since all +1 impressions were available from within Google+... and it was an easy means of sharing something without having to actually share it. To introduce a new experience (we can't call it a feature) without notice is ridiculously negligent on Google's part. Did they learn nothing from Twitter? To suggest that they've "[made] it easier for people to load and share the pages they're interested in" is absurd. Forcing the share dialogue box is nothing more than a means to inject life into a product that isn't working. Fix the platform, Google - don't kill its features.

■ ■ ■

We'll reluctantly share the WordPress shortcode to render a +1 button (or should we call it a share button?) on your website with shortcode.

The Result

The result can be seen at the top of this page by way of a +a button alongside the Tweet button. There are four button size: small, medium, standard, and tall. If you're using our former shortcode function and have defined depreciated attributes, they obviously have no effect.

small

Shortcode: [gpone size="small"]. Result:

Demo removed.

medium

The shortcode of [gpone size="medium"] will return as follows:

Demo removed.

standard

The standard +1 button, written as [gpone size="standard"] will display as follows:

Demo removed.

tall

The tall +1 button [gpone size="tall"], previously associated with a count icon (now more of a 'flat' button), will render as follows:

Demo removed.

Button width, maximum width, and button height are detailed on Google's developer website . A reproduction of the new sizing is reproduced below.

Add a Google +1 Button in WordPress with Shortcode

Source: https://developers.google.com/+/web/+1button/#button-sizes.

The doubling up of buttons is the result of attributes that were depreciated.

WordPress Shortcode

This function requires that Google's Platform JavaScript function be rendered on your page. You can download the function or plugin here.

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 Google +1 Button in WordPress with Shortcode

http://www.beliefmedia.com/google-plus-one-wordpress

function beliefmedia_google_plusone_button($atts) {

$atts = shortcode_atts(array(

'url' => 0, /* data-href */

'size' => 'medium', /* data-size: small, medium, standard, tall */

'width' => '60', /* data-width */

'align' => 'left',

'callback' => 0, /* data-callback */

'interaction' => 0, /* data-onstartinteraction */

'endinteraction' => 0, /* data-onendinteraction */

'style' => 'padding-left: 3px; display:inline-block; float: right;', /* Additional style for container div */

'p' => 0

), $atts);

/* Uses post permalink by default */

$url = ($atts['url']) ? $atts['url'] : get_permalink();

if ($atts['style'] == '') $style = 'float: ' . $atts['align'] . ';';

/* Build button */

$return = '<div style="' . $atts['style'] . ' width: ' . $width . ';">';

$return .= '<div class="g-plusone" data-annotation="inline" data-size="' . $atts['size'] . '" data-width="' . $atts['width'] . '" data-href="' . $url . '"';

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

if ($atts['interaction']) $return .= ' data-onstartinteraction="' . $atts['interaction'] . '"';

if ($atts['endinteraction']) $return .= ' data-onendinteraction="' . $atts['endinteraction'] . '"';

$return .= '></div>

</div>';

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

return $return;

}

add_shortcode('gpone','beliefmedia_google_plusone_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.

Shortcode Attributes

url

Under normal circumstances the URL should be left blank so it defaults to the WordPress post permalink. To alter this and add another a +1 for another page,
use url="http://www.flight.org/".

size

Available button sizes are small, medium, standard, and tall.

width

Width of the parent div container.

align

Sets the float property of the align attribute.

style

The style is applied to Google's div container. If empty the container will align as defined by the align attribute.

■ ■ ■

callback

If specified, this function is called after the user clicks the +1 button.

interaction

If specified, this function is called either when a hover bubble displays, which is caused by the user hovering the mouse over the +1 button, or when a confirmation bubble displays, which is caused by the user +1'ing the page.

endinteraction

If specified, this function is called when either a hover or confirmation bubble disappears.

PHP Function

As with the shrotcode function, you must include Google's platform.js code. Download the code here.

<?php

Add a Google +1 Button in WordPress with Shortcode

http://www.beliefmedia.com/google-plus-one-wordpress

function beliefmedia_plusone($url = 'false', $args = '') {

/* Require URL */

if ($url === false) return 'Require URL';

$atts = array(

'size' => 'medium', /* data-size: small, medium, standard, tall */

'width' => '60', /* data-width */

'align' => 'left',

'callback' => 0, /* data-callback */

'interaction' => 0, /* data-onstartinteraction */

'endinteraction' => 0, /* data-onendinteraction */

'style' => 'padding-left: 3px; display:inline-block; float: right;', /* Additional style for container div */

'p' => 0

);

/* Merge $args with $atts */

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

/* You'll need to add your own style... */

if ($atts['style'] == '') $style = 'float: ' . $atts['align'] . ';';

/* Build button */

$return = '<div style="' . $atts['style'] . ' width: ' . $width . ';">';

$return .= '<div class="g-plusone" data-annotation="inline" data-size="' . $atts['size'] . '" data-width="' . $atts['width'] . '" data-href="' . $url . '"';

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

if ($atts['interaction']) $return .= ' data-onstartinteraction="' . $atts['interaction'] . '"';

if ($atts['endinteraction']) $return .= ' data-onendinteraction="' . $atts['endinteraction'] . '"';

$return .= '></div>

</div>';

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

return $return;

}

/* Usage */

$url = 'http://www.beliefmedia.com/';

$args = array('size' => 'standard');

echo beliefmedia_plusone($url);

Considerations

More information on the Google +1 button can be found here .
Our styles are rather generic so it's very likely you will have to alter the CSS style to ensure your button renders as you would like.
In our former article we shared details on how to include the button at the top and bottom of each page. When that code is published you'll find it here.