Show a Google+ Static Badge (Icon) in WordPress

and like us on FB

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.

Show a Google+ Static Badge (Icon) in WordPress

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:

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

… and floating right with [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:

Google+
Find me
on Google+

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

Google+
Find me
on Google+

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):

Google+

Google+

Google+

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.

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

Title: Show a Google+ Static Badge (Icon) in WordPress
Description: Embed the Google Plus static badge (icon) in WordPress with shortcode.
Download: Shortcode (V0.1) | | Plugin Page