Con le Twitter Cards è possibile allegare foto, video e contenuti di qualsiasi genere ai propri tweets, nella timeline di Twitter. Cliccando su di esse, l'utente seguirà l'articolo presente nel sito web di origine.
Da questo si evince che più elementi si riesce ad inserire nei social, più si attira l'attenzione di chi li frequenta.
Il tutorial odierno spiega come fare per abilitare le Twitter Cards negli articoli Joomla!, senza dover installare alcuna estensione.
Cosa sono le Twitter Cards
Una card di Twitter è una preview, un'anteprima del contenuto dell'articolo che si trova nel sito dell'autore.
Twitter ha messo a disposizione 7 tipi di cards:
- Summary Card
- Summary Card with Large Image
- Photo Card
- Gallery Card
- App Card
- Player Card
- Product Card
A noi interessano, al momento, le prime due tipologie di card.
Ogni card ha un suo codice HTML ben specifico, da aggiungere nella <head> dell'articolo che si vuole condividere via Twitter.
Prendendo spunto dalla mia pagina Twitter, un esempio tipico di card potrebbe essere il seguente:
<meta name="twitter:card" content="summary">
oppure
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@nomeutentetwitter"> <meta name="twitter:creator" content="@nomeutentetwitter"> <meta name="twitter:url" content="https://miosito.xx/UrlPagina"> <meta name="twitter:title" content="Titolo Articolo o Titolo Pagina"> <meta name="twitter:description" content="descrizione sintetica del tema trattato"> <meta name="twitter:image" content="URL immagine del tweet">
Il codice qui su riportato, opportunamente compilato, genererà il seguente tweet:
Generare Twitter Cards per un articolo Joomla!
L'articolo in oggetto è la "prosecuzione" di quello scritto qualche giorno addietro inerente l'aggiunta di Integrare Facebook Open Graph Protocol in Joomla!.
Ho preferito suddividere i due argomenti, onde evitare confusione con la scrittura dei tag proprietari per i due social.
Anche in questo caso va detto che esistono decine di plugin, nella directory delle estensioni per Joomla!, che assolvono allo stesso compito. Personalmente preferisco, quando è possibile, evitare di appesantire il CMS.
Dopo questa breve introduzione, entriamo nello specifico e vediamo come fare per abilitare le Twitter Cards negli articoli Joomla!
Così come per il precedente articolo, anche in questo caso i files interessati sono due e sono i medesimi:
- file index.php del template in uso
- file default.php del componente com_content
Aggiungere meta tag Twitter nel file index.php del template Joomla!
N.B. E' consigliabile consultare, parallelamente al presente tutorial, anche quello riguardante l'aggiunta di Facebook Open Graph Protocol in un sito web realizzato con Joomla!
Portare sul desktop il file index.php, via FTP, dalla cartella del template attivo, situato al seguente percorso:
templates/Nome_Template_In_Uso/index.php
Aprirlo con un editor di testo ed individuare il blocco di codice inerente i tag per Open Graph Protocol.
Sotto di esso, possiamo aggiungere:
//Twitter Card
$doc->setMetaData('twitter:url', JURI::current());
$doc->setMetadata('twitter:title', $page_title);
$doc->setMetadata('twitter:description', $description);
$doc->setMetadata('twitter:card', 'summary_large_image');
$doc->setMetadata('twitter:site', '@nomeutentetwitter');
$doc->setMetadata('twitter:creator', '@nomeutentetwitter');
N.B. Le variabili che servono per popolare il content dei tag meta per Twitter Card, sono già state impostate per Facebook Open Graph Protocol. Sono identiche.
Salvare il file e trasferirlo nella sua cartella sul server.
Aggiungere meta tag Twitter nel file default.php
Se nella cartella del template che si sta utilizzando è presente una dal nome html, vuol dire che è già stato fatto l'override di qualche file del core di Joomla!
Controllare al seguente percorso:
/templates/Nome_Template_In_Uso/html
Accertarsi che all'interno della cartella html ce ne sia una denominata com_content.
Il percorso è:
/templates/Nome_Template_In_Uso/html/com_content/article/default.php
Nel caso in cui fosse presente trasferire, via FTP, il file default.php sul desktop.
Diversamente, effettuare l'override come descritto nell'articolo integrare Facebook Open Graph Protocol in Joomla!.
Dopo aver aperto il file default.php, trovare il codice:
$doc->addCustomTag($OpenGraph);
Immediatamente prima del codice qui su scritto, inserire:
if (isset($images->image_fulltext) && !empty($images->image_fulltext)) {
$OpenGraph .= '<meta name="twitter:image" content="'.JURI::base().$images->image_fulltext.'" />' . "\n";
}
Salvare il file e trasferirlo nella sua cartella, sul server.
Aggiornare il frontend del sito ed aprire una pagina a caso di un articolo. Controllare l'HTML, in vista codice, se sono stati inseriti correttamente tutti i tag meta per Twitter Card.
Validare la pagina con Twitter Card validator
La prova finale l'avremo effettuando la validazione della pagina e se tutti i passaggi sono stati fatti in maniera corretta.
Aprire la pagina Twitter cards validator.
Nel campo URL, a sinistra, inserire l'indirizzo della pagina da validare. Dopo qualche secondo, nella colonna accanto, Card preview, avremo l'anteprima di come il tweet apparirà nella timeline di Twitter. Esempio:
Conclusioni
Da adesso in poi condividere articoli via Twitter e via Facebook sarà molto più semplice e, soprattutto, verranno generati automaticamente tutti i tag affinchè articoli di blog e news saranno visualizzati in maniera ottimale, così da essere più facilmente indicizzati e trovati nei motori di ricerca.