Australia's Leading Digital Marketing Experts. T. 1300 235 433  |  Aggregation Enquires Welcome

Show a Google+ Static Badge (Icon) in WordPress

This code is provided as a precursor to an article on our blog that'll show you how to embed a Google+ badge on your website. Google's online tool is designed to build a badge or static icon, and it's the latter feature that we're publishing as a snippet because of its simplicity and unlikely use.

Note: Google+ is now deprecated. Article retained for information purposes only.

Show a Google+ Static Badge (Icon) in WordPress

The badge is a little redundant for most people. It's essentially does nothing more than generate the necessary HTML to display an image... and little else. Simplicity aside - since Google provides the feature, we'll provide the shortcode.

The Result

The badge comes in three flavors: small, medium, and large. There's an option to provide a small amount of text beside the icon (or above if you're using the large icon). Whatever text you use, Google will proceed it with "on Google+", so we've honored that in our shortcode.

The small badge can be displayed as follows: [googleplusicon size="small"]. The result:

[googleplusicon size="small"]

The medium badge (default in our shortcode) can be displayed with [googleplusicon]. The result:

[googleplusicon]

... and floating right with [googleplusicon align="right"]:

[googleplusicon align="right"]

For the remaining examples I'll use the large icon and reference the Internoetics Google+ page rather than my personal profile. Shortcode of [googleplusicon id="112685536685519947306" size="large"] will display the following:

[googleplusicon id="112685536685519947306" size="large"]

... and floating to the left with [googleplusicon id="112685536685519947306" size="large" align="left"]

[googleplusicon id="112685536685519947306" size="large" align="left"]

With all three cases - small, medium, and large - the text can be altered or removed altogether. [googleplusicon id="112685536685519947306" size="large" text=""] will return the following (in all three sizes):

[googleplusicon id="112685536685519947306" size="large" text=""]

[googleplusicon id="112685536685519947306" size="medium" text=""]

[googleplusicon id="112685536685519947306" size="small" text=""]

It's the last few examples that demonstrates the simplicity of the service Google offers - a linked image. If you're smart enough to use shortcode you may want to simply create your own function or simply link to your own image. Google's option obviously exists for those without the necessary skills. The advantage of shortcode, of course, comes from making global changes to the icon if the need ever presents itself. Additionally, you will always display the latest icon should Google decide to update it.

The Shortcode Function

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
 Show a Google+ Static Badge (Icon) in WordPress
4
 http://www.beliefmedia.com/code/wp-snippets/google-static-badge
5
*/
6
 
7
function beliefmedia_googleplus_icon($atts) {
8
 
9
  $atts = shortcode_atts(array(
10
    'id' => '101343022544296051888',
11
    'text' => 'Find me',
12
    'size' => 'medium', /* small | medium | large */
13
    'align' => 'center',
14
    'p' => 1
15
  ), $atts);
16
 
17
  if (strripos($atts['id'], 'http') !== false) {
18
   $chunks = explode("/", rtrim($atts['id'], '/'));
19
   $atts['id'] = end($chunks);
20
  }
21
 
22
  switch ($atts['size']) {
23
    case ('small'):
24
      $size = '16';
25
      $containerwidth = '135';
26
      break;
27
    case ('medium'):
28
      $size = '32';
29
      $containerwidth = '145';
30
      break;
31
    case ('large'):
32
      $size = '64';
33
      $containerwidth = '110';
34
      break;
35
  }
36
 
37
  /* Define container width and alignment.. */
38
  if ($atts['text'] == '') $containerwidth = $size;
39
  $position = ($align == 'center') ? 'align' : 'float';
40
 
41
  /* Create Badge */
42
  if ($size != '64') $return = '<div style="' . $position . ': ' . $atts['align'] . '; width: ' . $containerwidth . 'px; display: block;';
43
  if ( ($atts['align'] == 'center') && ($size != '64') ) $return .= ' margin: auto;';
44
  if ($size != '64') $return .= ' height: ' . $size . 'px; line-height: ' . $size . 'px; text-align:center;">';
45
  $return .= '<a href="https://plus.google.com/' . $atts['id'] . '" rel="publisher noopener noreferrer" target="_top" style="text-decoration:none; display:inline-block; color:#333; text-align:center; font:13px/16px arial,sans-serif; white-space:nowrap;">';
46
  if ( ($size != '64') && ($atts['text'] != '') ) $return .= '<span style="font-weight:bold; margin-right:3px; color:#333; vertical-align:baseline;">' . $atts['text'] . '</span><span style="margin-right:13px; vertical-align:baseline;"> on</span>';
47
  if ($size != '64') $return .= '<img style="vertical-align:middle;" src="//ssl.gstatic.com/images/icons/gplus-' . $size . '.png" alt="Google+" style="border:0; width:' . $size . 'px; height:' . $size . 'px;"/></a></div>';
48
 
49
  if (($size == '64') && ($atts['text'] != '')) {
50
    $return .= '<div style="width: ' . $containerwidth . 'px; ' . $position . ': ' . $atts['align'] . '; text-align: center; display: block; margin: auto;"><img style="vertical-align:middle;" src="//ssl.gstatic.com/images/icons/gplus-' . $size . '.png" alt="Google+" style="border:0; width:' . $size . 'px; height:' . $size . 'px;"/></a><span style="font-weight:bold; text-align: center; color:#333;">' . $atts['text'] . '</span><span style="text-align: center; color:#333;">on Google+</span></div>';
51
      } elseif (($size == '64') && ($atts['text'] == '')) {
52
    $return .= '<div style="width: ' . $containerwidth . 'px; ' . $position . ': ' . $atts['align'] . '; text-align: center; display: block; margin: auto;"><img style="vertical-align:middle;" src="//ssl.gstatic.com/images/icons/gplus-' . $size . '.png" alt="Google+" style="border:0; width:' . $size . 'px; height:' . $size . 'px;"/></a></div>';
53
  }
54
 
55
  /* Wrap in paragraph tags for WP */
56
  if ($atts['p']) $return = '' . $return . '';
57
 
58
 return $return;
59
}
60
add_shortcode('googleplusicon', 'beliefmedia_googleplus_icon');

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 either the Google profile/page ID or URL of your page (ending in the profile ID).

text

Our text defaults to "Find me". You can alter this by using something like text="Connect with me". Google will add "on Google+" to whatever you provide. If you don't want text, remove it completely from the shortcode function or use text="".

size

The size of the icon. Either small, medium, or large.

align

The alignment was added by us. The image and code is wrapped in a div tag that can be aligned as required. Alter the CSS in the function (or remove it) if need be.

p

By default we'll wrap the icon in paragraph tags. This is to mitigate the handling of p tags with shortcodes. To disable, use p="0".

Considerations

  • When we port code over from Internoetics we normally rewrite it. Not with this one. It could do with some TLC.

Download

Download removed.

Like this article?

Share on facebook
Share on Facebook
Share on twitter
Share on Twitter
Share on linkedin
Share on Linkdin
Share on pinterest
Share on Pinterest

Leave a comment