Wednesday, July 3, 2013

New Google+ badges and follow buttons can be used in Blogger

This Quick-tip introduces the new Google+ plugins that Google released in late June 2013

Recently, Google+ Developers blog announced a vastly improved set of Google+ plugins for use with websites.

Most (all?) of them are not yet available as Blogger gadgets, so you have to get the code from the Google+ resources site, and add it to your blog like you would add any 3rd party code.

The new options include a more "industry-standard" follow on Google+ button, and new badges for Pages, Communities and Hangouts, as seen here. (I've previously explained why you might like to have a G+ community alongside your blog.)

They are configurable (size, dark/light, style, etc) - but  you need to work out how to apply the configuration settings to the code.   That said, I've added them to this site without any configuration (see the top of the sidebar), and the default options appear to work well. And it's not actually as hard as it looks: in general you just follow the pattern of:

  • Changing   https://plus.google.com/{pageId}     to link to the "thing" (Page, Community, Profile) that you are displaying in the badge.
  • Using the "<div class="g-page" data-href="https://plus.google.com/{pageId}"></div>" form of the code, ie the one that's completely inside a "div" statement.
  • Adding extra information to it using "data-"   for example,   "<div class="g-page" data-href="https://plus.google.com/{pageId}" data-layout="landscape" data-width="200">


There is one interesting sentence in the announcement:
"Existing badges will stick around for up to 90 days, giving you time to configure the new version for your website. After 90 days, we'll automatically upgrade any Google+ badges to the new design."
I wonder how that will relate to the Google + gadgets that are available in Blogger's Add-a-gadget function now - maybe they will be automatically be changed too.   (In 90 days ... yeah, right ...)

Share this Article

URL:

HTML link code:

BB (forum) link code:

Subscribe to Blogger-hints-and-tips

FeedBurner will send a confirmation message. Click the verify link in it to start your subscription.

Follow Me on Pinterest Subscribe to Blogger-HAT on Google + RSS subscription icon Follow BloggerHAT on Twitter

No comments:

Post a Comment