Pubblicato il 20/09/10 - aggiornato il  | 16 commenti :

Come inserire il bottone di Facebook con contatore e come adattarlo al layout di Blogger.

Una alternativa al classico iFrame del Mi Piace può essere quella del bottone con contatore che vedo in alcuni siti e che può anche essere utilizzato insieme all'altro. Uno si può mettere nella parte alta dell'articolo e uno nella parte bassa.

Per la configurazione ci si può recare nella pagina del Like Plugin e si possono scegliere vari parametri dopo aver inserito l'URL del nostro blog.

Le personalizzazioni riguardano:

  1. Lo stile del bottone tra standard (il classico Mi Piace), box_count e button_count. La differenza tra box_count e button_count è che il primo è più compatto mentre il secondo ha una forma più orizzontale
  2. Le dimensioni sono ovviamente anche una conseguenza dello stile che si è scelto come del resto l'opzione Show Faces che ha senso solo con il bottone standard 
  3. E' possibile scegliere tra Like e Recommend (Mi Piace o Consiglia)
  4. Oltre alla possibilità di personalizzare la famiglia di caratteri (Arial, Trbuchet MS, Tahoma, Verdana, ecc) è anche prevista l'opzione per i blog scuri e per quelli chiari. Si deve scegliere dark nella prima ipotesi e light nella seconda. Questo serve per settare i colori del testo in funzione dello sfondo del blog
  5. Si clicca su Get Code dopo che si è terminato con la configurazione

Ne viene fuori un codice di questo tipo

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fsonouningenuo.blogspot.com%2F&amp;layout=box_count&amp;show_faces=false&amp;width=65&amp;action=like&amp;font=trebuchet+ms&amp;colorscheme=light&amp;height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:65px; height:65px;" allowTransparency="true"></iframe>

che però è poco utile in quanto è strettamente legato all'URL che è stato inserito, evidenziato di rosso nell'esempio precedente. Bisogna quindi modificare il codice per in modo che sia in funzione dell'URL del post in cui viene visualizzato. In sostanza si sostituisce l'URL del blog con una espressione javascript

href=&quot; + data:post.url + &quot;

