Come aggiungere i metatag e il javascript SDK di Facebook a Blogger.

Nell'articolo precedente abbiamo visto come creare una applicazione Facebook per un sito web che ci permetterà di avere l'ID della applicazione da utilizzare insieme agli altri dati per implementare i metatag di Facebook.  

Si tratta in sostanza di righe di codice che verranno rilevate da Facebook quando verrà condiviso un contenuto del nostro sito. Vediamo nel dettaglio come procedere per un blog su Blogger. Oltre all'ID della applicazione occorre anche avere l'ID del proprietario del Profilo Facebook e l'indirizzo dello stesso profilo. Inoltre bisogna avere caricato online una immagine di default da mostrare come miniatura qualora non fosse presente nessuna immagine nel post.

AZIONI PROPEDEUTICHE ALLA INSTALLAZIONE DEI METATAG

1) PREFERENZE DI RICERCA

Per i blog su Blogger prima di procedere dobbiamo essere sicuri di avere attivato le Preferenze di Ricerca.  Si va su Impostazioni > Preferenze di ricerca > Metatag > Descrizione > Modifica

Elenco dei tag dei dati per i layout di Blogger.

Esistono molti tag di Blogger utilizzati per includere porzioni specifiche di dati nel modello. Essi vengono tutti formattati come <data:name/> o <data:name1.name2/>, dove name è il nome della specifica porzione di dati che si desidera utilizzare. Nell'esempio citato name1.name2, il tag name2 è un elemento specifico in un insieme di dati name1, ad esempio blog.pageTitle.

In molti articoli vengono usate delle etichette per Blogger che ormai sono diventate consuete anche per chi non è un esperto di codici. Faccio l'esempio di data:title che avrete certamente visto scorrendo il codice del vostro blog oppure data:label.name. Queste etichette non fanno parte del linguaggio HTML e funzionano solo su Blogger o per meglio dire solo su alcune sezioni di Blogger.

Come scaricare le copertine per gli album di musica MP3.

In un precedente articolo abbiamo visto come si possa aggiungere o modificare la copertina a un singolo brano MP3 e come si possano aggiungere i metadati o tag ID3 a un brano musicale o a tutta una cartella di MP3. A questo scopo si utilizza il programma gratuito MP3Tag.

Se per riprodurre le nostre playlist musicali utilizziamo Windows Media Player o iTunes solitamente sono proprio questi programmi a caricare le copertine giuste per i vari album delle nostre collezioni. Non sempre però questa operazione riesce. Vediamo come si possa risolvere utilizzando un programma gratuito che cerchi in rete le copertine degli album. Per poterlo fare però bisogna avere organizzato la nostra musica in modo ottimale. Bisogna cioè racchiudere in uno stessa cartella i file MP3 dei singoli album e aggiungere i tag ID3 a ciascun brano vale a dire tra l'altro titolo e nome dell'album. L'operazione di aggiungere i metadati può essere noiosa ma relativamente semplice se si utilizza il già citato MP3Tag.

Come mostrare i pulsanti ufficiali di condivisione di Blogger solo nei post.

A seguito di una domanda inserita in commento che ho appena letto vado a pubblicare un instant post di risposta perché illustrare in un commento la procedura per nascondere i pulsanti ufficiali di condivisione di Blogger sarebbe stato oltremodo complesso. I bottoni di Blogger non piacciono molto agli utenti perché piccoli e poco colorati da risultare non molto visibili. Per attivarli si va su Layout > main >  Post sul blog > Modifica  e si mette la spunta su Mostra i pulsanti per la condivisione quindi si va in basso su Salva.

I bottoni di condivisione verranno mostrati di default in tutte le pagine del blog

Come mostrare un widget di Blogger solo nei post ma non nelle pagine statiche.

In un articolo di poco fa abbiamo utilizzato l'operatore logico OR per creare una condizione che servisse a mostrare un elemento di Blogger solo in due o più pagine e in questo post vedremo invece come visualizzare in widget solo negli articoli ma non nelle pagine statiche.

