Pubblicato il 02/07/13e aggiornato il

Come attivare la Twitter Summary Card nei modelli di Blogger.

Come attivare la Twitter Summary Cards inserendo i metatag nel modello di Blogger.
Come illustrato in un precedente articolo anche Twitter ha voluto rendere più analitici i tweet che riguardano la condivisione di post da domini che abbiano inserito determinati metatag secondo le regole delle Twitter Cards. Gli utenti di Blogger come al solito in questi casi devono fare i salti mortali per adattare i codici usando i tag di Blogger.

La serie di metatag che avevo presentato nel precedente articolo e che riguardava la Summary Card avevano la controindicazione di funzionare solo nei post e questo ne impediva la validazione da parte di Twitter. Finalmente sono riuscito a trovare un meccanismo tramite i tag condizionali che mostri i metatag opportuni in tutte le pagine del nostro sito. Il risultato pratico sarà che tutte le pagine del nostro blog condivise su Twitter avranno il link Visualizza Riepilogo

visualizza-riepilogo-twitter

Se si clicca sopra a Visualizza Riepilogo si vedrà il tweet in modo più analitico e questo riguarderà anche gli articoli già condivisi in passato

riepilogo-twitter-summary-cards

Per attivare la Twitter Summary Cards bisogna andare su Modello > Modifica HTML e cercare la riga </head> . Subito sopra si incolla il seguente codice

<!-- Twitter Card Start -->
<meta content='summary' name='twitter:card'/>
<meta content='@ipcei' name='twitter:site'/>
<meta content='@parsifal32' name='twitter:creator'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<meta expr:content='data:blog.url' name='twitter:url'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<b:else/>
<meta expr:content='data:blog.homepageUrl' name='twitter:url'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
</b:if>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
</b:if>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
<b:else/>
<meta content='https://lh3.googleusercontent.com/-GnYopGwV-gs/UdGjliQbbtI/AAAAAAAAidc/wJc5KXBElok/s593/logo-ipcei-rettangolo.png' name='twitter:image'/>
</b:if>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<!-- Twitter Card End -->

con i parametri in rosso che devono essere personalizzati e che riguardano l'account del sito (@ipcei) e quello dell'autore (@parsifal32) oltre all'URL del logo del blog. Si salva il modello.

Per la validazione del dominio accedere a Card Validator > Summary Card > Validate & Apply. Digitare il dominio del sito e cliccare su Go!

validazione-dominio-summary-cards

Non ci sarà approved ma not approved. Dovrete quindi chiedere l'approvazione che sarà comunicata via email in tempi molto rapidi. Nella procedura di richiesta di approvazione dovrete inserire il nome dell'account, quello eventuale del dominio e una breve descrizione del blog

email-convalida

Proverò a attivare altre Twitter Cards e in caso di successo lo comunicherò nei prossimi articoli. Ricordo che sono disponibili oltre a Summary Card anche Large Image Summary Card, Photo Card, Gallery Card, App Card, Player Card e Product Card.

Aggiornamento n°1: Con questa stessa procedura si può ottenere anche la validazione alla Large Image Summary Card. La validazione conferma infatti che viene attivata usando le stesse metatag. Su Twitter però non si vedono le immagini grandi anche se ci sono nei post. Ho letto nei  commenti sui forum che il problema è comune e quindi può essere che ci sia solo bisogno di tempo.




5 commenti :

  1. A me esce Invalid card type. Come si può risolvere?

    RispondiElimina
    Risposte
    1. @# Non saprei. Il codice applicato nel mio modello funziona. Riprova domani, può dipendere dai server di Twitter. E' una cosa appena introdotta.

      Elimina
  2. Ciao ernesto,
    ho seguito la tua guida e sembrava andare tutto ok. Ho aspettato che mi arrivasse la mail di approvazione e, dopo che è arrivata, ho fatto una prova e vedevo che la card non era attivata. Allora sono tornato alla pagina per validarla e mi da Invalid Card Type

    RispondiElimina
    Risposte
    1. Questo purtroppo non so da cosa possa dipendere. Ti posso consigliare di fare nuovamente la procedura reincollando il codice una seconda volta dopo aver tolto quello che c'è adesso
      @#

      Elimina
    2. ho reincollato il codice, ho provato anche a validare l'url non localizzato (quindi adesso è validato sia il .com sia il .it) la pagina per la validazione me li rileva entrambi validi, ma le card non appaiono

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.