Inserire in una posizione fissa e personalizzare il bottone del Mi Piace di Facebook.

Dopo aver illustrato come implementare un widget nel blog in una posizione fissa, cioè che non muta quando si scorre la pagina, vediamo come applicare questo metodo ai bottoni di Facebook. Il Like Botton di Facebook è disponibile in tre versioni tutte quante con la possibilità di implementare anche il bottone Invia. Nel seguente screenshot sono visibili la versione standard, quella box count e quella a pulsante con contatore

 

Per il codice di ciascuno di essi vi rimando al post sulla personalizzazione del Mi Piace. Ricordo brevemente che per il pulsante standard si utilizza il codice layout=standard, per il pulsante con il contatore layout=button_count e per il box con contatore layout=box_count. Se non si inserisce nessun parametro viene visualizzato il pulsante standard.

Per inserire uno di questi bottoni in una determinata posizione del blog, si va su Design > Aggiungi un gadget > HTML/Javascript e si incolla il codice

<!-- FACEBOOK LIKE BUTTON START -->
<div style="position:fixed;top:250px;left:120px;">
<div class='facebook-button'>
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Mi Piace</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
<!-- FACEBOOK LIKE BUTTON END - www.ideepercomputeredinternet.com -->

Il pulsante Mi Piace sarà visibile in tutte le pagine del blog e, chi ci cliccherà sopra, condividerà sul suo Profilo la pagina il cui URL è visibile in quel momento nella barra degli indirizzi del browser. Avrà questo aspetto

e rimarrà fisso allo scorrere della pagina. Per trovargli la giusta posizione bisogna agire sui parametri top:250px;left:120px; e eventualmente sostituirli con bottom e right che determinano la distanza in pixel dai quattro lati del layout

• Demo del pulsante flottante di Facebook -

Con questo metodo si può anche cambiare la scritta del pulsante e mettere al posto di Mi Piace, colorato di blu, un'altra espressione come per esempio Share o Consiglia. Al posto del codice che ho utilizzato per questo box con contatore, se ne può anche inserire un altro mantenendo invariato il contenitore <div>, cambiando cioè solo la terza, quarta e quinta riga del codice.