Pubblicato il 02/03/11 - aggiornato il  | 62 commenti :

Come installare il Social Comments Plugin in Blogger per visualizzare i commenti sul Profilo di Facebook o sulla Pagina Fan.

La notizia era nell'aria da diverso tempo ma una cosa sono i si dice un'altra è vedere una nuova tecnologia all'opera dal vivo. L'obiettivo di Facebook è quello di acquisire tutte le discussioni che avvengono nei siti pubblicandole nei Profili o sulle pagine fan. La cosa non è nuova visto che ci sono dei plugin di Wordpress o un servizio come Disqus che lo fanno da tempo.

Il grande atout in mano a Facebook è che questi commenti saranno integrati totalmente nel social network dove si sposterà inevitabilmente la discussione. Il progetto prende il nome di Improving Comments Across The Web. Sarà necessario creare una applicazione e acquisirne l'ID. Dovremo inserire questo elemento

<meta property="fb:app_id" content="{YOUR_APPLICATION_ID}">

nel modello prima di </head>. Quindi questo script

<script src="http://connect.facebook.net/it_IT/all.js#xfbml=1"></script>

prima del tag <body>. Nella zona del modello in cui vogliamo far apparire i commenti sarà sufficiente aggiungere queste due righe

<div id="fb-root"></div>
<fb:comments href="YOUR_CANONICAL_URL"></fb:comments>

Le parti in rosso devono essere sostituite rispettivamente dall'ID dell'applicazione e dall'URL del blog. La novità è che per la prima volta ho visto questo servizio di commenti implementato in TechCrunch. Andando alla fine del post si può cliccare su Add a Comment e scegliere di commentare con la propria identità o loggandoci come pagina fan. Questo è tutto per quello che riguarda la teoria.

Plugin Commenti Facebook da inserire in Blogger

All'atto pratico vediamo come fare per introdurre i commenti di Facebook in un blog su Blogger. Per prima cosa va creata una applicazione relativa al nostro sito anche se potrà essere utilizzata pure per altri blog. Dopo aver eseguito l'accesso si introduce il nome dell'applicazione 

applicazione facebook 

Si mette la spunta a Sono d'accordo con i Termini di Facebook e si clicca su Create App. Il nome dell'applicazione non potrà essere tale da essere confuso con una App di Facebook o contenere marchi. Dopo aver superato il controllo visivo di sicurezza, saremo nella homepage della applicazione che potremo arricchire con descrizione, icona e logo. Si clicca su Salva Modifiche per terminare. Tutte le applicazioni che abbiamo creato saranno visibili nella finestra successiva

applicazioni facebook create

Selezionando ciascuna di esse si potrà acquisirne l'ID che nello screenshot ho evidenziato di giallo. Per la creazione di una applicazione si può semplicemente anche registrare il nostro sito su Facebook e l'App relativa sarà creata automaticamente.

Adesso andate nella pagina del Comments Social Plugin. Per acquisire il codice si dovrà semplicemente incollare l'URL della homepage del nostro blog 

comments plugin facebook

Si potranno scegliere il numero di commenti da visualizzare e la larghezza del widget da adattare al nostro template. Si clicca su Get Code per terminare. Insieme al codice vi verrà indicata anche l'applicazione che state utilizzando

codice applicazione commenti facebook 

Adesso non resta che incollare il codice nel modello di Blogger. Per il momento mi limiterò a indicare come inserire i commenti di Facebook subito sotto al testo dell'articolo. In questo modo si darà ai visitatori la possibilità di commentare nel blog come al solito o direttamente su Facebook. Per altre opzioni eventualmente ci ritornerò sopra in seguito.

Andate su Design > Modifica HTML e espandete i modelli widget. Dopo aver salvato il modello, cercate la riga <div class='post-footer'> oppure l'altra <data:post.body/>. Incollate questo codice immediatamente sotto

<!--Comments Plugin Facebook-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#appId=141682849195885&amp;xfbml=1'/><fb:comments href='http://design-prova.blogspot.com/' num_posts='5' width='500'/>
</b:if>
<!--Comments Plugin Facebook - http://www.ideepercomputeredinternet.com-->

