Gli open graph (conosciuti anche come "og") risultano essere fondamentali per una ottimale condivisione e presenza sui social networks, e in particolare, su Facebook.
Normale amministrazione quando si tratta di inserirle nell'head della pagina i meta degli og. Un esempio:
<meta property="og:site_name" content="Blog NewtVision" />
<meta property="fb:app_id" content="facebook_app_ID" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.newtvision.com/blog/" />
<meta property="og:title" content="Blog NewtVision - Easy Web Solutions Consulenze e Applicazioni web TYPO3 Roma" />
<meta property="og:description" content="Il nostro blog raccoglie articoli, suggerimenti, trucchi, consigli, opinioni, eventi su TYPO3, il Design, i Database..." />
<meta property="og:image" content="http://www.newtvision.com/fileadmin/templates/newtvision.com/upload/blog/blog-newtvision.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="1915" />
<meta property="og:image:height" content="441" />
PROBLEMA
La problematica sorge quando abbiamo un template OnePage e si ha la necessità di dover condividere ogni sezione su Facebook che deve mostrare, ovviamente, dei contenuti differenti. Prendiamo ad esempio una lista di eventi con un titolo, una descrizione, un orario e un'immagine. Vogliamo inoltre che gli utenti cliccando sul link si ritroveranno all'evento condiviso. Normalmente Facebook, nella finestra di condivisione, andrà a prendere gli og di riferimento del link che gli passiamo, in questo caso una delle immagini degli og della OnePage e non dell'evento che vogliamo condividere. Come possiamo personalizzare ad esempio l'immagine o la descrizione?
SOLUZIONE
E' possibile sfruttare i "Feed Dialog" oppure gli "Share Dialog" di Facebook, dipende dalla tipologia di contenuto che si vuole condividere.
La descrizione seguente si riferisce all'utilizzo degli "Share Dialog" e i passaggi sono i seguenti:
PASSAGGIO 1 - azioni sul file js
Includere le API di Facebook con la propria appId.
window.fbAsyncInit = function() { FB.init({ appId : 'xxxxxxxxxxxx', xfbml : true, cookie : false, version : 'v2.5' }); }; (function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));
Creare una funzione, alla quale saranno passati i parametri che vogliamo impostare come og, che al richiamo dal bottone di share utilizzerà FB.ui per lanciare il metodo share_open_graph il quale aprirà il calssico share dialog.
Nel nostro caso abbiamo passato alla funzione url, image, title e description ma potete passare tutti gli og che volete.
function fbShare (url, image, title, description) {
if (typeof(FB) != 'undefined' && FB != null ) {
// run the app
FB.ui({
method: 'share_open_graph',
action_type: 'og.shares',
action_properties: JSON.stringify({
object : {
'og:url': url, // your url to share
'og:title': title,
'og:description': description,
'og:image:url': image,
'og:image:width': '1920',
'og:image:height': '1200',
}
})
},
// callback
function(response) {
return true;
});
} else {
//Error action on FB object. Example: Cookies disabled
}
return true;
}
PASSAGGIO 2 - azioni sul template
Ogni evento da condividere dovrà avere un proprio id da inserire nel tag html <section> o <div>, in modo da poter costruire un anchor link.
<dic class="anchor" id="evento-56a8e0f7975a018507b785ca">...</div>
Nella costruzione dinamica degli eventi, che può essere fatta come volete, andiamo ad aggiungere il pulsante fisico che richiamerà la funzione fbShare
<a href="#" onclick="fbShare ('https://dominio/path/page/#evento-56a8e0f7975a018507b785ca', 'Image link', 'Event Title', 'Event Description'); return false;" ><i class="icon fa fa-facebook"></i> </a>
Questo sistema va a sostituire completamete l'ormai obsoleto e deprecato metodo sharer.php?s=&p[url]=p[images][0]=... di Facebook