Aggiungere i commenti di facebook al vostro sito

Aggiungere i commenti di facebook al vostro sito
May 02 Scritto da 
Pubblicato in Web Design Blog
Vota questo articolo
(0 Voti)

Una guida completa per aggiungere i commenti di facebook al vostro sito. tutto quello che si deve fare per configurare correttamente i commenti su Joomla e Wordpress

Se volete dare una spinta alle vostre pagine internet, non c'è niente di meglio del box dei commenti di Facebook. Questo, infatti, è un ottimo modo per aumentare la viralità sociale dei vostri articoli, permettendo ai chi legge un vostro articolo di aggiungere un commento che comparirà non solo sul vostro sito internet, ma anche sulla sua bacheca.

L'effetto è chiaramente quello di mostrare a tutta la sua rete sociale su facebook, gli amici, per intendersi, che il nostro utente ha interagito, commentando, con la nostra pagina, ed in tal modo avere la possibilità di aumentarne gli accessi, e possibilmente anche la sua indicizzazione su Google e sugli altri motori, che prendono sempre più in cosiderazione la diffusione sui social network di una pagina come parametro chiave.

Ecco come fare, quindi come fare per aggiungere i commenti di facebook al vostro sito web:

Configurare la Head del vostro sito

Il primo passo necessario è configurare correttamente  la head della vostra pagina, in modo che facebook possa identificarne correttamente i contenuti.

Dovrete, quindi, aggiungere alla head una serie di metadata specifici per facebook. Questo passo, non è strettamente necessario, visto che facebook è perfettamente in grado di riconoscere i contenuti anche da solo, ma certamente aiutarlo non fa affatto male, per evitare errori da una parte, o aggiungere un po' di personalizzazioni.

Quello che dovrete aggiungere è qualcosa di molto simile a questo:

<meta property="og:title" content="TITOLO DELLA PAGINA" />
<meta property="og:type" content="article" />
<meta property="og:url" content="URL COMPLETA " />
<meta property="og:image" content="DOMINIO DEL VOSTRO SITO" />
<meta property="og:site_name" content="NOME DEL VOSTRO SITO" />
<meta property="fb:app_id" content="ID DI UNA APPLICAZIONE FACEBOOK, PER AMMINISTARE" />
<meta property="fb:admins" content="VOSTRO ID UTENTE SU FACEBOOK" />
<meta property="og:description" content="UNA BREVE DESCRIZIONE DELLA PAGINA" />

La maggior parte dei metadata per facebook sono facilmente configurabili e non richiedono ulteriori spiegazioni, mentre altri potrebbero creare delle difficoltà.

In particolare se volete essere in grado di moderare i commenti alla vostra pagina avrete necessariamente bisogni di conoscere il vostro ID utente facebook, oppure, creare una nuova applicazione facebook, che renderà l'amministrazione dei commenti molto più agevole, permettendovi di visualizzare su un'unica pagina tutti i commenti lasciati sul vostro sito.

Id Utente:
Il modo più rapido per conoscere il proprio ID utente è quello di utilizzare lo strumento di configurazione degli Open Graph Tags (i metadata di facebook) che trovate nella pagina di facebook like button: troverete un pratico strumento per generare tutti i tag in questione, tra cui, appunto in vostro ID utente di Facebook, ovvero quel numero che trovate nella casella Admin.

Creare una applicazione vuota
Per poter amministrare meglio i commenti consiglio di creare una applicazione vuota su facebook. Non sarà necessario progettare una applicazione che faccia chissà cosa, ma semplicemente impostare qualche facile parametro per ottenere un ID applicazione.

Ecco come fare: Andate alla pagina di gestione delle applicazioni facebook e cliccate su crea applicazione. Nella finestra che si aprirà è basta impostare un nome per la vostra nuova applicazione. Una volta cliccato su continua ed immesso un nosiosissimo captcha (attenzione riconosce maiuscole e minuscole) vi si aprirà una pagina con i dettagli della app appena creata. Non modificate nulla e salvate. Subito sotto al nome della vostra app ora avrete a disposizione l'importantissimo Id per l'amministrazione dei commenti.

Rendere dinamici i metadata per facebook

Tutto quanto detto finora va bene per una pagina statica, ma se il vostro è un sito dinamiico (joomla o wordpress) dovrete lavorate un po' sui tag di facebook, per far siì che questi cambino a seconda della pagina su cui li state visualizzando.

Il modo più rapido è accedere al codice sorgente che genera l'articolo:per Joomla aprite il file components/com_contents/views/article/view.html.php ed aggiungere un po' di righe di codice.

