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
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
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
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
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 == "item"'>
<div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#appId=141682849195885&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
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
I commenti inseriti saranno visualizzabili anche sulla Bacheca del Profilo o su quella della pagina fan a seconda della identità che si è scelto
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 == "item"'>
<div id='fb-root'/><script src='http://connect.facebook.net/it_IT/all.js#appId=141682849195885&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.
puoi eliminare dal blog eventuali commenti ritenuti offensivi o altro??
RispondiElimina@Tex Willer
RispondiEliminaIl proprietario visualizza il pulsante Rimuovi nel plugin del blog così come accade su Facebook
Ciao, non riesco a trovare body nel mio layout html, sicuramente l'avrò modificato e non so riconoscerlo.
RispondiEliminaSei sempre aggiornatissimo!
RispondiElimina@Bblogger
RispondiEliminaGrazie. 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.
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...
RispondiEliminati segnalo qui una piccola modifica al codice sorgente per far interagire meglio facebook con blogger...
RispondiEliminahttp://www.lucachirico.com/2011/03/blog-facebook-e-i-nuovi-commenti.html
Grazie mille Luca, adesso tutto funziona perfettamente!
RispondiEliminaPer 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?
@Luca Chirico
RispondiEliminaGrazie 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
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:
RispondiEliminahttp://www.bigthink.it/impostare-lanteprima-quando-condividiamo-un-post-su-facebook/
@CalcioNapoli
RispondiEliminaInserisci il codice dell'ultimo aggiornamento con l'ID della tua applicazione e dovrebbe funzionare perfettamente.
Ciao
P.S Anch'io seguo BigThink :)
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.
RispondiElimina2) 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
@parsifal32
RispondiEliminatroppo 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...
@CalcioNapoli365.com
RispondiEliminalinkeresti la tua applicazione in modo da poter vedere assieme dove è l'errore?
@Calcio Napoli
RispondiEliminaIl 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
Ragazzi visto che utilizzo addthis per condividere con i social network, potrebbe risiedere nella configurazione di default del plugin?
RispondiEliminaMagari 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&
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:
RispondiEliminaexpr:addthis:title='data:post.title' expr:addthis:url='data:post.url'
@CalcioNapoli
RispondiEliminaNon credo dipende dal fatto che FB e Blogger non sempre sono in sintonia
Va beh, aspettiamo magari in futuro ci saranno novità.
RispondiEliminaGrazie ;)
mhhh
RispondiEliminahai 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ò...
Parsifal e Luca, ho trovato qualcosa qui:
RispondiEliminahttp://marcorobutti.blogspot.com/2011/03/migliorare-lanteprima-dei-post.html
@CalcioNapoli
RispondiEliminaC'è del malware dovuto a Fileden
Dove c'è del malware Parsifal?
RispondiEliminaAdesso è 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
RispondiEliminaAh 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:
RispondiEliminai (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?
@CalcioNapoli
RispondiEliminaTu hai chiaramente un javascript nel modello che infastidisce Facebook
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@CalcioNapoli
RispondiEliminaNon lo so. L'hack che hai usato non era il mio
Ho risolto! Ho trovato una soluzione ancora migliore, se vuoi potresti inserirla magari in un post per chi avesse la stessa mia esigenza.
RispondiEliminaHo 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.
@CalcioNapoli
RispondiEliminaHo 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 :)
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.
RispondiEliminaTi 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@CalcioNapoli
RispondiEliminaNon ne sono a conoscenza
Grazie lo stesso Parsifal.
RispondiEliminaLa 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?
@CalcioNapoli
RispondiEliminaBlogger non è in PHP ma in XML...
ciao!
RispondiEliminal'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"?
@Davide Morante Facebook in altri plugin ha dato la possibilità di implementarli anche nei blog scuri. A tal proposito puoi leggere questi due post
RispondiEliminahttp://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
Questo articolo mi era sfuggito.
RispondiEliminaGrazie Parsi. :)
LeNny
Non è stato possibile analizzare il tuo modello, in quanto non è strutturato correttamente. Assicurati che tutti gli elementi XML presentino il tag di chiusura richiesto.
RispondiEliminaMessaggio di errore XML
Error 500
@admin????
RispondiEliminaForse 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 :)
@Ernesto T.
RispondiEliminapeccato 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
Ho creato e eliminato una App di prova a questo indirizzo
RispondiEliminahttp://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.
@Ernesto T.
RispondiEliminaci 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.
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...
RispondiEliminaQuando 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
@Petra
RispondiEliminati 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.
@Petra Mi sa di sì :(
RispondiEliminaMha 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
RispondiEliminaMa 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."
RispondiEliminaUffaaaa
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@Affari Nostri
RispondiEliminaHai ragione, nei nuovi modelli quel tag non c'è. La riga va inserita prima di questa
<body expr:class='"loading" + data:blog.mobileClass'>
Ho corretto il post.
@Petra
RispondiEliminaDevi inserire il numero di cellulare. Ti arriverà via SMS un codice che dovrai poi incollare in un modulo. Semplicissimo.
Prima di tutto toglimi una curiosità! cosa serve la Chiave API e la App Secret? E cosa succede se te la scoprissero?
RispondiEliminapoi 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?
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!
RispondiEliminai 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@Corvo Michele
RispondiEliminaQuando 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.
@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@Ernesto T.
RispondiEliminaHo un problema! Quando lascio un commento in un post, esso appare in tutti gli altri post!!!
@Corvo Michele Forse non hai letto l'aggiornamento di questo post
RispondiEliminanon so per quale motivo mi appare:
RispondiEliminaWarning: http://www.notiziefolli.com/2011/03/airbike-la-bici-che-stampi-col-pc.html is unreachable.
e ho seguito passo passo la guida :D
@Valerio
RispondiEliminaNon saprei dirti. Forse non ti è stato possibile creare l'applicazione...
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!!
RispondiEliminaa me non cè il rigo div class='post-footer' e data:post.body/ sapete come fare??
RispondiElimina