Le due righe in rosso impongono al plugin di essere visto solo nei post, le righe in viola sono invece il codice che è stato acquisito da Facebook. Volendo si può utilizzare anche la mia applicazione sostituendo solo l'URL del blog, il numero di post e la larghezza. Però è preferibile che vi creiate una vostra applicazione e inseriate il vostro codice al posto delle due righe di colore viola.

Per avere una idea di come funziona aprite aprite questo post. Se andate su Add a Comment potete inserire un commento

aggiungi commento facebook

Si potrà scegliere se commentare con il nostro Profilo o con l'identità di una nostra pagina fan. Se i commenti sono in numero superiore a quello massimo, apparirà la scritta View X More per visualizzarli tutti

view more commenti facebook

I commenti inseriti saranno visualizzabili anche sulla Bacheca del Profilo o su quella della pagina fan a seconda della identità che si è scelto

commenti visibili sulla bacheca di facebook

Sarà possibile anche cliccare su Mi Piace direttamente su un commento altrui dal blog senza accedere su Facebook. Questo plugin è visibile correttamente con Chrome, Firefox e Internet Explorer 9.

Aggiornamento: Sulla falsariga di altri widget, è possibile migliorare il plugin dei commenti su Facebook, inserendo l'URL del post al posto della homepage del blog. Si utilizza lo stesso codice che abbiamo impiegato nei bottoni di voto. L'URL di un post di Blogger è infatti determinato dalla stringa data:post.url. Il codice può essere così aggiornato

<!--Comments Plugin Facebook-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/><script src='http://connect.facebook.net/it_IT/all.js#appId=141682849195885&amp;xfbml=1'/><fb:comments expr:href='data:post.url' num_posts='5' width='500'/>
</b:if>
<!--Comments Plugin Facebook - http://www.ideepercomputeredinternet.com-->

dove dovrà essere inserito l'ID della applicazione evidenziato in viola, il numero di post da visualizzare e la larghezza dell'area dei commenti, colorati di rosso. Ringrazio Luca Chirico per l'idea della modifica.