che inserisce come collegamento la variabile data:post.url ciè l'URL del post. &quot; altro non è che l'espressione delle virgolette (") in linguaggio XML. Il codice del bottone con il contatore può quindi venire in questo modo

<iframe src="http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=box_count&amp;show_faces=false&amp;width=65&amp;action=like&amp;font=trebuchet+ms&amp;colorscheme=light&amp;height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:80px;" allowTransparency="true"></iframe>

Ancora però non ci siamo perché Blogger non prende facilmente gli iframe nel modello. Sembra strano ma occorre togliere il tag di chiusura </iframe>.

Tutto questo per mostrare un esempio che riguarda un bottone con il contatore che, in linea di massima è conveniente mostrarlo solo nei post ma non è obbligatorio. Indico anche una modalità di inserimento che credo possa andare bene per i blog che hanno un banner pubblicitario del tipo rettangolo grande subito sotto il titolo del post ma ancora dello spazio e che quindi possono inserire il bottone sulla sua destra come si vede in molti blog americani.

Adesso bisogna vedere dove avete inserito la pubblicità se prima della riga <data:post.body/> oppure prima dell'altra riga <div class='post-body entry-content'>. In ogni caso incollate questo codice subito prima di quello pubblicitario

<!--FACEBOOK BOTTONE CONTATORE INIZIO-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:right; margin-right: 5px; margin-top: 10px;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=box_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:200px; height:60px;'/>
</div>
</b:if>
<!--FACEBOOK BOTTONE CONTATORE FINE-->

Le due righe evidenziate di rosso servono per mostrare il bottone solo nei post e possono essere eliminate mentre i dati presenti nella riga

<div style='float:right; margin-right: 5px; margin-top: 10px;'>

possono essere adattati al modello e riguardano la posizione (sulla destra) e la dimensione del margine a destra e in alto. Gli altri parametri evidenziati possono essere modificati secondo le nostre esigenze. Ecco come si presenta il bottone in questo particolare caso

bottone-contatore-facebookcome vedete è molto visibile e può essere inserito anche abbinato al classico bottone Mi Piace. Se si clicca su uno dei due pulsanti automaticamente il Mi Piace apparirà anche sull'altro

mi-piace-facebook

Ricordo che per inserire il codice occorre andare su Design > Modifica HML, espandere i modelli widget, cercare la riga <data:post.body/> o alternativamente la riga <div class='post-body entry-content'> e incollare il codice subito sopra.

Ulteriori personalizzazioni

  1. Se invece si vuole visualizzare il bottone con il contatore in basso accanto al banner pubblicitario basterò incollare il codice dopo la riga <data:post.body/>.
  2. Se lo vogliamo mostrare, sempre in basso e non abbiamo banner in quella posizione, il codice va inserito dopo <data:post.body/> e la terza riga va modificata in questo modo

<div style='float:left; margin-left: 5px; margin-top: 10px;'>

dove i valori dei margini pixel possono essere variati in funzione del nostro modello.



16 commenti :

  1. Ciao, davvero utile questo suggerimento, lo proverò brevissimo sul mio blog!

    Sai aiutarmi per fare la stessa cosa per google Buzz?

    In molti blog ho visto, oltre al mi piace con contatote che tu hai spiegato come aggiungere, anche il buzz con contatore.

    Sai come metterlo su blogger?

    RispondiElimina
  2. Ciao! Io e alcune amiche abbiamo aperto un blog... e grazie ai tuoi consigli anche la grafica sta diventando accattivante, nonostante noi non siamo delle blogger esperte. Grazie di cuore per il tuo lavoro. Se hai un po' di tempo e ti va di dargli un'occhhiata per darci un parere ci farebbe tanto piacere

    RispondiElimina
  3. @Lorenzo
    Per Google Buzz ci cono molte opzioni di inserimento del bottone illustrate in questo articolo
    http://www.ideepercomputeredinternet.com/2010/02/come-inserire-un-bottone-di.html
    Se lo vuoi inserire in una posizione simile a quella di queto bottone prendi il codice che ti interessa, nella parte finale del post, e sostituisci la riga di stile (quella in cui è presente il tag style) con quella copiata dal codice di questo post

    @three4style
    Il blog è molto carino e come vedo tratta di moda e abbigliamento in senso lato. Devo dire che molte delle mie lettrici hanno dei blog come il vostro. Vi faccio i migliori auguri

    RispondiElimina
  4. @lorenzo
    ho guardato meglio e il post che ti ho linkato è piuttosto vecchio. Puoi trovare il nuovo codice direttamente da Google Buzz
    http://www.google.com/buzz/api/admin/configPostWidget
    o magari tra un po' ci faccio un nuovo articolo

    RispondiElimina
  5. Ciao Ernesto, ti faccio i complimenti per questo articolo molto ben fatto.
    Ti scrivo per chiederti se è possibile creare il tasto Mi piace senza nessun contatore, faccine o altro, praticamente solo un tasto così: https://dl-web.dropbox.com/get/Photos/Mi%20piace.jpg?w=4dfef4a9

    Voglio inserirlo in una pagina personalizzando il testo e senza avere il conteggio dei followers.
    Grazie e ancora complimenti
    Roberto

    RispondiElimina
  6. @Roberto Il link che hai lasciato mi dà errore comunque puoi scegliere tutte le opzioni in questo post
    http://www.ideepercomputeredinternet.com/2011/03/come-inserire-e-personalizzare-il-mi.html
    Se vuoi eliminare il contatore diminuisci le dimensioni orizzontali e verticali fino a mostrare solo quello che ti serve

    RispondiElimina
  7. ciao!
    ho seguito molto attentamente le tue informazioni su come aggiungere il mi piace di fb ma purtoppo nn m esce :(((
    ho cancellato anke le righe che hai evidenziato di rosso casomai non lo volessimo solo nei post :(((( uffy!

    RispondiElimina
  8. @ Pяì♥
    Adesso Facebook ha cambiato parecchie cose, tra l'altro anche il linguaggio di programmazione. Bisogna seguire le istruzione di quest'altro post
    http://www.ideepercomputeredinternet.com/2011/06/come-installare-tutti-i-plugin-di.html
    La parte iniziale del codice può essere sostituita anche da questo
    <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/it_IT/all.js#xfbml=1&appId=Numero-applicazione";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    dove bisogna inserire il numero della applicazione che abbiamo creato.

    RispondiElimina
  9. Ciao ernesto io volevo togliere quei link per condividere che ci sono nel mio blog e mettere i tasti con contatore a fumetto come ci sono qua nel tuo blog per ogni post..non so se mi sono spiegato bene..il mio blog è questo http://www.reggaetonitalia.com/

    RispondiElimina
  10. @Pizarro Dj
    Per togliere i bottoni di condivisione ufficiali devi andare su Post sul Blog per configurare gli elementi

    http://www.ideepercomputeredinternet.com/2010/12/impostazioni-per-configurare-il-post-su.html

    Per mettere i bottoni come i miei puoi leggerti questo tutorial

    http://www.ideepercomputeredinternet.com/2011/06/come-allineare-i-bottoni-di-facebook.html

    RispondiElimina
  11. Ciao ! Sono riuscito a mettere il bottone "mi piace" sui post...ma li volevo anche nella homepage...come si può fare ? Ti allego l'indirizzo del mio blog www.fedetails.com
    grazie !!

    RispondiElimina
    Risposte
    1. @FrancoFedetails
      C'è già scritto nel posto come fare per visualizzare i bottoni in tutte le pagine e quindi anche in homepage
      "Le due righe evidenziate di rosso servono per mostrare il bottone solo nei post e possono essere eliminate"
      Basta quindi togliere le due righe di codice di colore rosso che sono la seconda e la penultima e il gioco è fatto.

      Elimina
    2. Grazie! non avevo capito...sono un po scarso in html...anzi ne so proprio poco ! :)

      Elimina
  12. @FrancoFedetails
    Se ti può consolare quando ho iniziato con il mio primo blog non sapevo neppure cosa fosse l'HTML :)

    RispondiElimina
    Risposte
    1. eheheh...però mi esce"mi piace" in italiano...mi piacerebbe in inglese...

      Elimina
    2. @FrancoFedetails
      Per visualizzare il Like al posto del Mi Piace segui questi tutorial
      http://www.ideepercomputeredinternet.com/2012/06/come-usare-open-graph-di-facebook-in.html
      http://www.ideepercomputeredinternet.com/2012/06/facebook-blogger-plugin-open-graph.html
      Se vuoi i plugin in inglese, nel primo tutorial, devi sostituire it_IT con en_US in tutte e due le occorrenze.

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy