Joomla! - Come aggiungere Open Graph di Facebook

google-plus Scritto da . Postato in Joomla!

phoca avatarNon è certo un mistero quanto siano importanti i social media per un sito web. Non è solo una questione di posizionamento, ma se si vuole che il proprio sito sia popolare, la presenza sui social è un obbligo.
Quando ci si affaccia a questo mondo, si vuole essere in grado non solo di condividere i contenuti dal sito, ma anche condividerli e mostrarli nel modo in cui si ritiene più opportuno. Ed è qui che entra in gioco Facebook Open Graph.

Prima di iniziare, verifica se sul tuo sito sono già presenti Facebook Open Graph e Twitter Card e se è necessario l'uso di altri plugin o accorgimenti per ottimizzarlo.

Il tuo sito è provvisto dei tag Open Graph? Verificalo direttamente dalla pagina predisposta da Facebook:

Debugger di condivisione - Facebook for Developers

Il tuo sito è predisposto per le Twitter Card? Verificalo da qui:

Card Validator

Cos'è Facebook Open Graph

L'idea alla base di Facebook Open Graph è quella di consentire alle tue pagine web di diventare social in ogni aspetto e consentirti di entrare in contatto con le persone in molti modi diversi.

In poche parole, Open Graph è un "social media language" che collega i contenuti del sito Web con i social network e quindi controlla il modo in cui il contenuto viene rappresentato su di essi.

Andando oltre, ti consente di gestire i dati e ottimizzarli come desideri quando un utente del tuo sito condivide un post dal tuo website. Ciò aiuterà a controllare cose come la visualizzazione, le immagini, il contenuto e il titolo.

Il collegamento di Joomla! a Facebook consente attraverso i tag "og" di Facebook di specificare i dati che desideri condividere dai tuoi post. Questi tag "og" includono:

  • Titolo (Title): questo è il titolo dell'oggetto
  • Tipo (Type): il tipo di oggetto
  • Immagine (Image): l'URL dell'immagine
  • URL (URL): l'URL dell'oggetto
  • Descrizione (Description): la descrizione dell'oggetto

E' dunque ovvio che impostare Facebook Open Graph su Joomla! può aiutarti a controllare in modo specifico come i contenuti del tuo blog vengono condivisi sui social media.

Aggiungere Facebook Open Graph a Joomla!

Prima di parlare di come aggiungere Facebook Open Graph a Joomla!, devi ricordare alcune cose. Usare correttamente Open Graph è fondamentale, quindi ricorda quanto segue durante la configurazione:

  • Un titolo og dovrebbe contenere 95 caratteri o meno.
  • Le descrizioni Open Graph possono contenere (e lo dovrebbero) fino a 297 caratteri.
  • L'immagine og deve avere una dimensione minima di 200px * 200px e non superare i 5 MB. Se non dovesse rispettare i requisiti minimi o verrà scartata o sarà presa la prima immagine che ne rispetta i parametri.

Anche se si può utilizzare un piccolo hack, modificando con un override la view degli articoli per aggiungere i tag Open Graph ad ognuno di essi, per aggiungere correttamente Facebook Open Graph a Joomla! senza dover scrivere una riga di codice, utilizzeremo un'estensione (gratuita) di Joomla! che rende l'intero processo molto semplice. Questo plugin si chiama Phoca Open Graph per Joomla.

Diamo un'occhiata al plugin, installiamolo, attiviamolo e configuriamolo insieme.

Phoca Open Graph plugin

L'estensione Phoca Open Graph Plugin consente di aggiungere facilmente le informazioni Open Graph al tuo sito web Joomla! e controllare come i tuoi post vengano condivisi e mostrati.

Le informazioni vengono memorizzate e quindi aggiunte correttamente quando a un visitatore piace o condivide un post. Questo plugin ti dà la comodità di sapere esattamente cosa viene visualizzato quando il contenuto viene condiviso, come viene visualizzato e come apparirà quando viene condiviso sui social network.

Ora è il momento di installare e attivare il plugin Phoca Open Graph Plugin per Joomla!. Questa è solo una delle tante utili estensioni relative a Facebook che Joomla! ha a disposizione e che ne renderanno l'integrazione più semplice.

Installa e attiva Phoca Open Graph Plugin

