Installare Facebook Connect su WordPress, guida e video tutorial

Stavo per scrivere una guida sull’installazione di Facebook Connector, il plug in per wordpress, ma ho scoperto che BigThink ha scritto una guida pressochè perfetta, inutile quindi scriverne un altra. Inoltre l’ottimo video tutorial di Stefan Des è molto assolutamente esauriente.

Qui l’estratto riguardante installazione e configurazione.

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.ph
    p

    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.ph
    p

    del plugin.

  • Andate alla riga 382 e aggiungete il parametro
    facebook-logo=\"true\"

    al tag

    &lt;fb:profile-pic&gt;

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

shor

t, 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.ph
    p

    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.ph
    p

    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
    ?&gt;

    , 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.

  • giulia

    aggiornamenti x le feste?