BigThink

Tutorial: Come integrare Facebook Connect su WordPress

Facebook Connect

Guida aggiornata alla versione 1.2.1 del plugin.

Sabato scorso vi ho presentato l’eccezionale plugin Facebook Connector, che vi permette di integrare l’autenticazione di Facebook con quella del vostro blog WordPress, tramite il nuovo servizio Facebook Connect.

Nonostante vi fosse una video guida, vi avevo comunque promesso una spiegazione dettagliata di come installarlo e personalizzarlo a dovere, quindi cominciamo con un tutorial passo-passo!

1. Installare il plugin

  • Per prima cosa andate alla pagina del plugin e scaricate l’ultima versione.
  • Come per i soliti plugin, scompattate lo zip e uploadate la cartella fbconnect al percorso /wp-content/plugins/ del vostro blog.
  • Dalla pagina Plugin di WordPress, attivate il plugin.

2. Creare un’applicazione Facebook

Ora, prima di proseguire, dovrete creare una vera e propria applicazione Facebook che connetterete al plugin:

  • Andate alla pagina Sviluppatori di Facebook, effettuando il login se non siete autenticati.
  • Cliccate sul bottone Set Up New Application, in alto a destra.
  • Inserite il nome per l’applicazione (il nome del vostro sito, ad esempio) e proseguite.
  • La vostra applicazione è stata creata. Prendete nota dei valori di Chiave API e di Invisibile.
  • Impostate l’Icona, ed eventualmente anche il Logo.
  • Selezionate Italiano come lingua.
  • Impostate come Sviluppatori tutti i profili degli admin del vostro blog.
  • Cliccate sul tab Modelli, nella colonna a sinistra.
  • Inserite l’URL del vostro sito (compreso di http) nel campo Canvas Callback URL.
  • Cliccate sul tab Connetti nella colonna a sinistra.
  • Inserite l’URL del vostro sito nel campo Connetti URL.
  • Impostate il vostro Logo di Facebook Connect.
  • Salvate le modifiche.

Nota: l’Icona sarà l’icona dell’applicazione che comparirà nella bacheca degli utenti, quando pubblicheranno i loro commenti. Il Facebook Connect Logo, invece, è l’immagine che compare nella finestra di connessione a Facebook Connect.

3. Configurare il plugin

  • Tornate nel pannello admin del vostro blog.
  • Nella pagina delle Impostazioni, cliccate su Facebook Connector.
  • Qui inserite l’API Key e l’API Secret di cui avete preso nota prima (rispettivamente la Chiave API e Invisibile).
  • Eventualmente spuntate l’opzione per auto-approvare i commenti e quella per mandare i commenti a Facebook.
  • Aggiornate le modifiche.
  • Impostate ora i template per i commenti: questi specificano il formato in cui volete che compaiano sulla bacheca degli utenti.
  • Una volta finito, create il template.

4. Modificare l’header.php

Per far comparire correttamente pulsanti, avatar e finestre di Facebook, dovete prima fare una piccola modifica al vostro template:

  • Aprite il file header.php del vostro template.
  • Tra le prime righe della pagina, individuate il tag <html> e modificatelo come segue, aggiungendo il namespace di Facebook:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
  • Salvate le modifiche e riuploadate il file sul server.

E fin qua ci siamo. Ora avete due possibilità:

  • inserire il widget nella barra laterale, con pochi e semplici click;
  • inserire il pulsante di login dove vi pare (consiglio appena sopra o di fianco al form dei commenti, come ho fatto io).

Iniziamo a vedere l’opzione più facile e dopo vedremo l’alternativa, un po’ più per smanettoni php.

5. Inserire il widget nella sidebar

  • Andate alla pagina Aspetto e poi su Widget.
  • Se il vostro tema supporta i widget, potete procedere: aggiungete Facebook Connector.
  • Andate quindi a modificare le opzioni e i testi, come preferite.
  • Salvate le impostazioni.

Il widget inserirà un box con il link di login normale, il pulsante per il login tramite Facebook e un riquadro con gli avatar dei visitatori recenti. Ovviamente potete personalizzare il tutto, agendo sui CSS.

Volendo, potete fermarvi qui. Quando l’utente si loggherà tramite Facebook, risulterà autenticato anche sul vostro blog e potrà commentare i vostri articoli, senza dover inserire i suoi dati.

Se invece volete proseguire con una personalizzazione più avanzata, continuate la lettura.

6. Inserire l’avatar di Facebook nei commenti e integrarlo con MyAvatars

Se il vostro tema utilizza la funzione standard di WordPress per gli avatar, il plugin stesso si preoccuperà di sostituire la foto di Facebook nel caso di commenti da parte di utenti loggati.

Tuttavia, vi consiglio di integrare gli avatar di Facebook con il plugin MyAvatars. In questo modo,  se l’utente è loggato con Facebook mostra la sua foto, se ha un avatar con MyBlogLog mostra quello, se invece ha un Gravatar mostra il Gravatar, altrimenti mette l’immagine di default. Niente male, no? Ecco come fare:

  • Scaricate, uploadate e attivate il plugin MyAvatars.
  • Aprite il fille comments.php del vostro tema.
  • Dove volete far comparire l’avatar, inserite queste righe di codice:
<?php
if(is_user_fbconnect($comment->user_id))
    echo get_avatar($comment);
else
    MyAvatars();
?>

7. Impostare le dimensioni per l’avatar di Facebook

Un’ulteriore modifica da fare è impostare le dimensioni della foto di Facebook. Per fare in modo che tutti gli avatar abbiano la stessa dimensione, infatti, anche quello di Facebook dovrebbe essere 48×48. Tuttavia il plugin è settato in modo da mostrare l’immagine con una larghezza fissa di 50px, ma un’altezza libera e ciò porterebbe non pochi problemi al vostro layout. Facciamo allora una piccola modifica:

  • Aprite il file fbConnectLogic.php del plugin.
  • Andate alla riga 382 e modificate size=\"thumb\" con size=\"square\".

Così l’immagine verrà automaticamente tagliata nelle dimensioni 50×50, che si prestano ottimamente ai nostri scopi (pixel più, pixel meno).

Lo stesso va fatto nel file fbconnect_widget.php:

  • Andate alla riga 10.
  • Modificare anche qui size=\"thumb\" con size=\"square\".

8. Inserire il watermark di Facebook nell’avatar

Un’altra opzione che possiamo personalizzare è quella di far comparire un piccolo logo di Facebook nell’angolo in basso a destra di ogni avatar:

  • Aprite il file fbConnectLogic.php del plugin.
  • Andate alla riga 382 e aggiungete il parametro facebook-logo=\"true\" al tag <fb:profile-pic>

9. Inserire il pulsante di login accanto al form dei commenti

A mio parere, il login a Facebook è molto più visibile, utile ed usabile se posto accanto al form per l’inserimento dei commenti: quando l’utente deve scrivere un commento, gli basta un click lì affianco. Se invece lo lasciate nella sidebar c’è il rischio che non venga nemmeno notato e comunque è piuttosto scomodo dover salire fino a lì.

Lasciate perdere il widget allora (o toglietelo se l’avete già messo) e localizzate, nel vostro file comments.php, la posizione migliore dove inserire il login.

Il codice per far comparire direttamente il box di login è il seguente:

<?php
$opzioni['title'] = "Community";
$opzioni['welcometext'] = "Welcome to ".get_option('blogname')."!";
$opzioni['lastvisittext'] = "Last visitors";
$opzioni['invitetext'] = "Invite your friends!";
$opzioni['logintext'] = "Login using Facebook:";
$opzioni['loginbutton'] = "long";
$opzioni['alreadytext'] = "Already a member?";
$opzioni['footertext'] = 'Powered by <a href="http://www.sociable.es">Sociable!</a>';
$opzioni['maxlastusers'] = "9";

widget_FacebookConnector($opzioni);
?>

Ovviamente potete modificare ogni parametro dell’array come preferite e sistemare graficamente ogni elemento con i CSS.

I vari parametri mi sembrano abbastanza autoesplicativi. Servono tutti per impostare i testi, a parte loginbutton che specifica lo stile del pulsante e accetta i parametri long e short, mentre maxlastusers imposta il numero massimo di visitatori da visualizzare.
Per vedere la differenza tra i due tipi di pulsanti, vi rimando a questa pagina.

Se poi capite bene il php, vi consiglio di aprire direttamente il file fbconnect_widget.php e modificarlo come meglio credete, in modo da far comparire solamente ciò di cui avete bisogno.

Se, ad esempio, voleste rimuovere il riquadro con gli ultimi visitatori, è sufficiente commentare o cancellare le righe dalla 32 alla 43.

10. Togliere il link al profilo Facebook dall’autore del commento

