Facebook Like Box Responsive

Immagine png del logo di Facebook.

Categoria: JavaScript | Livello: Beginner | Tags: facebook, like box, responsive. Scritto da il

Abstract

Un Like Box di Facebook può mostrare non solo il numero di fan della pagina, ma anche le faccine degli amici e gli ultimi post, oltre ovviamente al pulsante "Mi piace". Quando viene inerito in un blog diviene un ottimo strumento per promuovere la pagina, ma sfortunatamente il box fornito da Facebook ha una dimensione fissa. Questo articolo mostra come ottenere un box responsive che si adatti al div in cui viene inserito.

Come rendere responsive il like box di Facebook
  • Accedi a questa pagina.
  • In Facebook Page URL inserisci l'url della pagina FB a cui si riferisce il box, ad esempio https://www.facebook.com/Malgradopoi.
  • In Width inseirsci un valore numerico qualsiasi, ad esempio 290. Height è facoltativo.
  • Scegli il Color Scheme.
  • Se vuoi visualizzare gli utenti seleziona Show Friends' Faces.
  • Fai clic su Get code e copia il codice da incollare nelle pagine in cui vuoi inserire il box.
  • Il codice che hai così ottenuto include le opzioni che hai selezionato, ma non è ancora responsive. Per rispettare il design responsivo devi inserire un codice simile a quello che segue (vedi box), che modificherai con l'URL della tua pagina e le opzioni che preferisci.

Script per rendere responsive il like box di Facebook



                

Google Plus Badge Responsive

Immagine png del logo di Google Plus.

Categoria: JavaScript | Livello: Beginner | Tags: google plus, badge, responsive. Scritto da il

Abstract

Un badge di Google+ è un box che, collegato al profilo personale o alla pagina, mostra il numero di follower e altre informazioni quali la foto di copertina, consentendo alle persone di trovarci facilmente. Per promuovere la pagina c'è anche il pulsante "Segui". Il badge che fornisce Google ha dimensione fissa, ma può essere reso responsive grazie alle modifiche suggerite in questo articolo.

Come rendere responsive il badge di Google+
  • Accedi a Google con il tuo account e vai su questa pagina.
  • Seleziona l'utente, la funzione "badge" e la disposizione "verticale" o "orizzontale".
  • Dove è scritto max va specificata un valore numerico per la larghezza: puoi inserirne uno qualsiasi poiché il badge è responsive.
  • Scegli il Colore del tema e se attivare la Foto di copertina e il Motto.
  • Specifica la Lingua.
  • Copia il codice così ottenuto e incollalo nelle pagine in cui vuoi inserire il badge.
  • Il codice che hai così ottenuto include le opzioni che hai selezionato, ma non è ancora responsive. Per rispettare il design responsivo devi inserire un codice simile a quello che segue (vedi box), che modificherai con l'URL della tua pagina e le opzioni che preferisci.

Script per rendere responsive il badge di Google Plus