La costruzione di questa condizione non è solo una esercitazione a scopo euristico ma ha anche una sua precisa utilità pratica visto che questa personalizzazione mi è stata prospettata più volte nei commenti. Prima della introduzione dei nuovi operatori per inserire questa condizione si dovevano incollare una sopra all'altra due diverse condizioni. 

Come mostrare un widget solo in due o più pagine di Blogger.

Gli utenti di Blogger conoscono la grande potenza dei tag condizionali che ci danno la possibilità di mostrare un widget, un menù, un CSS o anche solo un elemento del layout in un tipo particolare di pagine o anche in una singola pagina.

Recentemente le espressioni utilizzabili per impostare le condizioni sono state ampliate anche se non sempre è facile trovare la sintassi giusta per impostarle. Per esempio non sono riuscito a trovare una espressione per mostrare un widget solo nei post che abbiano una determinata etichetta. È stato invece piuttosto semplice trovarla per mostrare un elemento in due o più pagine date. 

Aggiunte nuove espressioni ai tag condizionali di Blogger.

Due giorni fa Blogger Buzz, il blog ufficiale di Blogger, ha pubblicato un articolo con una doppia valenza. La prima e più importante è che dopo diversi mesi sono state introdotte delle novità nella piattaforma Blogger. Questo significa come del resto era ampiamente prevedibile che Google non ha nessuna intenzione di smettere di aggiornare Blogger. Si tratta di una importante rassicurazione per chi usa questa piattaforma e su cui ha investito tempo, energie e creatività.

In seconda battuta vengono introdotte delle nuove espressioni che permetteranno più flessibilità agli sviluppatori e anche agli stessi blogger. I più esperti tra voi avranno certamente sentito parlare dei tag condizionali. Questi strumenti adesso sono stati ampliati e questo ci permetterà di impostare delle condizioni in modo più semplice o addirittura di crearne delle nuove che prima erano impossibili.

Come visualizzare un elemento o un CSS solo nella versione desktop o solo in quella mobile di Blogger.

La piattaforma Blogger mette a disposizione degli webmaster quelli che vengono definiti i tag condizionali per selezionare la tipologia di pagine in cui attivare un determinato codice. Si può trattare di un codice di un widget inserito in una sidebar o di un pulsante installato nel modello. Non mi risulta esista un elenco ufficiale di Blogger di questi tag o se esiste non sono riuscito a trovarlo. I tag condizionali elencati nel post appena linkato sono frutto della mia esperienza personale.

Blogger dà anche la possibilità di personalizzare sia la versione mobile sia la versione desktop operando nello stesso template. Proprio cercando di ottimizzare questo sito mi sono trovato di fronte a un problema di cui voglio condividere la soluzione che ho trovato. Una linea orizzontale inserita sotto il titolo del post, il nome dell'autore e le etichette dell'articolo con le distanze calcolate per la versione desktop in quella mobile mi si posizionava invece proprio sopra il titolo. Quello che si dovrebbe fare in questi casi è creare una condizione per cui i CSS utilizzati valgano solo per la versione desktop. Nei template di Blogger però è presente solo il tag condizionale per mostrare un elemento solo nella versione mobile che è il seguente 

Le regole SEO per pubblicare un post su Blogger.

Avere un sito con buoni contenuti non è sufficiente per posizionarlo al meglio nei risultati dei motori di ricerca. Insieme alla validità e unicità di quello che si è scritto bisogna seguire anche delle regole che lo stesso Google, il motore di ricerca per antonomasia, ha codificato e reso disponibili agli webmaster. Gli utenti della piattaforma Blogger hanno dei vantaggi indubbi dal pubblicare in una piattaforma di proprietà dello stesso Google ma è bene seguire lo stesso tutte le procedure della Guida SEO.

Le regole riguardano tutti gli aspetti del confezionamento del post dal titolo alle immagini, dai link alle parole chiave, dalla metadescrizione ai link interni. Le attenzioni costanti vanno riservate ai seguenti aspetti di carattere generale che valgono per ogni post:

