Come personalizzare i plugin di Facebook nei blog di Blogger con sfondo scuro.
Facebook offre agli amministratori dei siti la possibilità di installare diversi social plugin di cui ho già illustrato la procedura di implementazione. Si può optare per una installazione rapida senza applicazione specifica per il sito oppure per una installazione completa che offre maggiori funzionalità tra cui quella della Moderazione dei commenti nel modulo di Facebook.
In ogni caso dovrà essere installato nel modello di Blogger il javascript SDK di Facebook. Un problema ulteriore lo hanno i proprietari di siti con sfondo scuro che debbono adattare al loro layout il colore dei plugin di Facebook. In questo post mi occuperò proprio della personalizzazione dei plugin per siti con background scuro. Lo si può fare sia con l'opzione più semplice sia con quella completa.
INSTALLAZIONE DEL JAVASCRIPT SDK NEL MODELLO DI BLOGGER
INSTALLAZIONE SEMPLICE
<body expr:class='"loading" + data:blog.mobileClass'>
Subito sotto a questa si incolla questo codice
<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/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
quindi si salva il modello. Si personalizza la lingua it_IT dei plugin (en_US quella inglese).
INSTALLAZIONE COMPLETA
Per prima cosa si crea una applicazione specifica per il sito e si prende nota del suo ID poi si incolla lo script e i metatag di Facebook. Lo script lo si incolla subito sotto alla riga precedente
<!-- Facebook SDK Start -->
<div id="fb-root"></div>
<script>
//<![CDATA[
window.fbAsyncInit = function() {
FB.init({
appId : 'ID_APPLICAZIONE',
xfbml : true,
version : 'v2.5'
});
};
(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
<!-- Facebook SDK End -->
<div id="fb-root"></div>
<script>
//<![CDATA[
window.fbAsyncInit = function() {
FB.init({
appId : 'ID_APPLICAZIONE',
xfbml : true,
version : 'v2.5'
});
};
(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
<!-- Facebook SDK End -->
dove al posto di ID_APPLICAZIONE si incolla il numero ID di 15 cifre. Successivamente subito sopra alla riga </head> si incollano i metatag di Facebook che sono i seguenti
<!-- Metatag Facebook Inizio -->
<meta content='URL_PAGINA_FACEBOOK' property='article:author'/>
<meta content='ID_AMMINISTRATORE' property='fb:admins'/>
<meta content='ID_APPLICAZIONE' 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'/>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='URL_LOGO_SITO' 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'/>
<!-- Metatag Facebook Fine -->
<meta content='URL_PAGINA_FACEBOOK' property='article:author'/>
<meta content='ID_AMMINISTRATORE' property='fb:admins'/>
<meta content='ID_APPLICAZIONE' 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'/>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='URL_LOGO_SITO' 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'/>
<!-- Metatag Facebook Fine -->
Per la personalizzazione dei parametri colorati di rosso consultate il post linkato nella riga precedente al codice. Per avere la versione scura di un plugin Facebook ha introdotto l'attributo data-colorscheme="dark" che deve essere aggiunto al codice del plugin. Mentre per il plugin in versione chiara l'attributo può essere tralasciato oppure essere data-colorscheme="light".
Ricordo i post in cui ho illustrato la procedura per i singoli plugin:
Non tutti questi plugin rispondono positivamente all'aggiunta dell'attributo data-colorscheme="dark". Ricordo però che questa opzione funziona solo per il testo visualizzato al di fuori dei pulsanti. Per esempio il codice seguente:
<div class="fb-like" expr:data-href="data:post.postUrl" data-layout="standard" data-action="like" data-size="small" data-show-faces="false" data-share="false" data-colorscheme="dark" ></div>
produce questo risultato
con il testo dello stile dark solo leggermente più chiaro di quello dello stile light.
Nessun commento :
Posta un commento
Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy