Praticamente tutti i blog hanno ormai un pulsante “Condividi su Facebook” che apre una noiosa finestra popup esterna per pubblicare l’articolo sulla bacheca del proprio profilo.
E se invece integrassimo questa funzionalità con Facebook Connect? Cosa succederebbe? Semplice, invece di avere una finestra esterna, si aprirebbe un layer interno alla pagina con il famoso stile delle finestre di Facebook. Avete presente? Sì, quelle con il bordo semi-trasparente.
L’effetto è sicuramente più simpatico ed è anche più comodo per l’utente che non deve interagire con popup, spesso bloccati dai filtri. Ovviamente la cosa funziona solamente se l’utente ha effettuato il login al vostro blog tramite Facebook Connect.
Possiamo allora creare un pulsante che si comporta diversamente nei due casi: se l’utente è loggato con il suo account Facebook, gli mostriamo la finestra integrata, altrimenti apriamo il solito popup.
Ecco il codice da inserire all’interno del Loop:
$link = get_permalink($post->ID);
if(fb_get_loggedin_user()){
$js = "FB.Connect.showShareDialog('$link', function() {}); return false;";
}else{
$js = "window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(location.href)+'&t='+encodeURIComponent(document.title),'sharer','toolbar=0,status=0,width=626,height=436'); return false;";
}
?>
<a href="http://www.facebook.com/share.php?u=<?php echo $link; ?>" onclick="<?php echo $js; ?>">Condividi su Facebook</a>
Ovviamente potete sostituire il testo “Condividi su Facebook” con l’immagine o il pulsante che preferite.
C’è anche un secondo metodo che consiste nell’usare l’apposito tag FBML per renderizzare il pulsante di “Share” di default, che tuttavia non è molto personalizzabile:
Da tenere presente che anch’esso viene visualizzato solo se l’utente è loggato con Facebook Connect.
Il risultato potete vederlo loggandovi sul mio blog tramite Facebook Connect (vedi pulsante blu nel form dei commenti) e cliccando sul pulsantone “Condividi” qui sotto l’articolo.
Questo è tutto, se avete domande o problemi lasciate pure un commento.
Ciao, ho visto il tuo blog ed è stupendo! Io ho integrato nel mio blog (blogger) la comment box fi facebook ma è molto irritante il fatto che quando qualcuno commenta i miei post NON RICEVO notifiche. Quindi se uno commento i miei vecchi post non vengo avvisata.
Tu come li hai creati questi commenti dove si può accedere sia con FB che senza? Lo spieghi da qualche parte?
Dammi una mano, anche io vorrei una cosa del genere per il mio blog. Saluti.
Commento di prova.
signori qui leggo cose belle vere ma alcune baggianate cmq dai se siete interessati e a te marco dell’Aquila vieni in face e cerca il futuro nei vostri occhi e diventa fan noi combattiamo x ricostruirla e ti facciamo come agli altri un regalo doc senza spendere oppure vieni sul nostro sito AnyShop bye a tutti alla prox postata
Implementato anche “invita i tuoi amici” a layer con Facebook Connect! Su http://www.fagile.it
Sempre utile questo blog
Ciao Ghido,
ho una domanda alla quale non ho al momento trovato risposta, forse tu puoi darmi qualche indicazione o al massimo dirmi che non si può fare
Il mio blog è su blogger e sono riuscita ad integrare i bottoni di VOTO senza troppi problemi perchè ho trovato delle ottime guide, ora mi chiedevo, ho anche un blog su wordpress ma sulla piattaforma gratuita percui c’è modo di fare altrettanto anche lì oppure no?
Perchè in questo come in altri articoli si parla di plugins e quindi le soluzioni sono destinate ad utenti che possono amministrare direttamente il server wordpress in quanto sotto il loro controllo ma purtroppo non è il mio caso.
grazie in ogni caso e saluti
come mai non vengono visualizzate le immagini”standard” di facebook connect nè nel widget nè negli articoli?
grazie
Hehe, funziona perfettamente… il mio blog sta assumendo un aspetto di molto superiore alle aspettative, soprattutto per merito tuo. Grazie!
Adesso rompo ulteriormente: con che criterio viene “tagliato” il testo nella finestra di condivisione? In poche parole, mi ritrovo a condividere dal mio blog articoli di cui viene citata una parte striminzita, giusto le prime due righe scarse, e tra l’altro stroncando la “citazione” in un punto inaspettato della frase, rendendola assai poco appetibile da cliccare. C’è la possibilità di “regolare” questo parametro?
Ovviamente la risposta c’è ed è sempre su BigThink
Ovviamente, sono sempre duro come il marmo
In quella pagina c’è la soluzione al problema dell’immagine di anteprima, problema che tra l’altro grazie a te ho risolto integrando proprio quelle modifiche al blog. Come risolve tutto ciò questo mio nuovo problema, anche considerando che ho già inserito quella modifica? :O
Uh, si, giusto, lì parla solo dell’immagine.
Il testo nella finestra di condivisione viene preso direttamente dal meta tag “description”. Imposta il testo che preferisci, con il plugin All in One SEO Pack, oppure utilizza questa tecnica.
Vedi qui la documentazione.
Tutto troppo complicato, appena vedo un po’ di codice vado in bomba. Però avevo già installato All in One SEO Pack e nella mia inettitudine non conoscevo questa sua funzionalità. Dalle prove che ho fatto CREDO che Facebook gestisca al massimo 200 caratteri di description, il che tutto sommato non è malaccio.
Ancora una volta mi hai risolto un problema ed insegnato qualcosa. IDOLO!
Il principiante colpisce ancora
Il codice php sopra riportato va inserito nel file header.php del tema utilizzato? E, più nello specifico, cosa intendi per “loop”? Come posso individuarlo?
Infine la domanda supernabba: questa funzionalità va associata all’utilizzo di un plugin tipo sociable, esatto?
Grazie
Intendevo functions.php, scusa
No, stavolta va inserito nel file index.php e/o single.php, dipende da come è fatto il tuo tema. Il Loop è quella parte di codice che fa stampare gli articoli.
Ciao, io ho un problema con il pulsante condividi su facebook.
uso cutenews per aggiornare il mio sito ed ho inserito il codice per il bottone nel templates di cutenews. il problema è quando voglio condividere una news, non mi condivide la news ma il nome del sito e parte di un’altra news.
Io vorrei che, cliccando sul bottone, si fosse in grado di condividere quella news su FACEBOOK, grazie mille.
Ciao! Trovo questo blog fenomenale!
mi piace scoprire tutte le possibilità che si hanno di integrare, modificare, aggiungere, togliere…
in proposito, vorrei – se possibile – sapere come diavoli di mettono tutte quelle icone che consentono di condividere un determinato post, nei relativi siti come facebook, twitter, utube, ecc… come qui sotto, quando clicchi su “Condividi”, si apre un menù sotto con tutte le icone piccoline.. oppure anche quelle icone presenti nella colonna qui affianco sotto “Grandi idee dal web wordpress, tutorial, seo, php”, che ci sono le icone di facebook, twitter, friendfeed, ecc..
come faccio ?
Ciao , ho visto il pulsante Condividi che sarebbe sharethis se non sbaglio , come lo hai editato ? Grazie
Sto cercando di migliorare il mio nascente blog con tanti articoli utili che hai pubblicato. Una sola domanda: hai realizzato tu quel pluin che ti permette di tenere il “condividi su facebook” + “vota di oknotizie” + “twitter”?
Mi sarebbe molto utile. Ne realizzai uno rudimentale tempo fa ma erano solo immagini. Grazie mille!
Sì e no… Ho semplicemente modificato il plugin per OKNOtizie e gli ho aggiunto in coda il pulsante di facebook che ho spiegato in questo articolo ed il tool di Tweetmeme.