62 commenti :

  1. puoi eliminare dal blog eventuali commenti ritenuti offensivi o altro??

    RispondiElimina
  2. @Tex Willer
    Il proprietario visualizza il pulsante Rimuovi nel plugin del blog così come accade su Facebook

    RispondiElimina
  3. Ciao, non riesco a trovare body nel mio layout html, sicuramente l'avrò modificato e non so riconoscerlo.

    RispondiElimina
  4. Sei sempre aggiornatissimo!

    RispondiElimina
  5. @Bblogger
    Grazie. Arrivare per primo su una notizia è fondamentale per i giornalisti e per i blogger

    @Affari Nostri
    Se ti riferisci all'inserimento del plugin non devi trovare il tag body ma
    div class='post-footer'
    oppure
    data:post.body
    Dopo aver cliccato su espandi i modelli widget, vai su F3 e incolla una delle due stringhe di sopra nel campo che si apre nel browser. Vedrai immediatamente le righe che cerchi.

    RispondiElimina
  6. Salve, ho notato un malfunzionamento del plugin, sarei curioso di sapere se accade anche a voi che i commenti di un post siano visibili anche sotto altri post, in pratica è come se gli utenti avessero commentato il sito e non il singolo post...

    RispondiElimina
  7. ti segnalo qui una piccola modifica al codice sorgente per far interagire meglio facebook con blogger...

    http://www.lucachirico.com/2011/03/blog-facebook-e-i-nuovi-commenti.html

    RispondiElimina
  8. Grazie mille Luca, adesso tutto funziona perfettamente!

    Per rimanere in tema, quando viene condiviso un post su facebook viene visualizzata una immagine casuale, spesso i banner, è possibile impostare che venga visualizzata esclusivamente l'immagine presente nell'articolo con Blogger?

    RispondiElimina
  9. @Luca Chirico
    Grazie dell'idea. La riporto nel post con il doveroso link.

    @CalcioNapoli365.com
    Quello della miniatura su FB è un problema di tutti i blog su Blogger. Se non le hai ancora fatto prova a fare queste modifiche
    http://www.ideepercomputeredinternet.com/2010/10/come-inserire-la-descrizione-del-blog.html

    RispondiElimina
  10. Grazie mille Parsifal, proverò e farò sapere...con Wordpress sono riusciti a risolvere ti riporto un link trovato in rete, magari potrà serverti sfruttando le tue potenzialità per riuscire ad implementarlo con blogger:

    http://www.bigthink.it/impostare-lanteprima-quando-condividiamo-un-post-su-facebook/

    RispondiElimina
  11. @CalcioNapoli
    Inserisci il codice dell'ultimo aggiornamento con l'ID della tua applicazione e dovrebbe funzionare perfettamente.
    Ciao
    P.S Anch'io seguo BigThink :)

    RispondiElimina
  12. 1) Parsifal avevo già inserito l'ID della mia applicazione ma visualizzo sempre una immagine random quando provo a condividere un post...se vuoi puoi provare a condividere, l'indirizzo è quello del mio nick, nella maggior parte dei casi mi dà in anteprima i banner presenti nelle pagine.

    2) Ho inserito poi la descrizione, metatag e le keywords come descritto meravigliosamente nell'articolo che mi hai linkato in precedenza, per mostrare i dati solo in homepage bisogna sostituire



    con

    <b:if cond='data:blog.pageType == "index"’>

    ?

    03 marzo 2011 17:00

    RispondiElimina
  13. @parsifal32

    troppo gentile, voleva essere un semplice aiuto, grazie apprezzo molto.


    @CalcioNapoli365.com

    non credo che al momento sia fattibile con blogger

    @parsifal32

    se seguisse il tuo consiglio avrebbe magari sempre il logo del blog come immagine...per avere un'immagine specifica a meno di lavorare in elaborazione magari con php credo che di dimanico non ci sia nulla, a meno che non esista una funzione miniatura attribuibile all'articolo e poi richiamabile nel codice...

    RispondiElimina
  14. @CalcioNapoli365.com

    linkeresti la tua applicazione in modo da poter vedere assieme dove è l'errore?

    RispondiElimina
  15. @Calcio Napoli
    Il tuo problema è comune a molti su Blogger. L'inserimento della descrizione solo in homepage si è rivelata utile in alcuni casi. Anche a me capita spesso di avere come immagine l'icona di FeedBurner o il mio antipixel. Qualche volta capita anche che il testo visualizzato su FB sia il primo commento del post

    RispondiElimina
  16. Ragazzi visto che utilizzo addthis per condividere con i social network, potrebbe risiedere nella configurazione di default del plugin?
    Magari personalizzandola in qualche modo visto che siete molto più esperti di me..;)
    Vi posto alcune righe del codice:

    addthis_default_style' expr:addthis:title='data:post.title' expr:addthis:url='data:post.url'>
    <a class='addthis_button_compact' href='http://www.addthis.com/bookmark.php?v=250&

    RispondiElimina
  17. Avevo postato il commento, ma non lo trovo forse per problemi della mia connessione..per condividere utilizzo addthis, magari il problema potrebbe risiedere nella configurazione di default del plugin che è la seguente:

    expr:addthis:title='data:post.title' expr:addthis:url='data:post.url'

    RispondiElimina
  18. @CalcioNapoli
    Non credo dipende dal fatto che FB e Blogger non sempre sono in sintonia

    RispondiElimina
  19. Va beh, aspettiamo magari in futuro ci saranno novità.
    Grazie ;)

    RispondiElimina
  20. mhhh

    hai provato ad inserire i meta tag nativi di FB?

    meta content='TUO USERNAME FACEBOOK' property='fb:admins'/

    meta content='article' property='og:type'/

    meta content='TUA ID APPLICAZIONE' property='fb:app_id'/

    meta content='LINK ALLA IMMAGINE BASE O LOGO DEL BLOG' property='og:image'/

    meta content='DESCRIZIONE PER INVOGLIARE AL COMMENTO' property='og:description'/

    l'immagine non sarà mai quella dell'articolo però...

    RispondiElimina
  21. Parsifal e Luca, ho trovato qualcosa qui:

    http://marcorobutti.blogspot.com/2011/03/migliorare-lanteprima-dei-post.html

    RispondiElimina
  22. @CalcioNapoli
    C'è del malware dovuto a Fileden

    RispondiElimina
  23. Adesso è stato tolto ed è tutto OK. Lo segnalava Chrome. Non ho testato ma serve solo per mostrare sempre la stessa icona che deve essere precedentemente caricata su un hosting

    RispondiElimina
  24. Ah ok..da stamattina condividendo post su facebook dal pulsante di condivisione o incollando il link del post nello stato di facebook, nell'anteprima visualizzo un messaggio strano:

    i (function() { var a=window;function c(b){this.t={};this.tick=function(d,i,e){e=e!=undefined?e:(new Date).getTime();this.t[d]=[e,i]};this.tick("start",null,b)}var f=new c;a.jstiming={Timer:c,load:f};try{var g=null;if(a.chrome&&a.chrome.csi)g=Math.floor(a.chrome.csi().pageT);if(g==null)if(a.gtbExter

    Mentre il titolo è correttamente inserito...succede anche a voi?

    RispondiElimina
  25. @CalcioNapoli
    Tu hai chiaramente un javascript nel modello che infastidisce Facebook

    RispondiElimina
  26. Avevo impostato l'immagine predefinita di condivisione, ottenendo un'immagine fissa (logo) per tutti i post che venivano condivisi..fino a ieri sera tutto ok, purtroppo però stamattina ho eliminato erroneamente quest'immagine che era hostata su Picasa provocando questo tipo di errore..anche eliminando la stringa di impostazione dell'immagine fissa in head il problema non viene risolto, i javascript presenti nel modello sono addthis e jquery, cosa pensi che sia successo così d'improvviso?

    RispondiElimina
  27. @CalcioNapoli
    Non lo so. L'hack che hai usato non era il mio

    RispondiElimina
  28. Ho risolto! Ho trovato una soluzione ancora migliore, se vuoi potresti inserirla magari in un post per chi avesse la stessa mia esigenza.

    Ho inserito un meta content che mi dia un messaggio descrittivo fisso (descrizione del sito), associato ad una immagine fissa (logo del sito) da incollare prima della riga di chiusura "/head":

    "tag"meta content='INSERIRE DESCRIZIONE FISSA' name='description'/><link href='URL IMMAGINE FISSA' rel='image_src'/"tag"

    In questo modo ottengo nei post l'immagine del logo del sito che "gira" ottenendo pubblicità su facebook, in più al posto della descrizione della notizia la descrizione del sito.

    RispondiElimina
  29. @CalcioNapoli
    Ho scritto questo post
    http://www.ideepercomputeredinternet.com/2010/10/come-inserire-la-descrizione-del-blog.html
    proprio per evitare che Facebook acquisisse sempre la stessa descrizione :)

    RispondiElimina
  30. Conosco quell'articolo, avevo già quelli impostato i metatag come da te descritto ma ciononostante non mi dava una descrizione fissa nei post..inserendo invece la forzatura dell'immagine e della descrizione che ti ho descritto funziona tutto bene.

    RispondiElimina
  31. Ti risulta possibile fare l'operazione inversa, cioè inserire magari dei codici in html all'interno dei widget con immagini che impediscano a facebook di inserirle in anteprima?

    RispondiElimina
  32. @CalcioNapoli
    Non ne sono a conoscenza

    RispondiElimina
  33. Grazie lo stesso Parsifal.

    La soluzione adottata dagli utilizzatori di Wordpress inserendo delle righe di comando in un file php pensi che non possa essere in nessun modo adattata e implementata da noi con Blogger?

    RispondiElimina
  34. @CalcioNapoli
    Blogger non è in PHP ma in XML...

    RispondiElimina
  35. ciao!
    l'ho installato senza problemi.
    ma il mio blog ha lo sfondo scuro. e i commenti lasciati risultano di difficile lettura.
    c'è un modo per "schiarire"?

    RispondiElimina
  36. @Davide Morante Facebook in altri plugin ha dato la possibilità di implementarli anche nei blog scuri. A tal proposito puoi leggere questi due post
    http://www.ideepercomputeredinternet.com/2010/07/come-rendere-visibile-il-pulsante-mi.html
    http://www.ideepercomputeredinternet.com/2010/09/come-installare-il-like-box-di-facebook.html
    Con questo però viene utilizzato un altro linguaggio. Prova a smanettare un po' con i codici. Ciao

    RispondiElimina
  37. Questo articolo mi era sfuggito.

    Grazie Parsi. :)

    LeNny

    RispondiElimina
  38. Non è stato possibile analizzare il tuo modello, in quanto non è strutturato correttamente. Assicurati che tutti gli elementi XML presentino il tag di chiusura richiesto.
    Messaggio di errore XML
    Error 500

    RispondiElimina
  39. @admin????
    Forse ti riferisci all'inserimento di un metatag.
    Prova a inserire una slash prima della chiusura cioè così
    .../>
    Spero di aver capito ma prova a essere meno criptico la prossima volta :)

    RispondiElimina
  40. @Ernesto T.
    peccato ancora non funziona facebook!anche a voi non fa creare l'applicazione?ci provo da un paio di giorni,sia per questo sia per inserire il pulsante send..vorrei capire se è un problema mio o generale

    RispondiElimina
  41. Ho creato e eliminato una App di prova a questo indirizzo
    http://www.facebook.com/developers/createapp.php
    Va messa la spunta su Sono d'accordo e inserita la Captcha. Funziona perfettamente anche se sono giorni che FB dà i numeri.

    RispondiElimina
  42. @Ernesto T.

    ci credo,anche perchè tu l'hai già realizzata..io purtroppo non ci riesco.mi da sempre errore..ho provato con un altro account e niente.quindi penso sia una cosa generale,mi da il classico segnale di errore di facebook.spero di poterla realizzare quanto prima!anche perchè l'aveva istallata nella formattazione facebook e mi sono accorto che non si commentava l'articolo ma la pagina ed era davvero brutta come cosa,mentre come possibilità di commento sarebbe bella.ho notato che con questa applicazione i commenti sono invogliati.vediamo quando si risolve la cosa.grazie mille.a presto.

    RispondiElimina
  43. Ciao,tanto per cambiare quando tutti gli altri ti chiedo info o addirittura condividono con te altri modi di fare...arrivo io e abbassoil livello di conversazione...
    Quando cerco di creare l'applicazione facebook mi dice:Sorry, something went wrong.

    We're working on getting this fixed as soon as we can.

    Go Back...
    Questo da un paio di giorni...che faccio..aspetto ancora?Grazie

    RispondiElimina
  44. @Petra

    ti consiglio di aspettare petra,ho potuto constatare che è un porblema di tanti.il mitico ernesto c'è riuscito forse perchè l'ha realizzata subito,adesso ci sono un pò di problemi.anche per me è lo stesso.infatti lo avevo già commentato qui nel post sopra il tuo.

    RispondiElimina
  45. Mha sinceramente ho provato disqus e ne sono rimasto felice!certo magari non ha lo stesso successo di quello di facebook ma bisogna considerare anche i problemi di facebook ogni volta che migliora il servizio..ho trovato al soluzione definitiva ai miei commenti :) grazie ernesto

    RispondiElimina
  46. Ma nn ci riesco quando cerco di creare l'applicazione mi dice" Il tuo account deve essere verificato prima di poter fare questa azione. Per favore, verifica il tuo account inserendo il tuo telefono cellulare o la credit card."
    Uffaaaa

    RispondiElimina
  47. No in realtà mi riferisco al tag body prima del quale dovrei aggiungere src="http://connect.facebook.net/it_IT/all.js#xfbml=1". Non riesco a trovare body non so perchè....

    RispondiElimina
  48. @Affari Nostri
    Hai ragione, nei nuovi modelli quel tag non c'è. La riga va inserita prima di questa
    <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
    Ho corretto il post.

    RispondiElimina
  49. @Petra
    Devi inserire il numero di cellulare. Ti arriverà via SMS un codice che dovrai poi incollare in un modulo. Semplicissimo.

    RispondiElimina
  50. Prima di tutto toglimi una curiosità! cosa serve la Chiave API e la App Secret? E cosa succede se te la scoprissero?
    poi perchè alla fine di ogni codice del plugin c'è scritto per esempio:
    Comments Plugin Facebook - e il tuo sito?
    Non che mi disturbi :) ma per curiosità a cosa serve e cosa succede se si cambia?


    TUTTI GLI SCANDALI DEL VATICANO mi puoi dire dove hai trovato quel bellissimo template e dove posso andare per avere i commenti come nel tuo blog?

    RispondiElimina
  51. i commenti li trovi s disqus,l'ho trovato per caso ma se lo cerchi qui nel blog di ernesto vedrai che ne ha parlato.il template 'ho trovato i una pagina di template ora non ricordo bene quale,si chiava revolution church,già così lo troverai di sicuro!

    RispondiElimina
  52. i commenti li trovi s disqus,l'ho trovato per caso ma se lo cerchi qui nel blog di ernesto vedrai che ne ha parlato.il template 'ho trovato i una pagina di template ora non ricordo bene quale,si chiava revolution church,già così lo troverai di sicuro!

    RispondiElimina
  53. @Corvo Michele
    Quando si inserisce un codice è bene mettere un commento all'inizio e alla fine per ricordarsi successivamente a cosa serve quel codice, dove inizia e dove finisce. Spesso inserisco anche l'indirizzo del mio sito come una specie di firma. Non è un link attivo, non porta da nessuna parte e lo puoi tranquillamente togliere se ti disturba.

    #Tutti gli...
    Non ho mai parlato di Disqus perché penso che i commenti sia meglio lasciarli su Blogger dal punto di vista SEO, però visto che in molti lo usano penso che ci farò un post.

    RispondiElimina
  54. @parsifal32 scusa hao visto ed effettivamente non hai fatto un post,però l'ho letto tra un commento o da quache citazione.comunque sicuramente hai ragione sul fatot che sarebbe meglio lasciarli sulla piattaforma blogger,perchè metti che chiude disqus uno perde tutti i commenti.però il mio blog non è tanto commentato,quindi non me ne farei drammi.in ogni caso se voui farne un post avrebbe successo perchè ti permette anche di taggarti come utente facebook e quindi può essere sostitutiva dei commenti facebook,che io personalmente ho inbstallato ma poi li vedevo come commenti alla pagina più che al link,visto che gli stessi commneti si ripresentavano continuamente!

    RispondiElimina
  55. @Ernesto T.
    Ho un problema! Quando lascio un commento in un post, esso appare in tutti gli altri post!!!

    RispondiElimina
  56. @Corvo Michele Forse non hai letto l'aggiornamento di questo post

    RispondiElimina
  57. non so per quale motivo mi appare:

    Warning: http://www.notiziefolli.com/2011/03/airbike-la-bici-che-stampi-col-pc.html is unreachable.

    e ho seguito passo passo la guida :D

    RispondiElimina
  58. @Valerio
    Non saprei dirti. Forse non ti è stato possibile creare l'applicazione...

    RispondiElimina
  59. Valerio lascia perdere la chat di Facebook punta su Disqus,dai retta a me ;) Nemmeno io ci sono riuscito,ti sono sincero,l'ho messa ma alla fine i post mi commentavano tutta la pagine,non sono stato capace di creare un'applicazione,visto che non mi si carica la pagina mai!!

    RispondiElimina
  60. a me non cè il rigo div class='post-footer' e data:post.body/ sapete come fare??

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy