jQuery: creare un nostro pulsante di condivisione su Facebook

jQuery: creare un nostro pulsante di condivisione su Facebook

Facebook consente agli sviluppatori di accedere alle sue API direttamente tramite JavaScript. Possiamo sfruttare questa opportunità per creare un pulsante di condivisione (share) personalizzato con jQuery.

Il nostro pulsante sarà in grado sia di far condividere un URL sia di mostrare il numero di condivisioni. Ecco la sua struttura HTML:


<a href="https://www.facebook.com/sharer/sharer.php?u=#" class="fb-share">
	<span class="count">0</span>
</a>

Sostituiremo il carattere # con l'URL da condividere tramite jQuery. Ecco il codice jQuery:


(function( $ ) {
	$.fn.fbShare = function( options ) {
	
		options = $.extend({
			countElement: ".count",
			shareURL: location.href,
			popupWidth: "500",
			popupHeight: "400"
		}, options);
		
		var _addCommas = function( number ) {
			if ( number.length > 3 ) {
					var mod = number.length % 3;
					var output = ( mod > 0 ? ( number.substring( 0,mod ) ) : "" );
					for ( var i=0 ; i < Math.floor( number.length / 3 ); i++ ) {
						if ( ( mod == 0 ) && ( i == 0 ) ) {
							output += number.substring( mod + 3 * i, mod + 3 * i + 3 );
						} else {
							output+= ',' + number.substring( mod + 3 * i, mod + 3 * i + 3 );	
						}
					}
				return ( output );
			} else {
				return number;
			}
		};
		
		var fbURL = "http://graph.facebook.com/?id=" + options.shareURL;
		
		return this.each(function() {
			var $element = $( this ),
				$count = $element.find( options.countElement ),
				href = $element.attr( "href" );
			
			$element.attr( "href", href.replace( "#", options.shareURL ) );
			
			$.getJSON( fbURL, function( data ) {
				var count = data.shares;
				$count.text( _addCommas( count ) );
			});
			
			$element.on( "click", function( e ) {
				e.preventDefault();
				var uri = $element.attr( "href" );
				
				window.open( uri, "", "width=" + options.popupWidth + ",height=" + options.popupHeight );
			});
		
		});
	
	};

})( jQuery );

Il nostro plugin non fa altro che effettuare una richiesta AJAX a Facebook per ottenere il numero di condivisioni per l'URL specificato nell'opzione shareURL (il suo valore predefinito è la pagina corrente).

Il plugin inoltre sostituisce il segnaposto # con l'URL da condividere e apre una finestra popup per la condivisione le cui dimensioni possono essere specificate nelle opzioni popupWidth e popupHeight. L'elemento contenuto nell'opzione countElement è un elemento jQuery che mostrerà il numero totale di condivisioni.

Ecco come si usa il plugin:


$( document ).ready(function() {
	$( ".post" ).each(function() {
		var $post = $( this );
		var permalink = $post.find( ".post-title a" ).attr( "href" );
		var $fbBtn = $post.find( ".fb-share" );
		
		$fbBtn.fbShare({
			shareURL: permalink
		});
	});
});

In questo caso abbiamo simulato la presenza di una pagina contenente vari post, ognuno con il suo permalink di cui vogliamo mostrare il numero di condivisioni.

Torna su