Pulsanti social per WordPress con jQuery

In questo articolo vedremo come combinare le richieste AJAX effettuate tramite le API di WordPress con jQuery per creare dei pulsanti di
condivisione social per Twitter, Facebook e Google Plus utilizzando un approccio object-oriented.

Definiamo la classe

Definiamo subito la nostra classe specificando i componenti di riferimento:

class Social_Share {
	const TWITTER_URL = 'http://urls.api.twitter.com/1/urls/count.json?url=';
	const GPLUS_URL = 'https://clients6.google.com/rpc';
	public function __construct() {
		// hooks di WordPress
	}
}

Gli hook di WordPress andranno inizializzati nel costruttore. Quindi sarà sufficiente istanziare la classe per far eseguire il loro codice:

$socialShare = new Social_Share();

Definire i bottoni di share nel codice HTML

Possiamo creare i bottoni di share come stringhe HTML da aggiungere al contenuto dei singoli post utilizzando il filtro the_content:

public function __construct() {
	add_filter( 'the_content', array( &$this, 'insertSocialButtons' ) );
}
public function insertSocialButtons( $content ) {
	global $post;
	$postID = $post->ID;
	if( is_single( $postID ) ) {
		$html = '<div class="social-share">';
		$html .= '<a href="https://www.facebook.com/sharer/sharer.php?u=#" class="facebook-share"><span class="count">0</span></a>';
		$html .= '<a href="https://twitter.com/intent/tweet?url=#url&via=#via&text=#text" class="twitter-share"><span class="count">0</span></a>';
		$html .= '<a href="https://plus.google.com/share?url=#" class="gplus-share"><span class="count">0</span></a>';
		$html .= '</div>';
		$content = $content . $html;
	}
	return $content;
}

Il carattere # è un segnaposto che verrà usato da jQuery per inserire i parametri variabili negli URL di condivisione. L'elemento con classe
count mostrerà il numero di condivisioni per ciascun post singolo.

Definire le chiamate AJAX

I social network che richiedono AJAX sono Twitter e Google Plus, mentre Facebook utilizza direttamente JSONP tramite le sue Graph API.
Per prima cosa definiamo una action AJAX per Twitter:

public function __construct() {
	add_filter( 'the_content', array( &$this, 'insertSocialButtons' ) );
	add_action( 'wp_ajax_my_twitter_share', array( &$this, 'twitterCountShares' ) );
}
public function twitterCountShares() {
	$url = $_GET[ 'url' ];
	if(	filter_var( $url, FILTER_VALIDATE_URL ) ) {
		$baseURL = self::TWITTER_URL;
		$json = file_get_contents( $baseURL . $url );
		echo $json;
		exit();
	}
}

L'URL passato via AJAX viene prima validato e quindi viene restituito l'output JSON di Twitter (un oggetto che verrà interpretato da
jQuery).

Per Google+ il discorso cambia, infatti questo social network accetta solo richieste in POST il cui formato deve essere una stringa JSON valida.
L'unico parametro variabile è l'URL di cui si vuole conoscere il numero di condivisioni.

public function __construct() {
	add_filter( 'the_content', array( &$this, 'insertSocialButtons' ) );
	add_action( 'wp_ajax_my_twitter_share', array( &$this, 'twitterCountShares' ) );
	add_action( 'wp_ajax_my_gplus_share', array( &$this, 'gPlusCountShares' ) );
}
public function gPlusCountShares() {
	$url = $_GET[ 'url' ];
	$gplusURL = self::GPLUS_URL;
	if(	filter_var( $url, FILTER_VALIDATE_URL ) ) {
		$data = '[{"method":"pos.plusones.get","id":"p","params":{"nolog":true,"id":"'.$url .'","source":"widget","userId":"@viewer","groupID":"@self"},"jsonrpc":"2.0","key":"p","apiVersion":"v1"}]';
		$ch = curl_init( $gplusURL );
		curl_setopt( $ch, CURLOPT_CUSTOMREQUEST, "POST" );
		curl_setopt( $ch, CURLOPT_POSTFIELDS, $data );
		curl_setopt( $ch, CURLOPT_RETURNTRANSFER, true );
		curl_setopt( $ch, CURLOPT_SSL_VERIFYPEER, false );
		curl_setopt( $ch, CURLOPT_SSL_VERIFYHOST, false );
		curl_setopt( $ch, CURLOPT_HTTPHEADER, array(
    	'Content-Type: application/json',
    	'Content-Length: ' . strlen( $data )
    		)
		);                                                                                                                   
		$result = curl_exec( $ch );
		echo $result;
		exit();
	}
}

