Visualizzare nei post i link per il Facebook Debugger e per il Rich Snippets Tool di Google.

Come mostrare nel footer del blog i link per fare il debug su Facebook e per testare i metatag di Google con il Rich Snippets Tool.

I tag condizionali sono un potentissimo strumento di Blogger per mostrare un elemento solo in determinate pagine. Si può per esempio decidere di visualizzare un widget solo nei post oppure un bottone ovunque escluso le pagine statiche o ancora un menù in tutto il blog eccetto un determinato post. Nell'elenco di tutte le condizioni possibili che si possono imporre manca quella che permette di visualizzare un dato elemento solo all'amministratore del sito. In questo modo il proprietario del blog e solo lui può crearsi un Pannello di Controllo per accedere più facilmente a determinate funzioni. Questa opzione in effetti manca perché ha una struttura decisamente diversa dalle altre. Infatti per mostrare un elemento solo all'amministratore del blog bisogna racchiudere il suo codice tra queste due righe

<span class='item-control blog-admin'>
Codice dell'elemento visibile solo al proprietario del blog
</span>

Fatta questa premessa passiamo a affrontare il tema della condivisione dei post su Facebook e del rich snippet dei post visualizzati nei risultati della ricerca di Google. Soprattutto le prime condivisioni su Facebook con la cache del browser piena possono risultare difficoltose e non mostrare né snippet né miniature. L'utilizzo del Facebook Debugger diventa spesso necessaria per fare in modo che Facebook rilevi nuovamente i metatag di Open Graph in modo corretto. L'uso dello Strumento di test per i dati strutturati è meno frequente ma in certi casi può essere utile per verificare la correttezza delle meta informazioni inserite nel modello e nel post.

Vediamo come mostrare questi due link solo all'amministratore del blog per verificare con un semplice click le informazioni su Google e per fare il debug delle metatag di Facebook. Dopo aver salvato il template si va su Modello > Modifica HTML. Si clicca sull'area del codice e si digita Ctrl+F per poi incollare questa riga nella casella di ricerca che si apre

<b:includable id='postQuickEdit' var='post'>

Si pigia su Invio e si clicca sulla freccetta nera per visualizzare tutto il codice

 

Subito sotto a tale riga si incolla il seguente codice

<!-- Facebook Debug e Google Tools Inizio -->
<span expr:class='&quot;item-control &quot; + data:post.adminClass'>
  <a expr:href='&quot;http://developers.facebook.com/tools/debug/og/object?q=&quot; + data:post.canonicalUrl' target='_blank'>Facebook Debug</a> |
  <a expr:href='&quot;http://www.google.com/webmasters/tools/richsnippets?url=&quot; + data:post.canonicalUrl + &quot;&amp;amp;view=none&quot;' target='_blank'>Google Tool</a>
</span>
<!-- Facebook Debug e Google Tools Fine -->

Si salva il modello. Quando l'amministratore del sito aprirà un qualsiasi post del blog visualizzerà due link aggiuntivi nella zona del footer subito prima al Quick Editor.

Ripeto che questi link saranno visti solo dall'amministratore del sito che cliccandoci sopra potrà fare consultare il Rich Snippet Tool di Google e soprattutto fare il Debug del post su Facebook con un notevole risparmio di tempo visto che l'URL sarà compilato automaticamente nell'apposita casella nel momento stesso del click. La separazione dei due link è data dal carattere " | " che può essere modificato. Visto che il Facebook Debugger è più utile in questa situazione del tool di Google si può decidere di visualizzare solo quello eliminando oltre che al carattere di separazione anche il codice evidenziato di giallo.