RBA Cash Rate: 4.35% · 1AUD = 0.67 USD · Inflation: 4.1%  
Leading Digital Marketing Experts | 1300 235 433 | Aggregation Enquires Welcome | Book Appointment

Embed a Google+ Badge on Your Website With WordPress Shortcode or PHP

Embed a Google+ Badge on Your Website With WordPress Shortcode or PHP

A Google Plus badge is a feature rich way of converting visitors over to your Google Plus personal profile, page, or community. The badge will permit logged in users to add you to a circle directly from your website. The Google Page badge will make your website eligible for Google+ Direct Connect (enabling a feature in Search that'll permit a user to add you to a circle).

Note: Google+ is now deprecated. The post remains as a reference only.

While Google have a tool to manufacture the necessary code, shortcode gives the option of very easily effecting changes globally. It also provides your authors with a more uniform way of adding the feature.

This article will provide you with the necessary code to add either a Google Badge onto your WordPress website with shortcode.

The Result

The badge we use for BeliefMedia (a page we've never posted to) is rendered with the shortcode of [googleplusbadge landscape="1" id="101664805814849068242" type="page"]. The result:

[googleplusbadge landscape="1" id="101664805814849068242" type="page"]

The shortcode of [googleplusbadge id="101343022544296051888"] will display my personal profile in the (default) portrait mode.

[googleplusbadge id="101343022544296051888"]

The same profile in landscape looks like this:

[googleplusbadge id="101343022544296051888" landscape="1"]

Note that while a page profile badge presents the +1 option, the personal profile badge does not.

To demonstrate the dark skin, we'll reference our neglected Flight Plus Page with the shortcode of [googleplusbadge id="112861932260007740384" width="273" theme="dark" type="page"]. The result:

[googleplusbadge id="112861932260007740384" width="273" theme="dark" type="page"]

Not very pretty! You may omit the tagline with the shortcode of tagline="0".

You may include a community badge with the shortcode of [googleplusbadge landscape="1" id="115758385206378551362" type="community"]. The result:

[googleplusbadge landscape="1" id="https://plus.google.com/communities/115758385206378551362" type="community"]

Note that the page type attribute of community must be defined if the badge is not for a personal or brand profile.

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.

1
<?php 
2
/*
3
 Embed a Google+ Badge on Your Website With WordPress Shortcode or PHP
4
 http://www.beliefmedia.com/google-plus-badge
5
*/
6
 
7
function beliefmedia_googleplus_badge($atts) {
8
 
9
  $atts = shortcode_atts(array(
10
    'id' => '101343022544296051888',
11
    'type' => 'person', /* person | page | community */
12
    'width' => '300',
13
    'theme' => 'light', /* 0 - light, 1 - dark */
14
    'tagline' => 1,
15
    'photo' => 1,
16
    'width' => '300', /* data-width */
17
    'landscape' => 0, /* 1 - Landscape, 0 - Portrait */
18
    'align' => 'center',
19
    'p' => 1,
20
 
21
    /* Communities */
22
    'owners' => 'false' /* true | false */
23
  ), $atts);
24
 
25
  if (strripos($atts['id'],'http') !== false) {
26
   $id = $chunks = explode('/', rtrim($atts['id'], '/'));
27
   $atts['id'] = end($chunks);
28
  }
29
 
30
  $url = ($atts['type'] == 'community') ? 'https://plus.google.com/communities' :  'http://plus.google.com/u/0';
31
  $pagetype = ($atts['type'] == 'person') ? 'author' : 'publisher';
32
 
33
  /* Create Badge */
34
  $return = '<div style="align: ' . $atts['align'] . '; width: ' . $atts['width'] . 'px; margin: auto;">
35
<div class="g-' . $atts['type'] . '" data-href="' . $url . '/' . $atts['id'] . '" data-width="' . $atts['width'] . 'px"';
36
  if ($atts['theme'] == 'dark') $return .= ' data-theme="dark"';
37
  if ($atts['landscape']) $return .= ' data-layout="landscape"';
38
  if ($atts['type'] == 'community') $return .= ' data-showowners="' . $owners . '"';
39
  if ((!$atts['tagline']) && (!$atts['landscape'])) $return .= ' data-showtagline="false"';
40
  if ((!$atts['photo']) && (!$atts['landscape'])) $return .= ' data-showcoverphoto="false"';
41
  if ($atts['pagetype'] != 'community') $return .= ' data-rel="' . $atts['pagetype'] . '"';
42
  $return .= '></div>
43
</div>';
44
 
45
  /* Wrap in paragraph tags for WP */
46
  if ($atts['p']) $return = '' . $return . '';
47
 
48
 return $return;
49
}
50
add_shortcode('googleplusbadge', 'beliefmedia_googleplus_badge');

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

There's a large number of attributes but they should be considered 'options'. Set your default values so your preferred badge can be rendered with just googleplusbadge.

id

The id is the ID or URL for your personal profile, page, or community.

type

The type is either person, page, or community. It must be defined.

width

The width of your badge. You may alter the width to between 180-450 pixels in portrait mode, and 273-450 pixels in landscape mode.

theme

The theme is either light or dark. It is light be default.

tagline

The tagline in portrait mode can be removed with tagline="0".

photo

The photo can be removed with photo="0" (not very reliable in our tests).

landscape

Use landscape="1" for landscape mode. Defaults to portrait.

align

Set the alignment of the div container by way of align="center" (default).

p

To wrap the badge in paragraph tags (the default behaviour) use p="1". If you choose not to use them, use p="0".

owners

For community pages you may list the page owners with the attribute of owners="true".

PHP Function

Used outside of WordPress, the following may be used. The platform.js code is required.

1
<?php 
2
/*
3
 Embed a Google+ Badge on Your Website With WordPress Shortcode or PHP
4
 http://www.beliefmedia.com/google-plus-badge
5
*/
6
 
7
function beliefmedia_googleplus_badge($args = '') {
8
 
9
  $atts = array(
10
    'id' => '101343022544296051888',
11
    'type' => 'person', /* person | page | community */
12
    'width' => '300',
13
    'theme' => 'light', /* 0 - light, 1 - dark */
14
    'tagline' => 1,
15
    'photo' => 1,
16
    'width' => '300', /* data-width */
17
    'landscape' => 0, /* 1 - Landscape, 0 - Portrait */
18
    'align' => 'center',
19
    'p' => 1,
20
 
21
    /* Communities */
22
    'owners' => 'false' /* true | false */
23
  );
24
 
25
  /* Merge $args with $atts */
26
  $atts = ($args == '') ? $atts : array_merge($atts, $args);
27
 
28
  if (strripos($atts['id'],'http') !== false) {
29
   $id = $chunks = explode('/', rtrim($atts['id'], '/'));
30
   $atts['id'] = end($chunks);
31
  }
32
 
33
  $url = ($atts['type'] == 'community') ? 'https://plus.google.com/communities' :  'http://plus.google.com/u/0';
34
  $pagetype = ($atts['type'] == 'person') ? 'author' : 'publisher';
35
 
36
  /* Create Badge */
37
  $return = '<div style="align: ' . $atts['align'] . '; width: ' . $atts['width'] . 'px; margin: auto;">
38
<div class="g-' . $atts['type'] . '" data-href="' . $url . '/' . $atts['id'] . '" data-width="' . $atts['width'] . 'px"';
39
  if ($atts['theme'] == 'dark') $return .= ' data-theme="dark"';
40
  if ($atts['landscape']) $return .= ' data-layout="landscape"';
41
  if ($atts['type'] == 'community') $return .= ' data-showowners="' . $owners . '"';
42
  if ((!$atts['tagline']) && (!$atts['landscape'])) $return .= ' data-showtagline="false"';
43
  if ((!$atts['photo']) && (!$atts['landscape'])) $return .= ' data-showcoverphoto="false"';
44
  if ($atts['pagetype'] != 'community') $return .= ' data-rel="' . $atts['pagetype'] . '"';
45
  $return .= '></div>
46
</div>';
47
 
48
  /* Wrap in paragraph tags for WP */
49
  if ($atts['p']) $return = '' . $return . '';
50
 
51
 return $return;
52
}
53
 
54
/* Platform JS */
55
function beliefmedia_google_platformjs() {
56
 echo '<script src="https://apis.google.com/js/platform.js" async defer></script>';
57
}
58
 
59
/* Usage */
60
beliefmedia_google_platformjs();
61
echo beliefmedia_googleplus_badge();

Attributes should be passed to the function in the arguments array.

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.

  AUS Eastern Standard Time (California)

  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