A questo punto dobbiamo definire il codice JavaScript.

Definire il codice JavaScript

Iniziamo subito col definire un file JavaScript i cui contenuti per ora si limiteranno a questi:

(function( $ ) {
	// definiamo i plugin jQuery
	$(function() {
		// invochiamo i plugin
	});
})( jQuery );

Quindi inseriamo il nostro file solo nei post singoli:

public function __construct() {
	add_filter( 'the_content', array( &$this, 'insertSocialButtons' ) );
	add_action( 'wp_ajax_my_twitter_share', array( &$this, 'twitterCountShares' ) );
	add_action( 'wp_ajax_my_gplus_share', array( &$this, 'gPlusCountShares' ) );
	add_action( 'wp_enqueue_scripts', array( &$this, 'insertSocialScripts' ) );
}
public function insertSocialScripts() {
	if( is_single() && !is_admin() ) {
		wp_register_script( 'social-shares', get_template_directory_uri() . '/js/jquery.social-shares.js', array( 'jquery' ), true );
		wp_enqueue_script( 'social-shares' );
	}
}

Creiamo per prima cosa il plugin per Facebook che non necessita delle API AJAX di WordPress:

// definiamo i plugin jQuery
$.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 );
			});
		});
	};

La struttura del plugin, che vedremo ripetuta anche per Twitter e Google+, è semplice: la funzione di utility _addCommas()
serve a formattare il numero totale delle condivisioni, che solitamente sono in formato intero, utilizzando le virgole per separare le unità
(ad esempio le migliaia).

Quindi il plugin sostituisce i/il carattere/i # nell'URL del link di condivisione con i parametri appropriati (in questo caso
l'URL del post), infine associa un evento click al link facendo aprire una finestra popup che porterà alla pagina di condivisione del social
network. Ovviamente i contenuti di questa pagina sono determinati dai parametri usati nell'URL del link. Inoltre il plugin visualizza il numero
di condivisioni nell'elemento count dopo averlo formattato.

I plugin per Twitter e Google+ aggiungono semplicemente la chiamata AJAX alle API di WordPress:

$.fn.twitterShare = function( options ) {
		options = $.extend({
			countElement: ".count",
			ajaxURL: "http://" + location.host + "/wp-admin/admin-ajax.php",
			shareURL: location.href,
			popupWidth: "500",
			popupHeight: "400"
			via: "gabromanato",
			text: document.title
		}, options);
		var _addCommas = function( number ) {
			// .. come sopra
		};
		return this.each(function() {
			var $element = $( this ),
				$count = $element.find( options.countElement ),
				href = $element.attr( "href" );
			$element.attr( "href", href.replace( "#url", options.shareURL ).
				replace( "#via", options.via ). replace( "#text", options.text ) );
			$.getJSON( options.ajaxURL, { url: options.shareURL, action: "my_twitter_share" }, function( data ) {
				var count = data.count;
				$count.text( _addCommas( count ) );
			});
			$element.on( "click", function( e ) {
				// ... come sopra
			});
		});
	};
	$.fn.gplusShare = function( options ) {
		options = $.extend({
			count: ".count",
			ajaxURL: "http://" + location.host + "/wp-admin/admin-ajax.php",
			shareURL: location.href,
			popupWidth: "500",
			popupHeight: "400"
		}, options);
		var _addCommas = function( number ) {
			//... come sopra
		};
		return this.each(function() {
			var $element = $( this ),
				$count = $element.find( options.count ),
				href = $element.attr( "href" );
			$element.attr( "href", href.replace( "#", options.shareURL ) );
			$.getJSON( options.ajaxURL, { url: options.shareURL, action: "my_gplus_share" }, function( data ) {
				var count = data[0].result.metadata.globalCounts.count;
				$count.text( _addCommas( count ) );
			});
			$element.on( "click", function( e ) {
				// ... come sopra
			});
		});
	};

Quindi invochiamo i plugin:

$(function() {
	// invochiamo i plugin
	$( ".facebook-share" ).fbShare();
	$( ".twitter-share" ).twitterShare();
	$( ".gplus-share" ).gplusShare();
});

Conclusione

La combinazione di AJAX e jQuery coordinati dalle API di WordPress ci permettono di ottenere con facilità un risultato ottimale, teniamo
comunque presente che i bottoni di condivisione social hanno un senso quando il post viene presentato nella sua interezza, infatti gli
utenti hanno bisogno di leggere tutto il contenuto prima di decidere se condividerlo o meno.