Una versión responsiva del widget de Google plus

En estos momentos me encuentro lidiando con una forma de hacer que el widget de google plus sea responsivo.
Intente con el widget que ofrece blogger, pero no es muy amigable debido a eso gire mi vista hacia el código que ofrece el mismo google+,  a ver si encuentro algo un poco más flexible.

Actualmente el widget viene con su ancho y alto de manera fija y una vez puesto no los puede cambiar. Esto es un inconveniente con el formato que estoy tratando de implementar ya que si lo vemos desde un punto de vista de diseño responsivo no se adapta para nada bien.
Revise el API de google+ y allí  mencionan que podemos usar  gapi.plus.render o gapi.plus.go para usar en conjunto con el widget cuando no es colocado en la página de forma automática. La teoría es que estos métodos son colocados en el momento en que deseamos que el widget sea visible que podría ser cuando la pagina ya esta completamente cargada o después de que un elemento dinámico es creado. La idea sonaba prometedora de no ser porque el código, "aparentemente", solo función con el gapi.plus.go a secas, ni el render ni parámetros ni identificadores funcionan. El código funciona muy bien para el "botón" de google+, pero para el widget de  google+ badge no ( a pesar de que esta documentado en el API ). Por lo menos esto es lo que me ocurrió en la práctica. No descarto la posibilidad de que lo estuviera implementando de la manera incorrecta, pero como debía solucionar el problema continué adelante sin poder usar esa alternativa.
Me tocó buscar otra manera y usar lo que "si" funciona.
Google+ developer proporciona un paso a paso para generar nuestro propio widget aquí: https://developers.google.com/+/web/badge/ pero este proporciona el widget de manera fija. La intención es trabajar con un widget dinámico. Uno de los problemas es que el widget no permite ser modificado una vez que ha sido colocado. Que hacer? como lo mencione opté por la opción de goolge+ para ver si tenia más opciones que la de blogger...y asi era. El JavaScript API nos ofrece:

gapi.plus.render(
  container,
  parameters
)

Esta opción sonaba prometedora ya que al configurar el widget con {parsetags: 'explicit'} este no será creado junto con la carga de la página sino que lo hará en el punto de inserción que le indiquemos. Y este punto podría ser después de extraer el tamaño de la pantalla, de una manera parecida a como lo hacemos con los google ads responsivos:

var wi_ad1 = $(window).width();

$(document).ready(function() {


 var _google_p_badge_width;
 var _google_p_badge_height;

 if (wi_ad1 <= 479) {     
   _google_p_badge_width = 170;
   _google_p_badge_height = 69;
  }
 else if (wi_ad1 <= 767){  
   _google_p_badge_width = 170;
   _google_p_badge_height = 69;
  }
 else if (wi_ad1 <= 980){
   _google_p_badge_width = 170;
   _google_p_badge_height = 69;
  }
 else if (wi_ad1 <= 1200){ 
   _google_p_badge_width = 170;
   _google_p_badge_height = 69;
  }
  
 else {
   _google_p_badge_width = 326;
   _google_p_badge_height = 69;
  }

}); 

De esta manera ya se puede definir el tamaño primero y luego insertar el widget. Desafortunada mente el código de gapi.plus.render no funciono y hasta el momento desconozco el porque.
Realice mis pruebas y verifique que si funciona bien con el "botón" de google+, pero no con el widget badge :( La buena noticia es que aún podemos tomar otra ruta. El código que genéra google+ dev nos da un código para colocar en la página.

<!-- Place this tag where you want the badge to render. -->
<div class="g-plus" data-href="//plus.google.com/x.x.GOOGLEPLUSGENERATEDID.x.x" data-rel="publisher"></div>

<!-- Place this render call where appropriate. -->
<script type="text/javascript">gapi.plus.go();</script>

La variante radica en que el div que contendrá nuestro widget, no es creado todavia. solo creamos un contenedor vacío:

<!-- Place this tag where you want the badge to render. -->
<div class="g_plus_badge_holder"></div>

Como ahora controlamos cuando sera creado el widget esto lo hacemos de la siguiente manera:

$('.g_plus_badge_holder').html('<div class="g-plus" data-width="' + _google_p_badge_width + '" data-href="//plus.google.com/x.x.GOOGLEPLUSGENERATEDID.x.x" data-rel="publisher"></div>').promise().done(function () {
    gapi.plus.go();
});

Así después de identificar nuestro contenedor le adjuntamos el código del widget con los tamaños modificados y es mostrado usando gapi.plus.go(); que si funciona correctamente.

El código final quedaría de esta manera:

var wi_ad1 = $(window).width();

$(document).ready(function() {


 var _google_p_badge_width;
 var _google_p_badge_height;

 if (wi_ad1 <= 479) {     
   _google_p_badge_width = 170;
   _google_p_badge_height = 69;
  }
 else if (wi_ad1 <= 767){  
   _google_p_badge_width = 170;
   _google_p_badge_height = 69;
  }
 else if (wi_ad1 <= 980){
   _google_p_badge_width = 170;
   _google_p_badge_height = 69;
  }
 else if (wi_ad1 <= 1200){ 
   _google_p_badge_width = 170;
   _google_p_badge_height = 69;
  }
  
 else {
   _google_p_badge_width = 326;
   _google_p_badge_height = 69;
  }
  
 $('.g_plus_badge_holder').html( '<div class="g-plus" data-width="' + _google_p_badge_width + '" data-href="//plus.google.com/x.x.GOOGLEPLUSGENERATEDID.x.x" data-rel="publisher"></div>' ).promise().done(function(){   gapi.plus.go();
 });
  

});