$baseurl = JURI::root(false);
$baseurl = rtrim($baseurl,'/');
$articleurl = $this->item->readmore_link;
$facebook = '<meta property="og:title" content="'.$this->escape($this->item->title).'" />'.PHP_EOL;
$facebook .= '<meta property="og:type" content="article" />'.PHP_EOL;
$facebook .= '<meta property="og:url" content="'.$baseurl.$articleurl.'" />'.PHP_EOL;
if ($this->item->images) :
$immagini = json_decode($this->item->images);
$facebook .= '<meta property="og:image" content=" '.$baseurl.'/'.$immagini->image_fulltext.'" />'.PHP_EOL;
else :
$facebook .= '<meta property="og:image" content="UNA IMMAGINE DI BACKUP" />'.PHP_EOL;
endif;
$facebook .= '<meta property="og:site_name" content="'.$app->getCfg('sitename').'" />'.PHP_EOL;
$facebook .= '<meta property="fb:app_id" content="id APPLICAZIONE" />'.PHP_EOL;
$facebook .= '<meta property="fb:admins" content="ID UTENTE" />'.PHP_EOL;
$facebook .= '<meta property="og:description" content="'.$this->item->metadesc.'" />'.PHP_EOL;
$this->document->addCustomTag ($facebook);

Configurare i commenti di Facebook

Prima di tutto recuperiamo il codice che genera il Box dei commenti facebook, utilizzando lo strumento di configurazione che trovate tra i social plugins.

Configuratelo secondo i vostri gusti: non è difficile... è sufficiente inserire la URL della pagina sulla quale volete che appaia, scegliere la larghezza corretta ed il layout più appropriato per il vostro sito.

Una volta che avrete cliccato su "Get Code" otterrete due differenti codici da inserire sul vostro sito:

il primo è il codice javascript che abilita qualunque tipo di social plugin di facebook: like button, like box, recommendations, ecc... tra questi c'è anche il comments box di cui stiamo parlando. Quindi, se avete aggiunto alla vostra pagina altri widget di facebook non dovrete reinserirlo.

<div id="fb-root"></div>
<script>(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/it_IT/all.js#xfbml=1&appId=347501115314207";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

La seconda parte è, invece, quella che genera il box dei commenti, che dovrete copiare direttamente nel codice della vostra pagina nel punto in cui desiderate che venga visualizzato.

<div class="fb-comments" data-href="URL DELLA VOSTRA PAGINA" data-num-posts="NUMERO DEI COMMENTI" data-width="LARGHEZZA"></div>

Se il vostro sito genera le pagine dinamicamente dovrete lavorarci un po' su in modo da inserire correttamente la url della pagina su cui lo state pubblicando. 
Visto che la maggior parte dei siti dimanici sono scritti in PHP (Joomla e Wordpress principalmente), d'ora in poi, farò riferimento solo a questo.

Un buon modo per trovare la url corrente del vostro articolo è:

$server = $_SERVER['SERVER_NAME'];
$uri= $_SERVER['REQUEST_URI'];
$cercainterr = strpos ($uri,'?');
if ($cercainterr > 0 ):
  $uri = substr ($uri,0, $cercainterr);
endif;
$path = 'http://'.$server .$uri;

Il codice qui esposto è pensato per site che utilizzano il mod_Rewrite, e che, quindi, scrivono gli indirizzi in forma comprensibile per i motori di ricerca, oltre che per gli esseri umani.

Il vostro box dei commenti di faceboook diventerà, quindi, come questo qui sotto:

<div class="fb-comments" data-href="<?php echo $path; ?>" data-num-posts="2" data-width="635" ></div>

Ora il vostro sito web è pronto a ricevere i commenti dai vostri utenti.

 

404538 Ultima modifica il Martedì, 07 Aprile 2015
ProgettoWebFirenze

Da ormai oltre 10 anni combatto al fianco dei clienti la dura battaglia per l'indicizzazione dei loro siti web.

Dopo studi di economia e marketing, ho lavorato per qualche tempo presso una agenzia SEO di New York dove ho appreso i primi segreti, gioito per i primi successi e imparato dai primi fallimenti

Oggi, a distanza di qualche anno, ho fondato ProgettoWebFirenze, agenzia di produzione e indicizzazione di siti web a Firenze: tra sviluppatori, grafici, SEO e commerciali siamo ormai in molti e continuiamo a crescere.

Questo è il mio (nostro) blog dove raccogliamo notizie, consigli pareri e qualche sciocchezza sul argomenti come il web design, la SEO ed il web marketing in generale.

Lascia un commento

Assicurati di aver digitato tutte le informazioni richieste, evidenziate da un asterisco (*). Non è consentito codice HTML.

Vuoi avere informazioni? Lasciaci il tuo contatto.

Veniamo noi da te!

Riempi tutti i campi
Grazie, ti richiameremo appena possibile
* Le tue informazioni personali sono protette. Leggi la nostra Privacy Policy per maggiori informazioni

logo bianco

Agenzia web per la creazione di siti internet a Firenze.

Se hai bisogno di maggiori informazioni sui nostri servizi web, sui nostri piani di gestione di web marketing e su tutto quello che facciamo, contattaci quando vuoi e saremmo ben lieti di dare una risposta a tutte le tue domande.

Ma per cortesia, evita di copiare i nostri contenuti creativi: sono stati reati nel tempo con fatica e passione. Se hai una agenzia web tutta tua e stai cercando ispirazione contattaci e saremmo ben lieti di aiutarti. Ma non copiare. Il copyright è una cosa seria.