jQuery: aggiungere il bottone Like di Facebook

Con jQuery possiamo aggiungere il bottone Like di Facebook per condividere i link in modo assolutamente dinamico ed automatico. A tal fine creeremo un semplicissimo plugin che assembla l'elemento iframe del bottone avendo come opzioni l'URL da condividere e le dimensioni del bottone. Vediamo insieme i dettagli della nostra soluzione.

Dato che dovremo usare un URL come parametro del nostro plugin, useremo il metodo JavaScript encodeURIComponent() per codificare l'URL nel modo appropriato. Il nostro bottone mostrerà anche gli avatar del profilo degli utenti che lo utilizzeranno:

(function($) {

	$.fn.facebookLike = function(options) {
	
		var that = this;
		var settings = {
		
			url: location.href,
			width: 450,
			height: 80
		
		};
		
		options = $.extend(settings, options);
		
		return that.each(function() {
		
			var $iframe = $('<iframe/>').attr(
                 {
                   src: 'http://www.facebook.com/plugins/like.php?href=' + encodeURIComponent(options.url) + 				 				  '&amp;layout=standard&amp;show_faces=true&amp;width=' + options.width + '&amp;action=like&amp;font&amp;colorscheme=light&amp;height=' + options.height,                 
                 
                 scrolling: 'no',
                 frameborder: '0',
                 allowTransparency: 'true'
                 
                 }).css({
                 	border: 'none',
                 	overflow: 'hidden',
                 	width: options.width,
                 	height: options.height
                 });
                 
                 
           $iframe.appendTo(that);

						   	
		
		
		});
	
	
	};


})(jQuery);

Come URL predefinito il plugin utilizza quello della pagina corrente utilizzando la proprietà href dell'oggetto BOM location. Il suo utilizzo è molto semplice:

$(function() {

	$('#fb-like').facebookLike();

});

Il parametro dell'URL dell'elemento iframe show_faces ci permette di specificare se vogliamo mostrare gli avatar del profilo degli utenti che attivano il bottone. Potete visionare l'esempio finale in questa pagina.