1. Occorre pubblicare articoli sempre con titoli diversi, accurati, brevi ma descrittivi
2. Usare solo link di testo per i vecchi post e non collegare pagine interne a immagini
3. Collegare gli articoli già pubblicati in modo da avere contemporaneamente due vantaggi: quello di mantenere freschi i vecchi post e di aumentare l'autorevolezza dei nuovi
4. È opportuno creare una Sitemap per i motori e una Mappa del sito per i lettori
5. Creare del contenuto originale e evitare errori grammaticali e ortografici
6. Usare parole chiave di diverso approccio cognitivo vale a dire query tecniche insieme a parole accessibili anche ai profani. Google indicizzerà i post sia a beneficio di lettori specialisti del tema sia in funzione di ricerche basate su termini più semplici.
7. Usare un testo di ancoraggio ottimizzato, descrittivo e conciso.
8. Modificare i nomi dei file immagine in modo che siano brevi e pertinenti.

Come eliminare gli inestetismi creati dai tag condizionali di Blogger.

I tag condizionali sono uno degli strumenti più potenti per modificare i template di Blogger. Permettono infatti di scegliere in quale tipologie di pagine visualizzare un determinato elemento che può essere un widget o anche solo un semplice banner. Vengono quindi imposti dei vincoli che possono essere positivi o negativi. Si può cioè per esempio imporre che un gadget venga visualizzato solo in Homepage oppure che venga visualizzato ovunque escluso proprio la homepage.

L'utilizzo dei tag condizionali è illustrato dettagliatamente nell'articolo linkato all'inizio. In sintesi ci sono due tipologie di intervento a seconda se si tratti di un widget oppure di un elemento del layout che potrebbe essere per esempio un annuncio pubblicitario. In ogni caso si deve entrare nel modello e inserire una riga all'inizio e uno riga alla fine dell'elemento oppure subito dopo e subito prima dei tag b:includable.

Mostrare un tooltip su più linee con il tag Title.

Nell'articolo precedente abbiamo visto come sia possibile inserire automaticamente i tag Title e Alt nel codice delle immagini postate nel blog e in questo post approfonderemo ulteriormente le potenzialità del tag Title che è quello che viene definito un attributo del link e che viene opzionalmente inserito nei collegamenti ipertestuali di testo, di immagini o di altri oggetti.

La particolarità del tag Title è che mostra in un tooltip il testo che vi viene digitato quando si passa sopra al link con il cursore. Questo avviene sia per i collegamenti testuali sia per le immagini.

Il codice HTML usato per un collegamento di testo con tag Title è il seguente

<a href="URL_LINK" title="Descrizione del link">Testo di ancoraggio</a>

Come inserire i tag Alt e Title automaticamente nelle immagini di Blogger.

Google qualche tempo fa rilasciò le linee guida per l'ottimizzazione SEO delle pagine web con le istruzioni di come debba essere il titolo, il corpo del post, i link interni e esterni e come debbono essere inserite le immagini. Relativamente alle foto pubblicate negli articoli rivestono particolare importanza il tag Alt e Title. Soprattutto il primo è considerato essenziale dal motore di ricerca per antonomasia in quanto mostra del testo alternativo quando il browser non riesce a caricare la foto.

In effetti Alt rappresenta proprio l'acronimo di Alternative Text. Questi tag nell'HTML si inseriscono in modo molto semplice insieme all'URL della immagine

Come usare i tag condizionali nel modello di Blogger.

Il supporto di Blogger ha una pagina specifica in cui viene spiegato un po' troppo sbrigativamente ma in italiano quale sia la sintassi dei tag dei gadget per i layout. In questo contesto vengono illustrati anche i tag IF / ELSE per visualizzare un determinato contenuto in alcuni punti del sito ma non in altri. Queste condizioni sono fondamentali per esempio per mostrare un bottone solo nei post ma non in Homepage o per visualizzare un widget solo nelle pagine statiche. Mi sono già occupato meno di un anno fa del tema delle condizioni per Blogger ma forse è il caso di pubblicare un nuovo articolo per ampliare e approfondire il discorso.

