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


quick-tips logo
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 ...)

Thanks for reading: New Google+ badges and follow buttons can be used in Blogger, Sorry, my English is bad:)

Getting Info...

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.