Switching to pure HTML for Google+ badge, +1, and Share

As you may have noticed, Google+ has been pushing to an updated approach to rendering the +1 and share buttons. I for one have been a guilty party and have needed to update my +1 and share links on my blog and figured I would share what I did, the change is super minimal.

Identifying the old buttons

For my +1 buttons, I was using the <g:plusone … /> syntax.  The code looked like this:

<g:plusone size="small" href="<?php the_permalink() ?>"></g:plusone>

For my share links, I was using the <g:plus … /> syntax.  The code looked like this:

<g:plus action="share" annotation="bubble"></g:plus>

Finally, I updated my badge widget.  The existing code was as follows:

<g:plus href="https://plus.google.com/109716647623830091721" width="300" height="69" rel="author"></g:plus>

So, the first step I needed to do was to identify all of the places in my code where this was occurring, a quick view source and search through my WordPress editor identified the spots where the changes should be made. Next, it’s time to update to the new syntax.

Updating to the new syntax

You might notice that the generators on our developer site now render the HTML by default. This is because we’re encouraging developers to use a div approach, which is more conventional in HTML, when using the +1, Share, and Badge widgets. To generate the updated widget code, I used the generator to quickly update my buttons.  The following changes are the relevant parts.

+1

I have switched my +1 code to this:

<div class="g-plusone" data-size="medium" data-href="http://test"></div>

Share

I have switched my share buttons to be as follows:

<div class="g-plus" data-action="share" data-annotation="bubble"></div>

Badge

I have switched my badge to the following syntax:

<div class="g-plus" data-href="https://plus.google.com/109716647623830091721" data-width="300" data-height="69" rel="author"></div>

And that was all there was to it!

Conclusions and next steps

I recommend that you update your own +1, Badge, and Share widgets to the HTML approach.  This will be a compatible and standardized approach to rendering these widgets so it will be better for your users and for you moving forward.