BigThink

Tutorial: Facebook Connect e Open Graph su WordPress

Con le recenti novità di Facebook ed il nuovo Open Graph, è stato aggiornato anche il fantastico plugin Facebook Connector alla versione 3.0.3.

Oltre alle funzionalità presenti nelle versioni precedenti, sono stati aggiunti gli Open Graph Social Plugins, integrati in numerosi widget.

Ho deciso così di creare una nuova guida all’installazione, visto che quella vecchia era ormai obsoleta e ridonandante.

1. Installa il plugin

Per prima cosa devi ovviamente installare il plugin:

  • Vai alla pagina del plugin e scarica l’ultima versione.
  • Scompatta lo zip e uploada la cartella fbconnect al percorso /wp-content/plugins/ del tuo blog.
  • Dalla pagina Plugin di WordPress, attiva il plugin.

2. Crea l’Applicazione Facebook

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

  • Vai alla pagina Sviluppatori di Facebook, effettuando il login se non sei autenticato.
  • Clicca sul bottone Imposta Nuova Applicazione, in alto a destra.
  • Inserisci il nome per l’applicazione (il nome del tuo sito, ad esempio).
  • Accetta le condizioni e prosegui.
  • La tua applicazione è stata creata. Prendi nota dei valori di Chiave API e di Segreto.
  • Imposta l’Icona, ed eventualmente anche il Logo.
  • Seleziona Italiano come lingua.
  • Imposta come Sviluppatori tutti i profili degli admin del tuo blog.
  • Clicca sul tab Modelli, nella colonna a sinistra.
  • Inserisci l’URL del tuo sito nel campo Canvas Callback URL (es: http://www.miosito.it).
  • Clicca sul tab Facebook Connect nella colonna a sinistra.
  • Inserisci l’URL del tuo sito nel campo Connetti URL (es: http://www.miosito.it).
  • Inserisci il dominio nel campo Base Domain (es: miosito.it).
  • Imposta il tuo Logo di Facebook Connect.
  • Salva 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. Configura il plugin

Ora devi settare alcune opzioni:

  • Torna nel pannello admin del tuo blog.
  • Sotto al menu Facebook, clicca su Main options.
  • Qui inserisci il Facebook API Key e il Facebook API Secret di cui hai preso nota prima (rispettivamente la Chiave API e Segreto).
  • Seleziona le opzioni desiderate (puoi anche inserire il nuovo Like button).
  • Nel campo Perms to request puoi inserire i permessi da chiedere all’utente la prima volta che fa il login. Inserendo “email”, potrai chiedere all’utente di darti la sua email, ad esempio.
  • Aggiorna le modifiche.

Dal menu Feed Templates puoi invece personalizzare i testi per la pubblicazione del commento sul Profilo dell’utente e si può decidere di inserire i Commenti di Facebook, disabilitando quelli di WordPress.

Andando poi sulla gestione dei Widgets del proprio blog, troverai tantissimi nuovi box da inserire. Sono i Social Plugins che permettono una maggiore integrazione con Facebook. Provali uno ad uno e decidi quali possono servirti.

Non ci sono ulteriori modifiche da fare. La nuova versione del plugin permette una grande flessibilità di personalizzazione tra opzioni e widget, così che non si deve più modificare a mano il codice del plugin.

Immagine: Facebook Expressions

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

Creare il layout di un’applicazione Facebook con FBML

Creare il layout di un’applicazione Facebook con FBML

Oggi vedremo la terza parte della guida alla creazione di applicazioni Facebook, concentrandoci in particolar modo sul codice FBML. Se vi siete persi le prime due parti, rimediate subito: Creare un’applicazione Facebook: le impostazioni Una classe PHP per creare applicazioni Facebook Il codice FBML è un'estensione dell'HTML che permette di costruire il layout della nostra applicazione e ...
Come collegare Facebook, Twitter, FriendFeed ed il proprio feed

Come collegare Facebook, Twitter, FriendFeed ed il proprio feed

Finalmente mi sono deciso e mi sono iscritto a Twitter. Se tutti i blogger lo usano, a qualcosa servirà anche, no? Cercando qua e là ho scoperto poi che è possibile collegare Facebook con Twitter ed il feed del proprio blog, il tutto tramite FriendFeed. Vediamone la dinamica: FriendFeed importa il feed RSS del nostro ...
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 ...
Plugin WordPress per pubblicare su Twitter i nostri post

Plugin WordPress per pubblicare su Twitter i nostri post

Terza ed ultima parte della miniserie realizzata da Camu: dopo averci introdotti agli Hook di WordPress e alle API di Twitter, è giunto il momento di mescolare bene gli ingredienti. Ora che abbiamo a disposizione tutti gli strumenti, non rimane che metterli insieme per realizzare il plugin che scrive automaticamente sul canale Twitter.
Vivi i trailer in prima persona con Facebook Connect - parte 2

Vivi i trailer in prima persona con Facebook Connect – parte 2

Mesi fa avevo raccolto alcuni utilizzi particolari di Facebook Connect, che ci permettavano di diventare noi stessi protagonisti dei nostri film o videogiochi preferiti. Questi video trailer integrano i nostri dati e le nostre immagini all'interno, per coinvolgerci in prima persona. Oggi proseguo con una carrellata di applicazioni simili. Guarda i video o segui ...

108 Commenti

  1. questi sono gli errori
    Warning: fopen() [function.fopen]: http:// wrapper is disabled in the server configuration by allow_url_fopen=0 in /home/mhd-01/www.mondotorrent.eu/htdocs/wp-content/plugins/fbconnect/facebook-client/facebookapi_php5_restlib.php on line 3674

    Warning: fopen(http://api-read.facebook.com/restserver.php?method=facebook.admin.getAppProperties&session_key=&api_key=231870406872855&v=1.0) [function.fopen]: failed to open stream: no suitable wrapper could be found in /home/mhd-01/www.mondotorrent.eu/htdocs/wp-content/plugins/fbconnect/facebook-client/facebookapi_php5_restlib.php on line 3674

    Warning: fopen() [function.fopen]: http:// wrapper is disabled in the server configuration by allow_url_fopen=0 in /home/mhd-01/www.mondotorrent.eu/htdocs/wp-content/plugins/fbconnect/facebook-client/facebookapi_php5_restlib.php on line 3674

    Warning: fopen(http://api-read.facebook.com/restserver.php?method=facebook.admin.getAppProperties&session_key=&api_key=%09231870406872855&v=1.0) [function.fopen]: failed to open stream: no suitable wrapper could be found in /home/mhd-01/www.mondotorrent.eu/htdocs/wp-content/plugins/fbconnect/facebook-client/facebookapi_php5_restlib.php on line 3674

    Warning: fopen() [function.fopen]: http:// wrapper is disabled in the server configuration by allow_url_fopen=0 in /home/mhd-01/www.mondotorrent.eu/htdocs/wp-content/plugins/fbconnect/facebook-client/facebookapi_php5_restlib.php on line 3674

    Warning: fopen(http://api.facebook.com/restserver.php?method=facebook.admin.setAppProperties&session_key=&api_key=%09231870406872855&v=1.0) [function.fopen]: failed to open stream: no suitable wrapper could be found in /home/mhd-01/www.mondotorrent.eu/htdocs/wp-content/plugins/fbconnect/facebook-client/facebookapi_php5_restlib.php on line 3674

    27 ottobre 2011, 17:28
  2. ciao
    complimenti per il tutorial,
    una cosa volevo chiede
    come mai che a me non mi compare il plugin? sia nelle impostazioni sian nella lista plugin,,
    grazie

    27 ottobre 2011, 15:52
  3. Ottimo plugin

    16 settembre 2011, 18:56
  4. madda

    ciao a tutti!
    io ho provato… ma sinceramente non ci sono riuscita.
    Faccio tutto, vedo i widget ma non funzionano…
    Forse sono impedita io o forse è cambiato qualcosa in Facebook.
    Volevo solo segnarlarlo 🙂

    27 luglio 2011, 19:23
  5. Valerio

    Ciao a tutti, all’inizio funzionava il plugin ma ormai sono settimane che quando qualcuno cerca di loggarsi tramite facebook al sito wordpress facebook dice “Sorry, something went wrong. We’re working on getting this fixed as soon as we can.”
    Pensavo fosse un errore temporaneo di facebook ma col passare del tempo non hanno risolto… qualcuno ha qualche idea su cosa possa essere e che posso fare? 🙁

    22 luglio 2011, 09:52
  6. ho installato l’app ma non mi funziona correttamente o forse non ne ho capito il corretto funzionamento:

    Quello che voglio fare è ottenere un pulsante “mi piace” ed una volta cliccato voglio che appaia sulla bacheca “a xxx piace questo elemento” e la visualizzazione del relativo articolo. Una sorta di “mi piace” e “condividi” integrato. E’ possibile o devo usare un’altro tipo di app?

    Facendo varie prove (non so come, ma ho testato anche un’altra app) cliccando sui vari mi piace mi sono trovato in bacheca anche il link con relativa anteprima possibile fosse un mi piace + condividi integrato?

    La cosa strana è che ora su alcuni post il “mi piace” non appare, su altri si, su un’altro appare ma cliccandoci non succede nulla, torna come prima.

    come posso risolvere questi problemi?

    14 luglio 2011, 10:05
  7. Avete un idea di come si fa a decidere dove far apparire il like button e deciderne la tipologia (semplice, con foto, grandezza, etc)

    12 luglio 2011, 15:39
  8. Andrea Sciamanna

    Ok, mi rendo conto che in realtà questo plugin non consente di dire che una pagina web piace ad un utente, ma che la pagina facebook della pagina web piace.

    Dovrò quindi tornare ad uno degli altri plugin e cercare di capire perché non vogliono funzionare.

    8 luglio 2011, 13:43
  9. Andrea Sciamanna

    Questo plugin in passato mi ha dato diversi problemi, ma visto che con tutti gli altri plugin, compreso il codice generato dall’apposita pagina di Facebook, non riesco a far funzionare il bottone Like, ho voluto provato a riutilizzare questo plugin.

    Il problema che si pone ora con questa libreria di plugin è capire come richiamare il bottone like da php (senza echo), poiché nel mio tema, per l’home page, ho bisogno di decidere io do, come e quando chiamare questo bottone.

    Ho provato a guardare nel codice e sembra che sia possibile richiamare le funzioni, tuttavia queste richiedono di indicare un UID (suppongo per post o pagina), cosa che non ho, essendo la mia home page un insieme di contenuti presi da diversi post e pagine.

    A prescindere da questo problema – e forse qui esco un po’ fuori tema -, mi chiedo se qualcuno di voi abbia il mio stesso problema iniziale: il like button non funziona. Mostra il messaggio “Be the first of your friends to like this.”, ma quando si clicca, anche se compare il numero “1” e la frase “Andrea Sciamanna likes ….”, dopo nemmeno un secondo scopare e ritorna allo stato iniziale, cone 0 likes.

    8 luglio 2011, 13:32
  10. A me succede che quando vado a cliccare su Connect mi si apre una finestra che link a questo indirizzo https://www.facebook.com/developers/login_error.php?app_id=153141491088&connect=1&type=connect

    22 giugno 2011, 13:19
  11. Ciao Ghido,
    ho fatto l’installazione e tutto sembra andato a buon fine.
    ora il problema:
    quando alla fine dell’articolo schiaccio sul pulsante a”accedi tramite facebook” riesco ad accedere regolarmente solo che non mi compare il form dove effettivamente scrivere il commento… help please!

    Ho anche notato che se metto la spunta per far comparire i bottoni “like” prima e dopo l’articolo questi non compaiono…

    grazie

    6 giugno 2011, 15:37
  12. Sto iniziando però a preoccuparmi che fb sta diventando troppo invasivo. D’accordo sono importanti i social ma se non si da a nessuno un buon motivo di parlare di se (nel bene si spera) cosa ci si aspetta da questi widget “frikkettoni”?

    31 maggio 2011, 14:41
  13. Ok, già risolto.
    Purtroppo sono io che sono un po rinco, nel campo “perms to request” avevo messo email e poi una virgola e questo causava errore! 🙂

    26 maggio 2011, 17:36
  14. Salve,
    io ho provato a farlo, su un sito è tutto andato a buon fine mentre su un altro mi ridà questo errore:
    API Error Code: 100
    API Error Description: Invalid parameter
    Error Message: invalid permissions:
    Qualche idea?

    26 maggio 2011, 16:40
  15. Ciao a tutti, scusate se vi disturbo ma ho un problema tecnico sul sito della scuola di fotogiornalismo che stiam organizzando, in teoria oggi volevamo pubblicizzare l’uscita del sito ma si è presentato questo problema ahime 🙁
    http://www.obiettivoreporter.com/ ecco il link, volevo sapere perchè non compaiono i last visitor (nel widget a destra) e se si clicca su “tutti gli altri” rimane tutto vuoto…
    l’autenticazione funziona xkè riconosce i vari utenti e relativi ruoli…

    ecco i miei plugin
    Akismet
    All in One SEO Pack
    Cleaner Gallery
    Contact Form 7
    ExecPhp (disabilitato)
    Facebook OpenGraph
    Flexible Lightbox
    FT FACEPRESS II (disabilitato)
    Google Analyticator
    Google XML Sitemaps
    Maintenance Mode (disabilitato)
    Multiple Galleries
    My Page Order (disabilitato)
    Official StatCounter Plugin
    Recent Posts Slider (disabilitato)
    Regenerate Thumbnails (disabilitato)
    Subscribe2
    TinyMCE Advanced
    Twitter Button
    Widget Logic
    WordPress Database Backup
    WP-PageNavi
    WP-PostViews
    Yoast Breadcrumbs

    chi mi aiuta oltre alla statua virtuale in piazza offro anke un link sul mio blog http://www.maxfear.it GRank 4 😀

    5 maggio 2011, 16:55
  16. Ciao a tutti, ho installato anche io il plugin.
    Funziona benissimo ed è molto immediato rispetto ad altri che avevo provato.
    L’ho implementato sul mio sito, però ho notato che con Firefox4 non funziona…da cosa può dipendere?

    22 aprile 2011, 17:55
  17. Giovanni

    Ciao,
    scusa se ti disturbo, ho seguito il tuo tutorial e grazie alla chiarezza ho fatto funzionare tutto.
    Un unico problema però: io ho messo un like box nella mia home, quindi dentro una page di WordPress.
    Cosa succede che nn va?: Quando sono loggato vedo senza problema il mio likebox, ma appena effettuo il logout il box scopmare.
    Secondo te c’è modo di risolvere il problema??
    Grazie

    18 marzo 2011, 18:39
  18. paso

    Forse hanno gia fatto questa domanda.. ogni volta che un utente scrive un commento posso essere avvisato ! non riesco ad attivare questa funzione per wp quando ricevi un commento pupo metterlo in attesa con questo plug.in è possibile , sai se è possibile ?

    4 marzo 2011, 19:35
  19. grandi bella guida

    25 febbraio 2011, 20:11
  20. Con il nuovo fbconnecto, come si inserisce il watermark FB sugli avatar?
    Nella vecchia guida postavi questo :

    Aprite il file fbConnectLogic.php del plugin.
    Andate alla riga 382 e aggiungete il parametro facebook-logo=\”true\” al tag

    ora però il codice è cambiato e credo anche la sintassi dei tag del profile-pic.
    Ho fatto delle prove ma nada de nada… non sono riuscito.
    Tu sai come si fà.
    Grazie

    18 febbraio 2011, 00:32
  21. Salve a tutti

    cercavo di mettere il facebook connect su un blog che ho fatto, ma praticamente mi da dei problemi, non mi esce il tasto del connect. Dopo varie prove ho scoperto che è il template a dare dei problemi, infatti ho attivato quello base e mi funzionava bene, potresti aiutarmi a capire l’errore appena hai tempo?

    il sito è http://www.portopalos.it

    grazie in anticipo

    19 gennaio 2011, 14:29
  22. Ciao, io finora x postare su fb i post del mio blog (creato con wordpress) uso networkedblogs. Adesso però quasi più nessuno lascia commenti sul mio sito, commentano tutti su fb. Conosci un metodo per fare in modo che i commenti fb a loro volta vengano pubbllicati sul mio sito? grazie. fabio. ps bello il tema del tuo sito, l’hai fatto tu? mi piace molto l’effetto “immagine-che-appare-quando-scorre-la-pagina”

    28 dicembre 2010, 00:17

5 Citazioni