Martino Scanferlato Web designer logo mobile

WEB...ZONE

Blog di notizie dal mondo di Internet

26

11/2015

Facebook Share Button

Categorie: html, mobile

Facebook Share Button

Vuoi condividere un articolo del tuo blog su Facebook ma il bottone che hai inserito continua a condividere esclusivamente la Home Page?

Sei arrivato nel posto giusto: vediamo come risolvere.

Avviso: per seguire questo articolo devi avere qualche conoscenza di HTML perché dovremo mettere le mani sulla sezione Head del sito nonché sul codice dell’articolo.


Inserire il bottone non potrebbe essere piú facile.

Recati nell’apposita sezione per WebMaster di Facebook: Facebook Share Button .
Scegli “Share Button Configurator”, inserisci l’url dell’articolo che vuoi condividere, scegli il tipo di bottone (Layout) e clicca su “Get Code”.

Ti vengono forniti due codici.

Il primo é il javascript che devi inserire cosi com’ é (copia e incolla) nella head o nel footer del sito; io consiglio di inserirlo nel footer subito prima della chiusura di body.

Il secondo é il codice che serve a creare il bottone e vá inserito nel punto esatto della pagina in cui vuoi che lo stesso compaia. Eventualmente inseriscilo in un div che puoi piú facilmente controllare tramite css.

Fatta…non proprio.
Lo script di Facebook non sa quali elementi utilizzare come immagine, titolo, descrizione etc. e andrá a prendere quelli che trova nella Home Page (o, se presente, nella pagina indicata dal rel canonical). Ergo la tua condivisione non sará per l’articolo che ti interessa, ma per la home del sito (probabilmente anche senza immagine).


Per poter condividere esattamente l’articolo che ti interessa devi indicare al crawler quali sono effettivamente gli elementi che deve considerare: url, immagine, titolo, descrizione e tipo.

Bisogna utilizzare i meta tag Open Graph nella head del sito.

Bene, ora vai nella <head> della pagina che ti interessa condividere (se la pagina é creata automaticamente in php dovrai impostare in php anche questi elementi). Inserisci i seguenti meta tag (se non sai dove metterli posizionali prima della chiusura di </head>):

Per il tipo → <meta property="og:type" content="article">

Per Url → <meta property=”og:url” content="http:// www.indirizzodellapagina.ext">.

Per titolo → <meta property=”og:title” content=”Il titolo della pagina">.

Per la descrizione → <meta property=”og:description” content=”Descrizione del tuo articolo">

Per l’immagine → <meta property=”og:image” content=”http:// www.indirizzo.ext/immagine.jpg”>.

Puoi personalizzare le dimensioni dell’immagine inserendo anche questi meta tag:

Width → <meta property=”og:image:width” content=”484”> (dimensione in px);

Height → > <meta property=”og:image:height” content=”252”>(dimensione in px);


Ulteriori approfondimenti sugli Open Graph Tag li puoi trovare al link: Facebook Sharing for Webmasters

A questo punto tutti gli elementi dovrebbero essere al loro posto: provi a condividere l’articolo e… ti compare esattamente quello che ti compariva prima!!!

Ci possono essere due cause.

La prima é congenita a Facebook. Ogni volta che condividi una pagina i suoi elementi (url, immagine, titolo, descrizione…) vengono memorizzati nella cache del social… e li restano finché non li modifichi manialmente (no, cercando di condividere di nuovo le informazioni non vengono sovrascritte).
Per risolvere questo problema devi recarti nella sezione Debugger (Facebook Debugger).

Inserisci l’url della pagina interessata e premi debug. Ti verrá mostrata una finestra con i dati memorizzati nella cache di Facebook relativamente a quella pagina. Ti basterá fare click su “Fetch new scrape information” per memorizzare i dati nuovi e poter finalmente condividere il tuo articolo.

Attenzione: se vuoi cambiare l’immagine anche il suo nome (e di conseguenza il suo indirizzo) deve cambiare perché Facebook ne memorizza un’altra solo se ha un indirizzo diverso!


Se, arrivati a questo punto, il tuo articolo non é ancora condiviso nella giusta maniera c’é un problema di non corrispondenza fra l’indirizzo indicato in <meta property=”og:url”> e l’indirizzo indicato nel data-href del bottone che hai inserito. I due infatti devono coincidere, altrimenti Facebook fará riferimento all’url canonical o, in mancanza di questo, alla Home del sito. Verifica e correggi.

A questo punto segui le istruzioni di cui sopra (devi cambiare i dati nella cache di Facebook) e finalmente vedrai condiviso esattamente il tuo articolo.
Se hai dei problemi, non esitare a contattarmi!

Torna al blog
Torna all'inizio