Per poter utilizzare l'estensione Phoca Open Graph Plugin per controllare i tag og di Facebook, il plugin deve prima essere installato e attivato sul tuo sito web Joomla. Puoi cominciare scaricandolo dalla homepage dell'estensione sul tuo computer. (https://www.phoca.cz/phoca-open-graph-plugin)

Scorriamo verso il basso la pagina e facciamo click sul pulsante "Download". Ora verrai indirizzato alla pagina download di Phoca Open Graph Plugin: qui vedrai le varie versioni disponibili. Nel nostro caso, vogliamo scaricare l'ultima versione disponibile in inglese del plugin, la versione 3.1.12 per Joomla! 3.x.

phoca open graph plugin download

Nota: Sulla stessa pagina sono disponibili anche le traduzioni in altre lingue per l'estensione. Manca quella in italiano e bisognerà accontentarsi di quella inglese.

Dopo aver scaricato l'estensione sul tuo computer, dal pannello amministrativo di Joomla! vai a Estensioni > Gestione > Installa > Installa da file - pacchetto compresso. Trascina ora il pacchetto appena scaricato nell'area di caricamento apposita situata nel pannello di controllo di Joomla!.

Nota: puoi anche cercare il file nel tuo computer e caricarlo attraverso finetra di dialogo, se preferisci.

joomla trascina e installa

Una volta che l'estensione è stata installata, vedrai un messaggio di conferma in una casella verde che ti informa che l'estensione è stata installata con successo.

Attivare il plugin

Ora che l'estensione è stata installata, devi attivarla. Nella barra dei menu in alto, fai clic su Estensioni > Plugin. Con l'ausilio della casella apposita "cerca" il plugin "Phoca Open Graph" che hai appena installato.

Se ha un cerchio rosso con una "x" bianca, fai click sull'icona per abilitare il plug-in. Se l'icona ha un segno di spunta verde, significa che è già abilitata e l'estensione è attiva sul sito.

phoca open graph attiva plugin

Ora fai clic sul plugin "Phoca Open Graph Content" per accedere alla sua configurazione.

A questo punto, sei arrivato alla pagina di configurazione principale per questo specifico plugin Joomla Facebook Open Graph. Vedrai le 7 schede in cui sono suddivise le opzioni:

  • Opzioni articolo (Article Options)
  • Opzioni in evidenza (Featured Options)
  • Opzioni di categoria (Category - blog - Options)
  • Opzioni comuni (Common Options)
  • Tweets with Card Options (Twitter Cards)
  • Opzioni extra (Extra Options)

phoca open graph scheda plugin

Di per se il plugin è già basicamente configurato e funzionante: una volta installato e attivato dovrebbe funzionare perfettamente senza ulteriori necessità di intervento da parte del web master. Ovviamente alcuni parametri valgono la pena di essere presi in considerazione come ad esempio se attivare o meno le Twitter Card e come impostarle per una corretta pubblicazione dei contenuti nel social network.

Vediamo insieme per ciascuna scheda le opzioni di configurazione del plug-in che andremo a modificare:

Plugin

La scheda plugin dell'immagine precedente, è di sola presentazione: mostra semplicemente i collegamenti alla documentazione e ad altre informazioni relative al plugin e al suo autore.

Opzioni articolo

Configura qui le opzioni Open Graph di Joomla che desideri avere per i tuoi articoli. Come potete notare, se vi soffermate con il mouse sulle varie opzioni noterete come per molte di esse viene consigliato di lasciarle così come sono, a meno che per vostre ragioni non vogliate modificare qualche opzioni consci del fatto che così renderete statiche le informazioni impedendo al plugin di elaborarle da solo andando a prelevarle dai singoli articoli.

Infatti, il plugin si incaricherà di prelevare le informazioni dall'articolo per settare al meglio i tag og. Per fare un esempio, l'immagine verrà scelta tra quelle nell'articolo e in genere verrà prelevata la prima immagine a cui è fatto riferimento nel testo.

Opzioni [articoli] in evidenza (Featured options)

Da questa scheda puoi impostare le opzioni degli articoli messi in evidenza, cioé come desideri che essi vengano visualizzati. Vale il discorso per la scheda precedente visto che le opzioni sono pressoché identiche. Consiglio di lasciare il settaggio così come lo avete trovato.

Opzioni di categoria (blog)

Ciò che è stato detto per le due precedenti schede ha valore anche per questa, tranne per il fatto che qui si configura il comportamento del plugin in una ipotetica visualizzazione categoria blog.
Imposta qui tutte le opzioni di categoria (blog) che desideri avere quando il contenuto viene condiviso sui social media.

Opzioni comuni

In questa scheda, potrete impostare la Facebook Application ID che avrete creato alla seguente pagina: Facebook Developers Apps page.
Per il momento il parametro Application ID non è obbligatorio per l'uso dei tag Open Graph, ma potrebbe diventarlo con il tempo. Nel frattempo potete lasciare questo campo vuoto o impostarlo se doveste riscontrare delle anomalie nel condividere i vostri contenuti.

In Render Type, è settato il tipo con il quale verranno inseriti i tag og nella pagina. Ciò vuol dire che i tag saranno inseriti o così:

// HTML CODE
 0  <meta property="og:title" content="Home" /> 


o così:

// HTML CODE
 0  <meta name="og:title" content="Home" /> 

Impostate a "property" questo valore così come richiesto in genere dalla pagina di validazione di Facebook.

Interessante anche il parametro Intro Text as Description: se impostato su "Yes" (di default è disabilitato), se vi dimenticaste di riempire la casella Descrizione nella scheda Pubblicazione dell'articolo, nel tag og:description verrebbe inserito il suo Intro Text. Ciò eviterebbe che il plugin andasse a prendere la Descrizione generica del sito nelle impostazioni generali.

Le altre opzioni, consentono di limitare il funzionamento del plugin escludendolo da viste, componenti o articoli specifici.

L'opzione Image (Parameter) Order, consente invece di impostare quale tra le immagini, se la prima o l'ultima, debba essere presa in considerazione per il tag og:image.

phoca open graph plugin scheda common options

Tweets with Cards Options

Questa estensione, benché studiata essenzialmente per l'inclusione dei tag Facebook Open Graph in Joomla!, nelle ultime versioni è completa di un'apposita sezione per includere anche le Twitter Cards.
Grazie a questo accorgimento ti è possibile configurare e includere le Twitter Cards nel tuo sito Joomla! senza la necessità di installare ulteriori estensioni, il che giova sicuramente anche alla salute del tuo sito.

Le opzioni sono poche ed intuitive: per poterle attivare, impostate a "Yes" il primo parametro cioé Enable Tweets with Cards.

La successiva opzione, Twitter Card detterà se il tweet sarà creato con immagine piccola (summary) affiancata dal testo o immagine grande (summary_large_image) dove nel tweet l'immagine occuperà lo spazio massimo in larghezza e corredato sotto di esso dal testo introduttivo del tweet.

Gli ultimi due parametri, Twitter site e Twitter creator vi consentono di impostare la pagina e l'autore che compariranno nel tweet.

phoca open graph scheda twitter cards

Opzioni extra

Qui, l'unica opzione, Display Category Image In Article, è se scegliere di visualizzare l'immagine di categoria nell'articolo (se ve n'è una) e se l'articolo ne è sprovvisto (ve lo sconsiglio).

