Inserire il “Like Button” di Facebook sul proprio sito

Posted by Dany in Tutorial | 0 comments

Recentemente Facebook ha messo a disposizione di tutti una serie di implementazioni chiamate “Social Plugins“, che permettono di connettere il proprio sito al social network e aumentare così la propria visibilità.

Uno degli strumenti più usati è ovviamente il “Like Button“, per gli italiani il bottone “Mi piace”:

Come potete notare questo bottone è apparso anche sul nostro blog, quindi usatelo! (fine dello spot…)

Dicevamo… questo bottone è alla portata di tutti, per chi volesse inserirlo sul proprio blog o sito.

PROCEDURA GENERICA

1. Andate alla pagina ufficiale del Like Button di Facebook
2. Nell’apposito riquadro digitate la URL del vostro sito e modificate le altre opzioni se necessario:
3. Cliccate su “Get Code”, apparirà una finestrella
4. CODICE IFRAME se volete inserire semplicemente il bottone senza dover fare troppa fatica, copiate il primo codice e inserirtelo direttamente sul vostro sito, nella posizione in cui desiderate che appaia il bottone. Finito, i passi successivi non vi serviranno.
5. CODICE XFBML se volete invece sfruttare tutte le possibilità dei social plugin, dovete invece fare un po’ di lavoro in più. La versione XFBML permette agli utenti di aggiungere commenti come succede normalmente in Facebook, inoltre lo spazio occupato dal bottone si ridimensiona automaticamente in base ai contenuti (quando appaiono le immagini degli utenti che hanno cliccato, ad esempio). Cliccate sulla scritta “JavaScript SDK” e poi su “register your application” (se volete una scorciatoia cliccate direttamente QUI)
6. Compilate tutti i campi richiesti e procedete, in questo modo creerete un’applicazione dedicata al vostro sito
7. ATTENZIONE!! segnatevi accuratamente tutti i codici che vi vengono dati, l’ID Applicazione, la Chiave API e il Segreto!
8. A questo potete andare sul vostro sito, aprire la pagina dove volete mettere il bottone e inserire alla fine questo codice, subito prima del tag </body>:
   
   <div id=”fb-root”></div>
   <script>
   window.fbAsyncInit = function() {
   FB.init({appId: ‘TUO_APP_ID’, status: true, cookie: true,
   xfbml: true});
   };
   (function() {
   var e = document.createElement(‘script’); e.async = true;
   e.src = document.location.protocol +
   ‘//connect.facebook.net/it_IT/all.js’;
   document.getElementById(‘fb-root’).appendChild(e);
   }());
   </script>
   
9. ATTENZIONE: sostituite a TUO_APP_ID il codice appena ottenuto creando l’applicazione
10. A questo punto, finalmente, possiamo andare nel punto desiderato per l’inserimento del bottone e scrivere questo codice:

    <fb:like href=”http://URL_DEL_VOSTRO_SITO”></fb:like>

    Chiaramente dovete sostituire a URL_DEL_VOSTRO_SITO l’indirizzo del vostro sito!

PROCEDURA PER BLOGGER

Personalmente ho avuto un po’ di difficoltà nell’inserire il bottone su Blogger, Facebook non mi permette di creare un’applicazione dedicata. Questa è la soluzione che ho trovato più adatta.

1. Entrate nel pannello di controllo di blogger, nella sezione Design > Modifica HTML
2. Spuntate la voce “Espandere modelli di widget”



3. Cercate questa riga di codice:

   <div class=’post-body entry-content’>
   <data:post.body/>
   <div style=’clear: both;’/>
   </div>(per lavorarci più comodamente potete cliccare su “Scarica modello completo”, aprirlo con il vostro editor di codice e ricaricarlo una volta completate le modifiche)

4. Incollate subito sotto questo codice:

   <div class=’facebook-button’>
   <iframe expr:src=’&quot;http://www.facebook.com/widgets/like.php?href=&quot; + data:post.url + &quot;&quot;’ frameborder=’0′ scrolling=’no’ style=’border:none; width:450px; height:80px;’/>
   </div>
   

5. Salvate le modifiche

(Via posizioni-in-prima-pagina.blogspot.com)

Per qualsiasi difficoltà scriveteci nei commenti!

Altri articoli che potrebbero interessarti:

1. Picmeleo, fotoritocco sul tuo sito
2. Back up del profilo Facebook con Social Safe
3. Sicurezza su Facebook: Norton Safe Web