Un’altra richiesta che ho avuto nei commenti era relativa a questo problema: se l’utente commenta senza loggarsi con Facebook, il suo nome dev’essere linkato al suo sito, se l’ha inserito. Se, invece, l’utente è loggato con Facebook Connect, si vuole evitare di linkare il suo nome al profilo Facebook.
Aprite allora il vostro file comments.php, individuate il punto in cui viene richiamato il tag che inserisce il nome ed il link del commentatore e sostituitelo con questo codice:

<?php
    if(is_user_fbconnect($comment->user_id)){
        comment_author();
    }else{
        comment_author_link();
    }
?>

11. Togliere il link alla pagina del profilo utente di WordPress dagli avatar

Come potete vedere dal mio blog, ho preferito togliere tutta la parte Community del plugin: ho eliminato il box con gli ultimi visitatori ed ho cambiato il link dell’avatar, facendolo puntare al profilo Facebook e non più a quella pagina interna del plugin che mostra le informazioni del profilo dell’utente. Come fare quest’ultima modifica?

  • Aprite nuovamente il file fbConnectLogic.php del plugin.
  • Togliete il link alla riga 382 e sostituite linked=\"false\" con linked=\"true\"

La riga 382 diventerà quindi:

return "<div class=\"avatar\"><fb:profile-pic uid=\"".$fbuser."\" size=\"square\" linked=\"true\"></fb:profile-pic></div>";

Ovviamente, se preferite che l’avatar non sia linkato a nulla, lasciate a false il valore di linked.

12. Far puntare il link dell’autore del commento al suo profilo Facebook

Nella versione 1.2.1 del plugin, anche il link dell’autore del commento punta alla pagina interna col profilo, invece che direttamente a quella di Facebook. Per sistemare (come nelle versioni precedenti) ecco cosa fare:

  • Aprite il file fbConnectCore.php del plugin.
  • Cancellate (o commentate) la riga 154.

Così facendo, i link degli autori rimanderanno direttamente al loro profilo Facebook.

13. Far aprire la finestra “Invita amici” in un popup

Il plugin è impostato in modo che, cliccando sul pulsante “Invita amici”, si apra una nuova finestra. Io ho preferito farlo aprire in un popup, direttamente nella pagina. Ecco come fare:

  • Aprite il file fbConnectCore.php
  • Incollate alla fine di esso, appena prima del tag ?>, il seguente codice:
if(!function_exists('render_friends_invite')):
    function render_friends_invite($invitetext){
        $blog = "BigThink";
        $title = "Invita i tuoi amici a partecipare a BigThink!";
        $desc = "Ciao, ti invito ad unirti alla community di questo interessante blog informatico!";
        $action = "Seleziona gli amici che vuoi invitare";
        ?>
            <script type="text/javascript">
            function facebook_invite_users() {
                var dialog = new FB.UI.FBMLPopupDialog('<?php echo $title; ?>', '');
                var fbml = "<fb:fbml>" +
                               "<fb:request-form style=\"width:630px; height:540px;\" action=\"" + document.location.href + "\"tmethod=\"POST\" invite=\"true\" type=\"<?php echo $blog; ?>\" " +
                               "content=\"<?php echo $desc; ?> <fb:req-choice url='<?php echo get_option('siteurl'); ?>' label='Visita <?php echo $blog; ?>!' />\">" +
                               "<fb:multi-friend-selector showborder=\"false\" actiontext=\"<?php echo $action; ?>\" rows=\"5\" bypass=\"cancel\" />" +
                               "</fb:request-form>" +
                           "</fb:fbml>";
                dialog.setFBMLContent(fbml);
                dialog.setContentWidth(630);
                dialog.setContentHeight(540);
                dialog.show();
            }
            </script>
        <?php
        echo "<input type=\"button\" id=\"invita\" value=\"".$invitetext."\" onclick=\"facebook_invite_users();return false;\" />";
    }
endif;
  • Ovviamente modificate le quattro variabili iniziali con i testi che preferite ed il nome del vostro blog.
  • Ora aprite il file fbconnect_widget.php
  • Sostituite la riga 24 con la seguente:
render_friends_invite($invitetext);

14. Integrare il pulsante “Condividi”

Un’ulteriore modifica che possiamo fare ai nostri post è quella di modificare il pulsante “Condividi su Facebook” per fare in modo che la finestra si apra in un layer interno alla pagina, integrato con Facebook Connect.
Per questo, vi rimando al mio articolo.

15. Ulteriori personalizzazioni

