Badge google+ responsive

eleumas

Badge google+ responsive

Ciao, avrei la necessita di rendere il badge di google+ responsive. Ho fatto dei tentativi e in teoria ci sarei anche riuscito. Da "ispeziona elemento" di chrome tutto funziona alla grande. Quando incollo la regola CSS nel mio modulo HTML personalizzato di joomla, la regola non viene riconosciuta, come se io non l'avessi mai inserita. L'unica classe che mi viene letta (e che ho commentato per fare le prove) è div#___page_0 la quale pero' mi ristringe il box ma non il contenuto. Qualcuno potrebbe aiutarmi per favore? A seguire il codice che ho sul modulo di joomla.


<html>

<head>

<style>
#widget_bounds {max-width: 100%;}
/* div#___page_0 {max-width: 100%; display: block !important;}*/
</style>

<!-- Posiziona questo tag all'interno del tag head oppure subito prima della chiusura del tag body. -->
<script src="https://apis.google.com/js/platform.js" async defer>
 {lang: 'it'}
</script>


</head>
        
 <body>
    
<!-- Inserisci questo tag nel punto in cui vuoi che sia visualizzato l'elemento widget. -->
<div class="g-page" data-width="315" data-href="//plus.google.com/u/0/110195515620197290798" data-rel="publisher"></div>
  
</body>


</html>

fda

Ciao eleumas,
il modo migliore per rendere responsive il badge di Google Plus è seguire le indicazioni di Google Developers: developers.google.com/+/web/badge/.

Partendo da qui si può fare una piccola modifica di questo tipo:

si inserisce il badge in un div
si fa in modo che il badge prenda la larghezza del div

Questo è il codice da inserire:


<div id="google-badge" style="width: 100%;">
        <!-- Inserisci questo tag nel punto in cui vuoi che sia visualizzato l'elemento widget. -->
        <div class="g-page" data-href="//plus.google.com/u/0/110195515620197290798" data-rel="publisher" data-width="180"></div>
        <!-- Inserisci questo tag dopo l'ultimo tag di widget. -->
        <script type="text/javascript">
                window.___gcfg = {lang: 'it'};

                document.getElementsByClassName('g-page')[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>

Il data-width puoi impostarlo come vuoi, 180 è la minima larghezza indicata da Google, ma se inserisci un valore diverso non cambia nulla. Considera che con questo sistema la larghezza del badge non supererà comunque il limite massimo di 450px.

Altra nota: se re-dimensioni con il mouse la finestra del browser potrebbe sembrare che il badge non sia responsive, ma non è così: fai un refresh della pagina e vedrai.

Le due righe di commento presenti nel codice posso essere eliminate.

Il badge sopra è quello relativo alla pagina di Google+ sviluppata in verticale, ma qualcosa di simile si può fare anche con gli altri badge.

Il codice postato funziona su tutti i siti e non dipende dal CSS né tantomeno dall'eventuale presenza del Bootstrap. L'ho testato su una pagina html responsive, su un sito dinamico in php, su Joomla 2.5 e su Joomla 3: funziona sempre. Mi riservo di testarlo anche su WordPress e Drupal, ma sinceramente non vedo perché non dovrebbe andare.

Procedura per Joomla! 2.5 e 3

Collegati al backend e sincerati di potere inserire script all'interno dell'editor. Per default gli editor come TinyMCE filtrano alcuni elementi tra cui gli script, quindi dovrai rimuovere questo filtro, cosa che puoi fare accedendo all'editor plugin che usi. Attenzione: non filtrare gli script può essere pericoloso se hai un sito multiutente. Accertati che talune operazioni possano essere eseguite soltanto da utenti con adeguati privilegi, ad esempio gli amministratori del sito (super user). Esistono anche plugin di Joomla! che gestiscono l'inserimento di codice via editor in articoli e moduli.
Crea un nuovo modulo del tipo Custom HTML, fai copia e incolla del codice in alto, assegnalo alla posizione dove vuoi che appaia (dipende dal tuo template), pubblica e salva. Nota per sviluppatori: se hai content plugin particolari e non vuoi che questi elaborino il contenuto di questo modulo allora devi impostare Prepare Content su NO (in Basic Options).

Fammi sapere se va.
Francesco

eleumas

Fantastico! Appena ho 5 minuti lo provo. Non so come ringraziarti per l'aiuto che mi dai ogni volta. Spesso mi perdo nelle cose più banali

fda

Grazie a te, non ci avevo mai pensato a doverlo rendere responsive.

eleumas

URCA, funziona! Grazie mille ho provato il badge e va alla grandissima. Sai se esiste qualcosa del genere anche per il badge di facebook?

fda

Ciao eleumas,
come prima quello sopra, anche il badge di Facebook responsive mi manca, ma posta il codice e cerchiamo di capire come si può rimediare (quale badge ti serve?)

Ovviamente prima facciamo un giro nella JED per vedere se qualcuno ha creato un modulo responsive.

eleumas

Quando posso preferisco non usare i moduli. Questo mi permette di aggiornare joomla tranquillamente (almeno spero) e sopratutto posso riutilizzare ciò che imparo in qualsiasi situazione, non solo con joomla A seguire un esempio di badge:


<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/it_IT/sdk.js#xfbml=1&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like-box" data-href=" INSERISCI LINK PAGINA FACEBOOK " data-width="315" data-colorscheme="light" data-show-faces="false" data-header="false" data-stream="true" data-show-border="true"></div>