Questo è tutto! Hai installato, attivato e configurato correttamente il plugin Phoca Open Graph. Ora controlli i tuoi "Mi piace" e le condivisioni sui social media e il contenuto che desideri condividere.

Pensieri finali

Se hai un sito web Joomla! ricco di contenuti, allora sicuramente vuoi approfittare di Facebook Open Graph e Twitter Card. Il plugin, come visto non è difficile da configurare e utilizzare, come dimostrato in questo tutorial.

Questo ti darà molto più controllo su come i contenuti vengono visualizzati e condivisi sui social media. Ciò consentirà anche di rappresentare i tuoi contenuti nella maniera appropriata sui social senza perderne l'attrattiva. Saprai cosa vedono le persone e a quali informazioni accedono perché imposti il ​​display e controlli il layout e altre impostazioni.

Utilizzi Joomla e Facebook Open Graph da un po 'di tempo? Trovi che i contenuti condivisi siano molto più puliti e visualizzati nel modo migliore?


 

Se hai gradito l'articolo, condividilo, basta un click:

Aggiungi commento

I commenti lasciati dagli utenti del blog sono sempre soggetti a controllo prima di eventuale pubblicazione. I commenti non considerati adatti per contenuti, spam o forma saranno eliminati e non pubblicati. Leggi i Termini e Condizioni di utilizzo per maggiori informazioni.


Codice di sicurezza
Aggiorna

Prima di andartene...

Perché non rimanere in contatto?

Clicca sul pulsante "Mi piace" qui sotto per rimanere aggiornato su tutti i nuovi contenuti e ricevere notifica degli articoli interessanti che condivido giornalmente sulla Pagina Facebook dedicata al blog.

Puoi anche iscriverti alla newsletter e al nuovo canale YouTube di blog.dangerx82 così da rimanere sempre aggiornato sui nuovi contenuti...

x

Per essere più facile ed intuitivo, il blog fa uso dei cookie, piccole porzioni di dati che consentono di capire come gli utenti navighino e ne visualizzino le pagine. I cookie non registrano alcuna informazione personale sull'utente ed eventuali dati identificabili non verranno memorizzati. Ti invitiamo a prendere visione della nostra Informativa sulla Privacy (aggiornata il 25/05/2020). Oppure visiona la nostra Cookie Policy (aggiornata il 17/10/2019):