Potete infine modificare e sistemare secondo i vostri gusti i file myhome.php, userprofile.php, usercomments.php, community.php e invitefriends.php, adattandoli al vostro tema e traducendo in italiano i testi.

Come tutorial credo sia abbastanza esaustivo e non mi vengono in mente ulteriori personalizzazioni delle quali entrare nel dettaglio. Non vi resta che connettere anche il vostro blog con Facebook.

Se la guida vi è stata utile, lasciate pure un commento, segnalatela sul vostro blog e invitate i vostri amici su BigThink tramite Facebook.

Alla prossima!

UPDATE 16/12/2008
Ho scoperto che nell’esatto istante in cui scrivevo questa guida, usciva la nuova versione del plugin (0.9.6). L’ho dunque sistemata, aggiornando i riferimenti alle righe di codice e togliendo le parti inutili (come il problema del logout su WP 2.7 che è già stato risolto).

UPDATE 20/01/2009
Ho aggiornato la guida alla versione 1.0 del plugin, correggendo i riferimenti a file e numeri di riga.
Inoltre ho aggiunto alcuni punti, prendendo spunto dalle domande nei commenti.

UPDATE 9/03/2009
Aggiornata la guida alla versione 1.2.1 del plugin e alla nuova versione della pagina delle applicazioni di Facebook.

UPDATE 11/05/2009
Aggiornato alle voci italiane della pagina di Facebook. Aggiunto punto 14.

Articolo scritto da Ghido

Fondatore di BigThink.it, si occupa dello sviluppo e del coordinamento dei progetti tecnologici. Specializzato nel Marketing su Facebook e nello sviluppo di Applicazioni Social, fa consulenza e formazione ad aziende ed agenzie.

Leggi anche...

Plugin WordPress: aggiungere il NoFollow ai link del blogroll

Plugin WordPress: aggiungere il NoFollow ai link del blogroll

La compravendita di link tra blog è un fenomeno abbastanza diffuso: un blog trafficato e con un buon PageRank spesso inizia a vendere spazi link nel proprio blogroll, per incrementare le proprie entrate. Fate particolare attenzione, però, perchè Google ha dichiarato guerra a questa pratica, colpevole di alzare artificialmente il trust di un sito ...
I Fantastici 3: Usare WordPress come CMS

I Fantastici 3: Usare WordPress come CMS

E' da parecchio tempo che non scrivo un articolo su WordPress, ma ultimamente mi sono ritrovato a smanettarci per motivi di lavoro e vorrei condividere alcuni consigli. Dovendo realizzare un sito molto complesso, dopo varie ricerche, ho trovato i plugin migliori per sfruttare le novità di WordPress 3.0 al meglio. Vediamoli insieme.
Come viralizzare i contenuti grazie a Facebook

Come viralizzare i contenuti grazie a Facebook

Ultimamente BigThink ha avviato una partnership con Young Digitals di Michele Polico e ieri abbiamo tenuto, insieme, un corso di formazione per un'azienda di Roma. Sono stati trattati diversi argomenti e io ho dato il mio contributo sull'argomento Facebook, ovviamente. Ho quindi deciso di condividere con voi tre presentazioni che potrebbero interessarvi.
Risorse per addobbare il nostro blog per il Natale

Risorse per addobbare il nostro blog per il Natale

Il Natale si avvicina e anche noi blogger non possiamo farci cogliere impreparati. Quale occasione migliore per dare un ritocco grafico al template del nostro blog e "natalizzarlo" come si deve? Basta giusto qualche piccolo accorgimento per renderlo a tema col periodo festivo: modificare un po' il logo, cambiare qualche icona, sistemare l'header... Non ...
Risorse per creare un'applicazione Facebook in PHP

Risorse per creare un’applicazione Facebook in PHP

Facebook è ormai un fenomeno di massa, perchè non approfittarne? Da bravi programmatori PHP quali siamo, ci sarà pur venuta la curiosità di creare una nostra applicazione Facebook, giusto per sperimentare qualcosa di nuovo o magari per promuovere il nostro sito o blog. E' giunto allora il momento di buttarci ed iniziare a studiare ...

