How to make feedback for Google Plus more convenient?

Question

The Google Plus icon is now automatically responding to width changes: https://developers.google.com/+/plugins/badge/

Our new website design uses Bootstrap for a flexible layout, how can we make it responsive?

Here is our current pass code:

<!-- Place this tag where you want the badge to render. --> <div class="g-plus" data-width="230" data-href="//plus.google.com/102018846923934084444" data-rel="publisher"></div> <!-- Place this tag after the last badge tag. --> <script type="text/javascript"> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> 

As you can see, the default width is 230 pixels. Kinda was puzzled by how to do this cleanly?

Thanks!

Answer 1

It worked for me. If we have only one badge designated g-person.

 <div id="google-badge" style="width: 100%"> <!-- Place this tag where you want the widget to render. --> <div class="g-person" data-href="//plus.google.com/104771303799616655833" data-rel="author" data-width="180"></div> <!-- Place this tag after the last widget tag. --><script type="text/javascript"> window.___gcfg = {lang: 'de'}; // just put this in here document.getElementsByClassName('g-person')[0].setAttribute('data-width', document.getElementById('google-badge').clientWidth); (function () { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> </div> 

Answer 2

Instead of using the widget, you can use the “static” icon option, which basically is just a link and an image. The widget code does not listen for updates to its attributes after rendering. In addition, the height and width of the icon widget have limitations that are likely to cause the icon to not display depending on how the width / height was calculated in the flexible layout.

You will lose dynamic functionality with a static icon, as people can immediately add you to a circle without navigation, but it offers you more control over the layout.

Answer 3

Here is what I did ...

Using the bootstrap swap classes, I created several icons that appear depending on what mode the browser is in (for example, desktop, tablet or phone).

Twitter Bootstrap Scaffolding

It worked!