Intanto dobbiamo dire che questi tag non sono linguaggio HTML o CSS ma funzionano solo se vengono inseriti in un modello di Blogger e non vengono invece rilevati se sono inseriti in una qualsiasi altra pagina web. La cosa interessante è che si possono creare dei tag condizionali che non facciano parte dell'elenco dei più usati e conosciuti. La sintassi dei tag b:if e b:else è la seguente

Come personalizzare la visualizzazione dei blog di Blogger con i dispositivi mobili.

Come è noto Blogger ha dato ai suoi utenti la possibilità di usare i tag condizionali per scegliere quali elementi mostrare in un determinato tipo di pagine o in un dato post. Da più di due anni esiste anche la versione mobile di tutti i blog su Blogger. Inoltre il traffico proveniente da dispositivi mobili, sebbene ancora nettamente inferiore a quello desktop per la maggior parte dei blog, sta crescendo a ritmi vertiginosi. Nasce quindi l'esigenza di creare un sito che abbia un aspetto diverso a seconda che venga aperto dal computer o dal tablet.

La versione mobile di Blogger funziona molto bene con i modelli ufficiali di Blogger mentre non è così per quelli anche solo parzialmente personalizzati. Di default viene mostrata nella versione mobile solo la colonna centrale dell'area del post e quindi i gadget posizionati nelle sidebar non si vedono a meno che non si attivi la visualizzazione desktop anche da cellulare.

I tag condizionali e i domini localizzati .it in Blogger.

I più esperti dei lettori sapranno certamente che si può mostrare un widget o un qualunque elemento solo in una determinata tipologia di pagine, per esempio le pagine statiche, o anche solo in un singolo post. Esiste anche l'opzione inversa che ci consente di visualizzare un elemento in tutto il blog escluso in alcuni tipi di pagine. Questi tag condizionali sono tipici di Blogger e funzionano solo se inseriti in un modello di questa piattaforma.

Il secondo tag da incollare nel template è sempre </b:if> mentre il primo varia a seconda della condizione che vogliamo inserire. Si può anche usare il tag  <b:else/> per mostrare un oggetto alternativo se la condizione impostata risulta falsa.

La sintassi generica in questo caso è

<b:if cond='condition'>
   [contenuto da visualizzare se la condizione è vera]

<b:else/>

   [contenuto da visualizzare se la condizione è falsa]
</b:if>

Come impedire l'indicizzazione da parte di Google di contenuti del nostro blog.

L'obiettivo primario dei blogger è quello di farsi indicizzare i post il più rapidamente possibile da Google che è il principe dei motori di ricerca ed è quello che porta la più importante percentuale di traffico.

Vediamo però le cose da un altro punto di vista. Ci possono per esempio essere dei contenuti del blog che non vogliamo assolutamente che vengano indicizzati. Si potrebbe trattare di dati personali che pur utili ai lettori non vogliamo che appaiano nelle ricerche. Un altro caso potrebbe essere quello di una divagazione rispetto all'argomento principale del post che è meglio non far indicizzare per evitare che Google faccia confusione riguardo al tema di cui si tratta nell'articolo.

Come eliminare i rettangoli che si visualizzano quando si impongono dei tag condizionali ai widget.

Un fattore importante del lato SEO di un articolo è rappresentato dal suo titolo che deve essere facilmente comprensibile dai lettori e contenere le necessarie parole chiave a beneficio dei motori di ricerca. Il titolo di questo post è quanto di peggio si possa inventare in tal senso. Credo che la maggior parte di voi non abbia neppure compreso di che argomento voglia trattare e quindi passo a fare un esempio esplicativo visto che con il titolo non sono stato sufficientemente chiaro.

Se si ha necessità di mostrare un widget solo in un post o in una pagina si utilizzano i cosiddetti tag condizionali per imporre al gadget di essere visibile solo in un dato post o in una data tipologia di pagine (statiche, etichette, di archivio). Limitandoci al caso di un widget mostrato solo in un post, per ottenere questa caratteristica si va su Modello > Modifica HTML > Procedi e si cerca il codice del widget digitandone il nome dopo aver cliccato su F3 o Ctrl+F.

