Come installare il gadget della pagina fan con tutti gli avatar anche nei blog di Blogger a Visualizzazione Dinamica.
Dopo aver illustrato come visualizzare il widget per la sottoscrizione del canale Youtube anche nei modelli di Blogger cosiddetti Dynamic Views, vediamo come sia possibile mediante un procedimento simile installare anche il Like Box di Facebook vale a dire l'invito a sottoscrivere la nostra pagina fan con visibili gli avatar delle persone che lo hanno già fatto.
Si usa il meccanismo già illustrato nel post su come inserire tutti i plugin di Facebook per i metadati Open Graph, il codice per iFrame ricavato da Facebook Developers e il widget Testo. Riepilogo brevemente come procedere con Facebook. Si va su Facebook Developers e si clicca su Crea Applicazione. Si digita il Titolo e si supera il controllo visivo di una captcha
Si va su Continua e si inserisce due volte il dominio del nostro blog
Si salvano le modifiche e nella parte alta si visualizzerà l'ID della applicazione
Dopo aver copiato l'ID si va su Modello > Modifica HTML e si cerca il codice </head>. Subito sopra a questa riga si incolla questo nuovo blocco
<!-- Facebook Open Graph Start -->
<meta content='parsifal32' property='fb:admins'/>
<meta content='231735323643196' property='fb:app_id'/>
<b:if cond='data:blog.pageType == "item"'>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='URL_LOGO_BLOG' property='og:image'/>
</b:if>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='website' property='og:type'/>
</b:if>
<meta expr:content='"it_IT"' property='og:locale'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<!-- Facebook Open Graph End -->
<meta content='parsifal32' property='fb:admins'/>
<meta content='231735323643196' property='fb:app_id'/>
<b:if cond='data:blog.pageType == "item"'>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='URL_LOGO_BLOG' property='og:image'/>
</b:if>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='website' property='og:type'/>
</b:if>
<meta expr:content='"it_IT"' property='og:locale'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<!-- Facebook Open Graph End -->
dove oltre al nome utente di Facebook va messo l'ID della applicazione creata specificatamente per quel dominio. Si cerca quindi il tag <body> e, subito sotto, si incolla quest'altro codice
<!-- Facebook Open Graph Start -->
<div id='fb-root'/>
<script>
//<![CDATA[
(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/all.js#xfbml=1&appId=231735323643196";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
<!-- Facebook Open Graph End -->
<div id='fb-root'/>
<script>
//<![CDATA[
(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/all.js#xfbml=1&appId=231735323643196";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
<!-- Facebook Open Graph End -->
dove anche in questo caso si sostituisce l'ID della applicazione. Si salva il modello.
È il momento di andare su Modello > Personalizza > Avanzato > Aggiungi CSS e incollare nell'apposito campo questo codice che abbiamo già visto nel caso del widget di Youtube
.text-widget-content {
width: auto;
height: auto;
max-width: 600px;
max-height: 800px;
}
width: auto;
height: auto;
max-width: 600px;
max-height: 800px;
}
per rendere più ampi i limiti delle dimensioni del widget Testo. Si posiziona il cursore dopo l'ultima parentesi graffa e si pigia su Invio. Si va quindi su Applica al blog in alto a destra.
Si accede su Social Plugin Facebook Like Box e si configura il widget inserendo l'URL della nostra pagina ufficiale, mettendo o meno la spunta a Show Header, Show Stream, Show Faces e Show Border. Vanno anche scelti la larghezza del widget e il colore (dark per blog con sfondo scuro).
Si va quindi su Get Code e si sceglie l'applicazione creata per il sito in questione nel caso ne avessimo create più di una. Tra le opzioni presenti si seleziona IFRAME
![codice-like-box-facebook[5]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3pKXUL8KQl770EWN-TL_98iYzP9Zy__RwSJZ_oQwP-xq37O93Rg_-JgeJpo88fFFYUGMglNbqWVTJCYLJzkSaeKkIBmKzs11hERQNYAj4atEbT0o8UGb7F8OvulWYkeE6OrD-N1JPHm0/?imgmax=800 "codice-like-box-facebook[5]")
Si copia il codice e si incolla da qualche parte
Si torna su Bacheca > Layout > Aggiungi un gadget > Base > Testo
e si clicca su Modifica HTML fino a visualizzare Formato RTF. In Sezioni del sito si incolla il codice dell'iFrame appena copiato da Facebook
Se si clicca su Formato RTF si visualizzerà il Like Box anche nella finestra popup
Si va su Salva e si posiziona il gadget con il trascinamento del mouse
Se un lettore posizionerà il mouse sulla sidebar potrà aprire il widget con effetto slide
Solo chi è loggato con un account Facebook e Google potrà però visualizzare i widget inseriti nella sidebar. Si clicca sul titolo per farli rimanere aperti mentre per chiuderli si fa click esternamente.
Graziee! Ho appena aggiunto il like box al mio blog, bellissimoo :)
RispondiEliminaCiao Ernesto, grazie per le preziose informazioni, sono riuscito ad inserire il like box (http://innovazionerurale.blogspot.it/), ma non mi visualizza l'anteprima. Probabilmente Facebook ha apportato delle modifiche, per cui dopo aver creato la app e selezionato get code non appaiono ne la scritta "IFRAME" ne la scritta "DYNAMIC VIEW". Mi sono limitato a copiare cmq il codice, ma senza anteprima non è molto carino. Come posso risolvere? Grazie!
RispondiEliminaLa scritta Dynamic View non la puoi vedere, è il nome del blog che ho usato come test. Devi vedere il nome del tuo blog per selezionare la tua applicazione (o comunque il nome che hai dato alla applicazione). Se non vedi l'Anteprima cliccando all'esterno significa che quanche dato non lo hai inserito correttamente. Mi riferrisco all'anterpima nella pagina del plugin di Facebook e non sul blog
Elimina@#