328 Commenti

  1. paso

    Ciao complimenti per il sito ci sono un sacco di informazioni utili…scusa ma avrei un problema con il plug-in Facebook Connector… come posso confermare che un articolo mi piace e far si che nella bacheca in FB venga segnalato l’articolo e una immagine che ho messo in evidenza, se commento l’articolo succede ma se clicco solo su mi piace no !!! devo attivare qualcosa ! sarà possibile ?

    17 settembre 2010, 19:56
  2. matt

    Ciao, ho seguito la tua ottima guida e tutto funziona alla grande… OOOOOOOPS non è vero: ho un problemino non da poco… non appare il pulsante di Login utilizzando (ehm….) Internet Explorer in tutte le versioni.
    Tu o qualcun altro ha notato questo problema?
    Avete trovato una soluzione?
    Grazie mille e complimenti
    Matteo

    21 luglio 2010, 11:03
    • Forse ho trovato il problema: impostando in maniera diversa l’header sembra funzionare

      22 luglio 2010, 11:50
  3. Alessio

    sto cercando di implementare un plugin di facebook connect ma al mometno dell’attivazione, cioè quando invio il login dalla popup facebook ricevo questo errore JS:

    Errore: fbUserConnected is not defined

    File sorgente: http://static.ak.connect.facebook.com/connect.php/en_US/js/Api/CanvasUtil/Connect/XFBML
    Riga: 98

    sapete quyalche cosa? non trovo nulla inrete

    10 luglio 2010, 01:03
  4. Allora, se non ho capito male il problema dovrebbe derivare dal fatto che:

    Se nella canvas callback url metto http://www.blog.it

    e uno prova a fare il connect da http://www.blog.it/pagina-blog

    non va.

    Come fare per rimediare a questo problema?

    8 maggio 2010, 11:45
  5. ciao ghido,

    prima di darmi l’ennesiima risposta snob come hai fatto per molti, premetto che:

    Ho letto tutti i commenti,
    ho seguito la guida passo passo.

    Continua a darmi questo errore:

    To fix this error, please set your Connect URL in the impostazioni dell’applicazione. Once it has been set, users will be redirected to that URL instead of this page after logging in.

    inoltre, ho seguito anche la guida per la nuova versione che ho installato.

    Il canvas callback url l’ho inserito con e senza / finale.

    7 maggio 2010, 20:01
    • mirolica

      anche io ho lo stesso problema. Continua ad uscire lo stesso errore

      7 maggio 2010, 21:39
      • Non è che dò risposte snob, è semplicemente che mi scrivete a decine ogni giorno e non riesco a rispondere a tutti. E a quelli cui rispondo, non riesco a dare risposte iper-dettagliate. D’altra parte non posso andare a vedere i siti di tutti per sistemare loro Facebook Connect.

        Comunque, l’unica cosa che mi viene in mente per risolvere il tuo problema è il seguente: Se come Canvas Callback URL hai inserito http://www.blog.it, verifica di aver settato anche il valore di “Base Domain” con blog.it

        9 maggio 2010, 14:37
        • Ciao Ghido, forse mi sono espresso male, non era aggressivo il mio modo di dire, il tuo punto di vista è sacrosanto ci mancherebbe.

          Il problema però persiste nonostante abbia settato tutto come hai scritto….

          Poi non so se la versione è cambiata ancora una volta rispetto ai tuoi articoli ma noto che attivando il plug-in adesso visualizza due linguette di diversificazione dei commenti su facebook e sul blog..

          Comments e Facebook Comments..

          10 maggio 2010, 16:36
          • Sicuro sicuro di aver seguito la nuova guida in tutti i dettagli? Perchè dall’errore che ti dà sembra che non hai compilato il campo “Connect URL” che è un altro campo oltre a “Canvas Callback URL”.

            P.S.
            in effetti hanno aggiornato nuovamente il plugin, ma non credo che la cosa influisca sulle impostazioni di Facebook: quello è sempre lo stesso.

            10 maggio 2010, 16:54
  6. Matteo

    Salve ma per installare fbconnect su il mio sito personale senza necessariamente installato wp è possibile ? se si esiste una guida per l’installazione?

    3 maggio 2010, 19:43
    • Sì, è possibile, ma non tramite questo pugin che funziona solo su WordPress.
      Non è cosa semplice integrare Facebook Connect su un sito, comunque qua trovi una guida:

      Facebook Connect con Javascript
      Facebook Connect con PHP

      Buono studio!

      4 maggio 2010, 12:21
      • Matteo

        Ma come mai quando clisso su post via php per pubblicare articoli direttamente sul mio profilo, quando vado a controllare su facebook non ce niente
        ?

        6 maggio 2010, 17:03
  7. Se avete problemi, vi consiglio di scaricare la nuova versione del plugin e di seguire la nuova guida.

    26 aprile 2010, 12:54

10 Citazioni