RBA Cash Rate: 4.35% · 1AUD = 0.67 USD · Inflation: 4.1%  
Leading Digital Marketing Experts</strong | 1300 235 433 | Aggregation Enquires Welcome | Book Appointment
1300235433
Example Interest Rates: Home Loan Variable: 5.69% (5.89%*) • Home Loan Fixed: 5.39% (6.59%*) • Fixed: 5.39% (6.59%*) • Variable: 5.69% (5.89%*) • Investment IO: 5.69% (6.48%*) • Investment PI: 5.39% (6.59%*)

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

BeliefMedia Logo
1300235433

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 complimentary 650-page guide on marketing for mortgage brokers. We'll show you exactly how we generate billions in volume for our clients.
Finance Guide, Cropped Top and Bottom
  Timezone: 1 · [ CHANGE ]

RELATED READING

Like this article?

Share on Facebook
Share on Twitter
Share on Linkdin
Share on Pinterest
Picture of Martin Khoury

Martin Khoury

Martin is the Managing Director of BeliefMedia Pty Limited, and Australia's leading Finance Marketing Specialist. He is supported by a team of Australia's finest. Read more about Marty here.

Leave a comment

Call us on 1300 235 433
Enquire Online
Make an Appointment
General Enquires: 1300 235 433 • Support: (02) 8765 8887
The comparison rate is calculated on a secured loan of $150,000 with a term of 25 years with monthly principal and interest payments. WARNING: This comparison rate is true only for examples given and may not include all fees and charges. Different terms, fees or other loan amounts might result in a different comparison rate. Important Information: Applications are subject to credit approval. Full terms and conditions will be included in our loan offer. Fees and charges are payable. Interest rates are subject to change. Offer does not apply to internal refinances and is not transferable between loans. As this advice has been prepared without considering your objectives, financial situation or needs, you should consider its appropriateness to your circumstances before acting on the advice. [ Example Credit Guide Link ]
Facebook Twitter Youtube Linkedin Facebook-f
    
© BeliefMedia | Privacy • Terms • Disclaimer
BeliefMedia Pty Limited