martedì 1 giugno 2010

Aggiungere il tasto Facebook Connect a Blogger/Blogspot






In questi giorni stavo cercando come poter inserire il tasto di Facebook Connect su Raggio di sole.
Finalmente ho trovato come si fa su Hi-Tech. Funziona!
Ricapitolo per chi ha difficoltà con l'inglese.


  • Scegliamo un nome per l'applicazione (potrebbe essere lo stesso del vostro blog). Accettiamo i termini di Facebook e clicchiamo su crea un' applicazione .
  • Prendiamo nota della chiave API perchè a breve ci servirà.
  • Clicchiamo sulla tab Connettiti
  • Dove c'è Connetti URL scriviamo l'indirizzo del nostro blog

  • Ok, ora andiamo in Bacheca > Layout > Modifica HTML > Espandi i modelli widget 
Nel template cerchiamo queste righe:

<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' >

e dopo aggiungiamo
xmlns:fb='http://www.facebook.com/2008/fbml'

in maniera che il codice diventi così

  • <html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://www.facebook.com/2008/fbml'>

Prima del tag </head> aggiungiamo

    <script src='http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php' type='text/javascript'/>

    Ed infine prima del tag </body> inseriamo

      <script type='text/javascript'> 
      FB.init("
      ;YOUR_API_KEY_HERE";, ";";)
      script>


      Naturalmente al posto di YOUR API KEY HERE dobbiamo trascrivere la chiave API che ci siamo trascritti prima.


      Salviamo e vediamo come aggiungere Facebook Connect al nostro blog.




      Premessa: per inserire questi gadget basta andare in Bacheca > Layout > Aggiungi un gadget > HTML/Javascript 

      • Bottone Facebook Connect 



      <fb:login-button autologoutlink="True" length="short" background="white" size="large">fb:login-button>

      • Foto del profilo
       <fb:profile-pic uid="loggedinuser" facebook-logo="true" linked="false">fb:profile-pic>



      • User name
      <fb:name uid="loggedinuser" useyou="false"/>fb:name>

      • Live stream box
       <fb:live-stream event_app_id="YOUR_APPLICATION_ID" width="400" height="500">

      • Fan box

      <fb:fan profile_id="YOUR_PAGE_ID" stream="1" connections="10" width="300">fb:fan>


       
        Related Posts Plugin for WordPress, Blogger...