Personal tools
Facebook Open Graph Protocol in Plone

Approfondimento sui meta tag og

Aug 30, 2012

Facebook Open Graph Protocol in Plone

Alcuni consigli su come migliorare l'integrazione del social Facebook in Plone, attraverso i meta tag del protocollo Open Graph.

Per migliorare l'integrazione del social Facebook in un sito Plone sarebbe utile conoscere qualcosa in più riguardo a come le nostre pagine Web sono rappresentante su Facebook.

La prima cosa utile da fare è installare un prodotto per l'inserimento dei social plugin in Plone, come ad esempio sc.social.like. In questo modo, senza sviluppare nulla, avrai alcune funzionalità di Facebook e altri social nel tuo sito Plone. Quindi considero sc.social.like come base di partenza del nostro miglioramento tramite l'aggiunta dei meta tag og.

Foto di GOIABA.

Like Button

Il prodotto sc.social.like, oltre a mostrare il Like Button di Facebook sui contenuti Plone, aggiunge nelle pagine del nostro sito ulteriore codice, altrettanto importante per l'integrazione con Facebook.

Social GraphMi riferisco ai <meta> tag del protocollo Open Graph. Questi tag sono essenziali perché definiscono come la stessa pagina sarà rappresentata su Facebook. Infatti è proprio il protocollo Open Graph che consente di integrare le tue pagine Web nel Social Graph, il cuore di Facebook.

Foto di paz.ca.

 

Ci sono alcuni tag che sc.social.like e altri prodotti per i social plugin trascurano e che potresti aggiungere per migliorare l'integrazione delle tue pagine Web nel Social Graph, facendo sì che la condivisione su Facebook o i social plugin installati sul tuo sito Plone funzionino correttamente.

Di seguito, parlerò di alcune azioni che puoi compiere a questo proposito.

Come prima cosa, omessa invece da sc.social.like, ricordati di inserire nel main template di Plone i namespace che permettono a Facebook di interpretare i meta-dati aggiuntivi nelle tue pagine:
<html xmlns="http://www.w3.org/1999/xhtml"
...
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml"
...
>

Poi aggiungi, a quelli già introdotti da sc.social.like, i seguenti <meta> tag personalizzando la viewlet "sc.social.likes_metadata":

  • il <meta> tag og:title: il titolo dell'oggetto nella pagina Web
  • il <meta> tag og:url: l'ULR canonico dell'oggetto che verrà utilizzato come ID permanente nel Graph
  • il <meta> tag og:description: la descrizione dell'oggetto
  • il <meta> tag og:type: il tipo dell'oggetto. In questo caso la documentazione di Facebook consiglia di usare "article" per qualsiasi URL che rappresenta un contenuto transitorio - come ad esempio un articolo di notizie, post blog, foto, video, ecc. Non usare "website", poiché "website" e "blog" sono progettati per rappresentare un intero sito e di solito dovrebbero apparire solo nella root di un dominio.

 

Altri <meta> tag da approfondire: og:image e fb:admins

Ci sono due <meta> tag, og:image e og:admins, di cui è bene chiarire il significato e il funzionamento, perché se usati in maniera scorretta possono far sì che la condivisione di una tua risorsa su Facebook non funzioni.

Il <meta> tag og:image contiene l'URL di un'immagine che rappresenta l'oggetto all'interno del Graph.

Risulta necessario rispettare queste dimensioni e proporzioni: altezza e larghezza devono essere minimo 50px, i rapporti altezza/larghezza e larghezza/altezza non possono superare 3.0. Se non rispetti queste regole, quando cercherai di condividire l'oggetto su Facebook l'immagine non comparirà ad accompagnare la risorsa.

Il <meta> tag fb:admins serve ad associare la pagina Web con il tuo account Facebook; il suo valore deve essere un elenco separato da virgole di ID numerici o nomi utente degli account Facebook che possiedono la pagina, ad esempio:

<meta property="fb:admins" content="USER_ID1,USER_ID2"/>

Nel caso dell'uso di sc.social.like basta indicare questo valore nel tab "Facebook settings", campo "ADMINS", nel pannello di controllo "Social: Like Actions settings". L'informazione con l'ID numerico è preferibile.

Ma come fare a recuperare l'id numerico degli amministratori di una pagina Facebook? Basta usare le Graph API.

Le Graph API presentano una visione del Social Graph, rappresentando gli oggetti del grafo (ad esempio, persone, foto, eventi e pagine) e le connessioni tra di loro (ad esempio, le relazioni amico, contenuti condivisi e tag ). Ogni oggetto nel Social Graph ha un ID unico e puoi accedere alle proprietà dell'oggetto con https://graph.facebook.com/ID. Viceversa, le persone e le pagine possono accedere utilizzando il nome utente come ID. Tutte le risposte sono oggetti JSON, che contengono una serie di informazioni sull'oggetto, tra cui il suo ID numerico e il suo username.

Graph API

Perciò, una volta individuato il profilo dell'amministratore di una pagina Facebook, basta sostiuire nella barra dell'indirizzo "graph.facebook.com" a "www.facebook.com". Ad esempio: se il profilo http://www.facebook.com/federica.delia.71 è un amministratore della mia pagina Web, allora per conoscere il suo ID numerico accederò a http://graph.facebook.com/federica.delia.71.

 

 

Valori multipli

Se vuoi associare più di un'immagine a una risorsa devi aggiungere nella pagina Web un meta tag og:image per ogni immagine, a differenza del meta tag fb:admins in cui più amministratori sono elencati uno dopo l'altro separati da una virgola.

Altri prodotti Plone utili per l'integrazione dei social

Esistono alternative a sc.social.like, tra cui il prodotto collective.fbshare che si occupa solo dell'inclusione dei meta tag Open Graph. Infatti questo pacchetto fornisce i meta tag di cui abbiamo parlato sopra, per rendere più semplice la condivisione su Facebook. In più, permette di personalizzare tramite interfaccia grafica l'immagine che verrà inclusa nel tag og:image.

Cache Facebook e Developer tools

A causa della cache di Facebook sulle pagine già condivise potresti non vedere immediatamente gli effetti dei tuoi cambiamenti. Quindi per controllare il tuo lavoro ti consiglio di usare gli strumenti offerti da Facebook. Il tool Facebook URL Linter ti assicura di aver inserito i <meta> tag corretti nella tua pagina.

Debugger

 

Come hai visto, non devi far altro che specificare nelle tue pagine Web un valore corretto per alcuni <meta> tag og fondamentali. La semplice modifica di una viewlet, includendo questi meta tag, può regalarti un'integrazione più completa e funzionante di Facebook nel tuo sito Plone.

L'immagine in testata è di Franco Bouly.

Filed under: ,
comments powered by Disqus