Cosa sono e cosa significano i tag di Blogger.

In molti articoli vengono usate delle etichette per Blogger che ormai sono diventate consuete anche per chi non è un esperto di codici. Faccio l'esempio di data:title che avrete certamente visto scorrendo il codice del vostro blog oppure data:label.name. Queste etichette non fanno parte del linguaggio HTML e funzionano solo su Blogger, per meglio dire solo su alcune sezioni di Blogger.

L'insieme di queste etichette è chiamato Layouts Data Tags ovvero Tag dei dati per i layout e consentono agli web designer di creare i modelli e ai proprietari dei blog di modificarli. Se si inserisce uno qualsiasi di questi tag in un contesto diverso da quello di un modello di Blogger, non sarà rilevato come parte del linguaggio. In estrema sintesi si tratta di variabili che prendono un determinato valore a seconda della pagina in cui sono visualizzate.

Fin dalle medie inferiori abbiamo imparato a usare le variabili nelle equazioni, in seguito anche nelle funzioni. Invece della x, y, z vengono usati questi tag, all'interno di altri tag, oppure anche da soli. Se per esempio incolliamo in un punto del modello la stringa <data:blog.title/>, in quella posizione sarà visibile nel nostro layout il nome del blog . Viene quindi stabilito un linguaggio interno con una struttura che consente di usare queste variabili al posto di quello che si visualizzerà realmente nella pagina web. Per esempio data:title individua il titolo dei gadget che aggiungiamo mentre data:label.name è il nome delle etichette utilizzate in un post. Quest'ultimo tag funzionerà solo dentro un contenitore che avrà come base id='label'. Questo vale in linea di massima per tutti i tag che sono supportati. Nella pagina di elenco delle etichette ci sono quelle che possono essere utilizzate a livello globale, vale a dire in ogni parte del modello, e quelle che funzionano solo in una determinata sezione del blog o in determinato widget.

Vi sarete già resi conto che questo articolo più che scriverlo per i lettori rappresenta una esercitazione mnemonica a mio uso e consumo per cercare di ricordarmi meglio alcuni dei tag più importanti. Tutti iniziano con data: e sono seguiti da una stringa  in relazione all'elemento che rappresentano.

Come rendere visibile un widget solo al proprietario o all'amministratore di un blog su Blogger.

Il titolo del post potrebbe essere considerato oggettivamente strano e indicativo di una personalizzazione del blog davvero pleonastica. Che interesse si può avere a vedere solo noi un determinato widget senza mostrarlo ai lettori? Eppure potrei fare diversi esempi di gadget che potrebbero essere utili da vedere per l'amministratore del blog ma, per questioni di riservatezza, da nascondere ai lettori.

Mi limiterò al caso del contatore Whos.amung.us. Ha avuto molto successo qualche tempo fa anche per la sua semplice personalizzazione. E' da un anno e mezzo che ho deciso di toglierlo non solo per aumentare la velocità di caricamento della pagina ma perché dava in tempo reale tutte le statistiche del sito, con il numero dei visitatori che erano presenti in quel momento e con i link a tutte le pagine che erano consultate; ciascun utente rilevato aveva accanto il dato della durata della sua visita e della località di provenienza. Si poteva anche accedere ai grafici giornalieri e mensili delle visite.

Come creare dei riquadri dentro il post per evidenziare dei contenuti.

I lettori di questo blog si saranno certamente accorti che la grafica non è il mio forte così come tutto quello che concerne l'aspetto estetico del sito. Mi dà molta più soddisfazione concentrarmi sui contenuti piuttosto che cercare di limare il template fino ai limiti del parossismo. Amo molto però sperimentare nuovi modi di proporre i contenuti e nuovi sistemi per renderli più originali.

Facciamo l'esempio pratico di un blog che si occupa di ricette. Che ne direste se l'autore decidesse di evidenziare le più interessanti con una grafica accattivante? inserendo gli ingredienti in un riquadro con il link alla descrizione della ricetta? Una cosa di questo genere per intenderci