RBA Cash Rate: 4.35% · 1AUD = 0.67 USD · Inflation: 4.1%  
Leading Digital Marketing Experts | 1300 235 433 | Aggregation Enquires Welcome | Book Appointment
Example Interest Rates: Home Loan Variable: 5.20% (5.24%*) • Home Loan Fixed: 5.48% (6.24%*) • Fixed: 5.48% (6.24%*) • Variable: 5.20% (5.24%*) • Investment IO: 5.78% (6.81%*) • Investment PI: 5.49% (6.32%*)

Add a Google Plus Follow Button in WordPress with 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 Tag: google 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.

1
<?php 
2
/*
3
 Add a Google Plus Follow Button in WordPress with Shortcode
4
 http://www.beliefmedia.com/google-plus-follow-button
5
*/
6
 
7
function beliefmedia_googleplus_follow_button($atts) {
8
 
9
  $atts = shortcode_atts(array(
10
    'id' => '101343022544296051888',
11
    'type' => 'author', /* author | page */
12
    'size' => 'medium', /* small | medium | large */
13
    'annotation' => 'h', /* h or v or n*/
14
    'align' => 'center',
15
    'p' => 1
16
  ), $atts);
17
 
18
  if (strripos($atts['id'], 'http') !== false) {
19
   $chunks = explode("/", rtrim($atts['id'], '/'));
20
   $atts['id'] = end($chunks);
21
  }
22
 
23
  /* Annotation Type */
24
  switch ($atts['annotation']) {
25
    case ('h'):
26
      $bubble = 'bubble';
27
      break;
28
    case ('v'):
29
      $bubble = 'vertical-bubble';
30
      break;
31
    case ('n'):
32
      $annotation = 'none';
33
      break;
34
  }
35
 
36
  /* Height & Container Width */
37
  switch ($atts['size']) {
38
    case ('small'):
39
      $h = '15';
40
      $containerwidth = ($atts['annotation'] != 'h') ? '85' : '135';
41
      break;
42
    case ('medium'):
43
      $h = '20';
44
      $containerwidth = ($atts['annotation'] != 'h') ? '90' : '140';
45
      break;
46
    case ('large'):
47
      $h = '24';
48
      $containerwidth = ($atts['annotation'] != 'h') ? '105' : '145';
49
      break;
50
  }
51
 
52
  /* Div will center by default, alternatively float it */
53
  $position = ($atts['align'] == 'center') ? 'align' : 'float';
54
 
55
  /* Build Follow Button */
56
  $return = '<div style="' . $position . ': ' . $atts['align'] . '; width: ' . $containerwidth . 'px; display: block;';
57
  if ($atts['align'] == 'center') $return .= ' margin: auto;';
58
  $return .= '">';
59
  $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>';
60
  $return .= '</p></div>';
61
 
62
  /* Wrap in paragraph tags for WP */
63
  if ( ($atts['p']) && ($atts['align'] == 'center') ) $return = '' . $return . '';
64
 
65
 return $return;
66
}
67
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

id

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.

p

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.

1
<?php 
2
/*
3
 Add a Google Plus Follow Button in WordPress with Shortcode
4
 http://www.beliefmedia.com/google-plus-follow-button
5
*/
6
 
7
function beliefmedia_googleplus_follow_button($id, $args = '') {
8
 
9
  $atts = array(
10
    'id' => '101343022544296051888',
11
    'type' => 'author', /* author | page */
12
    'size' => 'medium', /* small | medium | large */
13
    'annotation' => 'h', /* h or v or n*/
14
    'align' => 'center',
15
    'p' => 1
16
  );
17
 
18
  /* Merge $args with $atts */
19
  $atts = ($args == '') ? $atts : array_merge($atts, $args);
20
 
21
  /* If full URL, get ID */
22
  if (strripos($atts['id'], 'http') !== false) {
23
   $chunks = explode("/", rtrim($atts['id'], '/'));
24
   $atts['id'] = end($chunks);
25
  }
26
 
27
  /* Annotation Type */
28
  switch ($atts['annotation']) {
29
    case ('h'):
30
      $bubble = 'bubble';
31
      break;
32
    case ('v'):
33
      $bubble = 'vertical-bubble';
34
      break;
35
    case ('n'):
36
      $annotation = 'none';
37
      break;
38
  }
39
 
40
  /* Height & Container Width */
41
  switch ($atts['size']) {
42
    case ('small'):
43
      $h = '15';
44
      $containerwidth = ($atts['annotation'] != 'h') ? '85' : '135';
45
      break;
46
    case ('medium'):
47
      $h = '20';
48
      $containerwidth = ($atts['annotation'] != 'h') ? '90' : '140';
49
      break;
50
    case ('large'):
51
      $h = '24';
52
      $containerwidth = ($atts['annotation'] != 'h') ? '105' : '145';
53
      break;
54
  }
55
 
56
  /* Div will center by default, alternatively float it */
57
  $position = ($atts['align'] == 'center') ? 'align' : 'float';
58
 
59
  /* Build Follow Button */
60
  $return = '<div style="' . $position . ': ' . $atts['align'] . '; width: ' . $containerwidth . 'px; display: block;';
61
  if ($atts['align'] == 'center') $return .= ' margin: auto;';
62
  $return .= '">';
63
  $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>';
64
  $return .= '</p></div>';
65
 
66
  /* Wrap in paragraph tags for WP */
67
  if ( ($atts['p']) && ($atts['align'] == 'center') ) $return = '' . $return . '';
68
 
69
 return $return;
70
}

Usage:

1
<?php 
2
/* Default Usage */
3
echo beliefmedia_googleplus_follow_button($id);
4
 
5
/* Usage with arguments (horizontal) */
6
$args = array('size' => 'large', 'annotation' => 'h');
7
echo beliefmedia_googleplus_follow_button($id, $args);
8
 
9
/* Usage with arguments (vertical) */
10
$args = array('size' => 'small', 'annotation' => 'v');
11
echo beliefmedia_googleplus_follow_button($id, $args);

Download

No longer available.

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

  E. Australia Standard Time [ UTC+10, Default ] [ CHECK TO CHANGE ]

  Want to have a chat?
 

RELATED READING

Like this article?

Share on Facebook
Share on Twitter
Share on Linkdin
Share on Pinterest

Leave a comment