SEO Italy blog: articoli, video e tutorial di approfondimento su posizionamento web e motori di ricerca

Aggiungere il bottone "Mi piace" / "I like" di Facebook ad un blog su Blogger

29
Apr
2010
Per rispondere in maniera un po' di estesa alla domanda di un nostro lettore su come aggiungere il nuovo bottone "Mi Piace" di Facebook in un blog ospitato su Blogger ecco un nostro breve tutorial.

Per prima cosa otteniamo una app id / chiave API da Facebook: basta andare sul Facebook Apps Dev Site e "creare" un'applicazione (ad esempio chiamandola "Nome del nostro blog Like Button" o qualcosa del genere. Appena creata ci apparirà una schermata da cui copiare la nostra app id

Mettiamo da parte la nostra chiave API (ci servirà dopo) e facciamo il login su Blogger per accedere al pannello di controllo del nostro blog e clicchiamo su "Layout"
Adesso accediamo al tab di modifica dell'HTML
qui cerchiamo nella textarea che ci è apparsa la parte relativa al footer di ogni post
Nel punto indicato dalla freccia noi abbiamo aggiunto il codice di Facebook: chiaramente ognuno (con un po' di esperienza nella "programmazione" del template di Blogger) può aggiungerlo dove gli pare più adeguato.

In quel punto, dicevamo, ecco il codice da aggiungere:

<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<script>
  window.fbAsyncInit = function() {
    FB.init({appId: '*** CHIAVE API ***', status: true, cookie: true,
             xfbml: true});
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

<fb:like action='like' colorscheme='light' expr:href='data:post.url'
layout='standard' show_faces='true' width='300'/>
    
</b:if>

Sostituendo '*** CHIAVE API ***' con il codice che abbiamo preso da Facebook allo step 1.

Non resta altro da fare: ecco come dovrebbe apparire il nostro blog appena clicchiamo su "Salva modifiche al modello":

Speriamo che tutto sia chiaro: ovviamente, nel caso in cui non lo fosse, i commenti sono aperti... :)

Seguici su Twitter La nostra fan page su Facebook Il nostro canale YouTube RSS Feed
Contattaci per un'analisi gratuita e senza impegno del tuo sito web e scopri il nostro SEO garantito: noi guadagnamo solo se tu ottieni dei risultati concreti >>