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.

The Google Badge (Icon) Generator

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.

<?php

Show a Google+ Static Badge (Icon) in WordPress

http://www.beliefmedia.com/code/wp-snippets/google-static-badge

function beliefmedia_googleplus_icon($atts) {

$atts = shortcode_atts(array(

'id' => '101343022544296051888',

'text' => 'Find me',

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

'align' => 'center',

'p' => 1

), $atts);

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

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

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

}

switch ($atts['size']) {

case ('small'):

$size = '16';

$containerwidth = '135';

break;

case ('medium'):

$size = '32';

$containerwidth = '145';

break;

case ('large'):

$size = '64';

$containerwidth = '110';

break;

}

/* Define container width and alignment.. */

if ($atts['text'] == '') $containerwidth = $size;

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

/* Create Badge */

if ($size != '64') $return = '<div style="' . $position . ': ' . $atts['align'] . '; width: ' . $containerwidth . 'px; display: block;';

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

if ($size != '64') $return .= ' height: ' . $size . 'px; line-height: ' . $size . 'px; text-align:center;">';

$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;">';

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>';

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>';

if (($size == '64') && ($atts['text'] != '')) {

$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>';

} elseif (($size == '64') && ($atts['text'] == '')) {

}

/* Wrap in paragraph tags for WP */

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

return $return;

}

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

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.

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".