Blog, PHP, WordPress, WordPress Shortcode

Add a Google Plus Follow Button in WordPress with Shortcode

Note: Google+ is now a depreciated platform. The article was kept for reference only.

The Google Plus follow button is an underutilized tool that will display a button from which your visitors can add you to their circles. Unlike the Google Badge the returned rendering doesn't display anything other than the follow button (although it's still far more function than the minimalist Google+ Icon).

While Google provides a tool that will generate the Follow Button , it's always prudent to use shortcode for code that might be repeatedly used.

Add a Google Plus Follow Button in WordPress with Shortcode

Google's Follow Button Online Tool

The Result

Follow buttons can be aligned to the center, or floated left or right (meaning that text will wrap around them). Example of the small, medium, and large follow button with the annotation (count) bubble aligned horizontally are rendered below. They are linked to my personal Google+ profile .

Shortcode: [googleplusfollow size="small"]. The result:

~~No longer available~~

Shortcode: [googleplusfollow size="medium"]. The result:

~~No longer available~~

Shortcode: [googleplusfollow size="large"]. The result:

~~No longer available~~

The same buttons can be rendered with the annotation above the button. The shortcode of annotation="v" should be used.

Shortcode: [googleplusfollow size="small" annotation="v"]. The result:

~~No longer available~~

Shortcode: [googleplusfollow size="medium" annotation="v"]. The result:

~~No longer available~~

Shortcode: [googleplusfollow size="large" annotation="v"]. The result:

~~No longer available~~

Alternatively, no annotation can be displayed at all. The following large button is rendered with [googleplusfollow size="large" annotation="n"].

~~No longer available~~

You may optionally float the follow button to the right or left of your post container with the attribute of align="left|right". The advantage of using this alignment might arise if you are required to wrap text around the button. In the button used in this example we're referencing the retired Internoetics Google+ page . When using a page (rather than a personal profile), you must use type="publisher".

WordPress Shortcode

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

If you're already using one of our other Google+ shortcodes you won't have to add the JavaScript function again.

~~No longer available~~

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 Plus Follow Button in WordPress with Shortcode

http://www.beliefmedia.com/google-plus-follow-button

function beliefmedia_googleplus_follow_button($atts) {

$atts = shortcode_atts(array(

'id' => '101343022544296051888',

'type' => 'author', /* author | page */

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

'annotation' => 'h', /* h or v or n*/

'align' => 'center',

'p' => 1

), $atts);

if (strripos($atts['id'], 'http') !== false) {

$chunks = explode("/", rtrim($atts['id'], '/'));

$atts['id'] = end($chunks);

}

/* Annotation Type */

switch ($atts['annotation']) {

case ('h'):

$bubble = 'bubble';

break;

case ('v'):

$bubble = 'vertical-bubble';

break;

case ('n'):

$annotation = 'none';

break;

}

/* Height & Container Width */

switch ($atts['size']) {

case ('small'):

$h = '15';

$containerwidth = ($atts['annotation'] != 'h') ? '85' : '135';

break;

case ('medium'):

$h = '20';

$containerwidth = ($atts['annotation'] != 'h') ? '90' : '140';

break;

case ('large'):

$h = '24';

$containerwidth = ($atts['annotation'] != 'h') ? '105' : '145';

break;

}

/* Div will center by default, alternatively float it */

$position = ($atts['align'] == 'center') ? 'align' : 'float';

/* Build Follow Button */

$return = '<div style="' . $position . ': ' . $atts['align'] . '; width: ' . $containerwidth . 'px; display: block;';

if ($atts['align'] == 'center') $return .= ' margin: auto;';

$return .= '">';

$return .= '<div class="g-follow" data-annotation="' . $bubble . '" data-height="' . $h . '" data-href="//plus.google.com/u/0/' . $atts['id'] . '" data-rel="' . $atts['type'] . '"></div>';

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

/* Wrap in paragraph tags for WP */

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

return $return;

}

add_shortcode('googleplusfollow', 'beliefmedia_googleplus_follow_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

The id is your Google+ user id. While it accepts a profile URL you're always better off using the ID in case the profile URL changes format.

type

The type is either author or publisher. If using a page, use the latter.

size

The size of the button is either small, medium, or large.

annotation

The annotation is the count bubble next to the follow button. It can be h (horizontal), v (vertical), or n (none).

align

Alignment can be left, center, or right. Will default to center.

To wrap your button in paragraph tags, use p="1". Paragraph tags will only be applied if the button is centered.

PHP Function

Used outside of WordPress, the following may be used. Google's Platform JavaScript is required.

<?php

Add a Google Plus Follow Button in WordPress with Shortcode

http://www.beliefmedia.com/google-plus-follow-button

function beliefmedia_googleplus_follow_button($id, $args = '') {

$atts = array(

'id' => '101343022544296051888',

'type' => 'author', /* author | page */

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

'annotation' => 'h', /* h or v or n*/

'align' => 'center',

'p' => 1

);

/* Merge $args with $atts */

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

/* If full URL, get ID */

if (strripos($atts['id'], 'http') !== false) {

$chunks = explode("/", rtrim($atts['id'], '/'));

$atts['id'] = end($chunks);

}

/* Annotation Type */

switch ($atts['annotation']) {

case ('h'):

$bubble = 'bubble';

break;

case ('v'):

$bubble = 'vertical-bubble';

break;

case ('n'):

$annotation = 'none';

break;

}

/* Height & Container Width */

switch ($atts['size']) {

case ('small'):

$h = '15';

$containerwidth = ($atts['annotation'] != 'h') ? '85' : '135';

break;

case ('medium'):

$h = '20';

$containerwidth = ($atts['annotation'] != 'h') ? '90' : '140';

break;

case ('large'):

$h = '24';

$containerwidth = ($atts['annotation'] != 'h') ? '105' : '145';

break;

}

/* Div will center by default, alternatively float it */

$position = ($atts['align'] == 'center') ? 'align' : 'float';

/* Build Follow Button */

$return = '<div style="' . $position . ': ' . $atts['align'] . '; width: ' . $containerwidth . 'px; display: block;';

if ($atts['align'] == 'center') $return .= ' margin: auto;';

$return .= '">';

$return .= '<div class="g-follow" data-annotation="' . $bubble . '" data-height="' . $h . '" data-href="//plus.google.com/u/0/' . $atts['id'] . '" data-rel="' . $atts['type'] . '"></div>';

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

/* Wrap in paragraph tags for WP */

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

return $return;

}

Usage:

<?php

/* Default Usage */

echo beliefmedia_googleplus_follow_button($id);

/* Usage with arguments (horizontal) */

$args = array('size' => 'large', 'annotation' => 'h');

echo beliefmedia_googleplus_follow_button($id, $args);

/* Usage with arguments (vertical) */

$args = array('size' => 'small', 'annotation' => 'v');

echo beliefmedia_googleplus_follow_button($id, $args);

Download

No longer available.

■ ■ ■

Download our complimentary 650-page guide on marketing for mortgage brokers. We'll show you exactly how we generate billions in volume for our clients.