Il Like Button di Facebook sul mio sito, come fare

Altro articoletto nel classico MrCriss Lab style…i puristi sono quindi avvertiti…

Trovandomi nell’esigenza di inserire un pulsantino like di facebook in un sito che sto seguendo mi sono innanzitutto informato dei passi da compiere, e quale migliore guida del sito del buon Ghido, bigthink.it, poteva darmi le informazioni necessarie per effettuare questa operazione?…
Io vi parlerò dell’inclusione del like button come iframe.
Come spiegato anche da Ghido è sufficiente andare in una pagina dedicata del nostro social network in questione, la pagina developers in dettaglio, inserire i dati che ci interessano e poi copiare il codice dell’iframe che viene generato.
Tutto molto semplice, questo codice dovrà venir poi copiato nelle pagine del nostro sito e il pulsante like prenderà vita con le caratteristiche scelte in precedenza.
Questa operazione è necessaria e sufficiente per avere nello streaming facebook di chi clicca il like questa azione appunto, il far sapere ai propri amici che quella pagina piace.

IL PROBLEMA: Ebbene si, ho avuto un problema che definire assurdo è veramente poco, ma che mi ha tenuto in ballo diversi giorni prima di farmi avere l’intuizione e fare una prova, fortunatamente risultata risolutiva.
Spiego meglio: Il like button funzionava, contava le persone che cliccavano, faceva vedere le iconcine sulle pagina…ma nella bacheca e profilo di chi cliccava appunto non veniva visualizzato e notificato nulla.
I benefici del pulsante like potete quindi ben capire non fossero presenti

Alla fine qual’era il problema? Il content-Type..ebbene si, copiando il codice dell’iframe mi aveva trasformato le “&” in “&” come è normale sia, ma anche il doppio slash che segue la dicitura “http:” nella sua conversione ascii.
Ribadisco che sembra assurdo, ma sostituendo il doppio slash con appunto i simboli corrispondenti “//” magicamente le notifiche apparivano nei profili che cliccavano like sul mio sito.

Una volta avute le notifiche però come gestire gli utenti? Come poter dire qualcosa eventualmente a chi è effettivamente interessato ai contenuti di quella pagina? Ci viene in aiuto la ghost page, la pagina fantasma.
Questa è una “vecchia” pagina fan in tutte le sue funzioni, però nascosta e visibile solo da chi la amministra.
Come fare ad averla? Inserendo alcuni metatag tra quelli proposti da facebook.
I meta minimi da utlizzare sono i seguenti:
<meta property=”fb:admins” content=”[il vostro id facebook]”/>
<meta property=”og:site_name” content=”[il nome del sito]” />
<meta property=”og:type” content=”[website nel caso di un sito internet non blog]” />

(le parentesi quadre non van messe, il contenuto di quello descritto va tra virgolette)

Cosa succede a questo punto? All’amministratore della pagina apparirà una bella dicitura “Amministra la pagina” con un link che rimanderà appunto alla pagina fantasma corrispondente.
Ad ogni like button corrispondera una diversa pagina fantasma gestibile quindi singolarmente, bisogna quindi assicurarsi, per avere la gestione differenziata delle diverse pagine, che nel codice dell’iframe l’url corrisponda alla pagina del sito stessa (in php ad esempio con un semplice $_SERVER[‘REQUEST_URI’] il gioco è fatto).

NOTA BENE: Se si fa un click sul pulsante like senza aver prima inserito i metatag facebook, la pagina fantasma risultera “bruciata”, non verrà perciò creata per l’url interessato e quindi non più gestibile. Per essere amministrabile dallo user fb in questione (e quindi avere il link “Amministra la pagina”) tra l’altro è necessario che l’utente abbia cliccato sul Like Button almeno una volta ed è un mio consiglio (anche se non ho riprove del contrario) che sia il primo a cliccare sul pulsante.

Consiglio: Se proprio avete “bruciato” una pagina ed è nuova, rifatela tranquillamente risalvandola con un nuovo url e con tutti gli elementi utili. Se l’avete già erroneamente condivisa e ancora non è stata indicizzata fatene una nuova e poi un bel redirect 301 dalla “bruciata” alla nuova. Nel caso fosse una pagina già indicizzata invece valutate se è così importante avere la ghost page…nel caso…redirect 301…

I passi da seguire sono terminati, ma voglio consigliare un’ultima cosa.
Sembra non abbia nessun rapporto o riferimento con like button e ghost page, ma cambiare lo strict xhtml in questo modo…

<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:og=”http://opengraphprotocol.org/schema/” xmlns:fb=”http://www.facebook.com/2008/fbml” dir=”ltr” lang=”it-IT”>

…inserirà l’opengraph protocol, non farà sicuramente male per google e aiuterà ad essere trovati nelle ricerche interne di facebook…e ora anche in Bing

Ricapitolando…

Per essere sicuri che tutto vada bene e non risultino errori di percorso per click anticipati e/o non voluti è quindi buona cosa, prima di fare qualsiasi movimento sulle pagine del nostro sito nel quale vogliamo il like button:
– Inserire lo strict con opengraph
– Inserire i metatag “minimi” per la pagina fantasma (leggere qua per gli altri opengraph e fb tags)
– Inserire l’iframe con la pagina da “promuovere”
– Cliccare sul like button

A questo punto buon divertimento con il vostro like button e le vostre ghost page…
…e se vi piace…cliccate sul like di questa pagina 😉

A presto
Criss

In questo esempio invece abbiamo aggiunto anche il pulsante condividi