Implementing an AJAX "Like" system on WordPress posts

Implementing a "Like" button on WordPress posts (just as Facebook does) simply requires the use of AJAX combined with WordPress custom fields. As you will see, this is not a complicated task.

The first thing we need to do is to register an AJAX action in WordPress:

function update_like_count() {
		
	  $post_id = intval( $_GET['post_id'] );
		
	  if( filter_var( $post_id, FILTER_VALIDATE_INT ) ) {
	  
	  	$article = get_post( $post_id );
	  	$output_count = 0;
	  	
	  	if( !is_null( $article ) ) {
			$count = get_post_meta( $post_id, 'my-post-likes', true );
			if( $count == '' ) {
				update_post_meta( $post_id, 'my-post-likes', '1' );
				$output_count = 1;
			} else {
				$n = intval( $count );
				$n++;
				update_post_meta( $post_id, 'my-post-likes', $n );
				$output_count = $n;
			}
		}
		
	  }
	  $output = array( 'count' => $output_count );
	  echo json_encode( $output );
	  exit();
}

add_action( 'wp_ajax_my_update_likes', 'update_like_count' );
add_action( 'wp_ajax_nopriv_my_update_likes', 'update_like_count' );

We get the numeric ID of the current post through AJAX, we validate it by also making sure that the post actually exists and we check the value of the my-post-likes custom field. If it's empty, we set it to 1. Otherwise, we update its value by incrementing it.

Since everything relies on the current post's ID, we need to set the following HTML structure:

<article class="post">
	<!-- Post contents -->
	<footer class="post-meta">
		<a href="#" class="my-post-like" data-id="<?php the_ID(); ?>">Like
			<span class="like-count"><?php display_post_likes( get_the_ID() ); ?></span>
		</a>
	</footer>	
</article>

display_post_likes() is defined as follows:

function display_post_likes( $post_id = null ) {
	$value = '';
	if( is_null( $post_id ) ) {
		global $post;
		$value = get_post_meta( $post->ID, 'my-post-likes', true );
		
	} else {
		$value = get_post_meta( $post_id, 'my-post-likes', true );	
	}
	
	echo $value;
}

Now we can write our jQuery code to handle the AJAX request:

(function( $ ) {
	$.fn.myPostLikes = function( options ) {
		options = $.extend({
			countElement: ".like-count"
		}, options);
		
		return this.each(function() {
			var $element = $( this ),
				$count = $( options.countElement, $element ),
				url = "http://" + location.host + "/wp-admin/admin-ajax.php",
				id = $element.data( "id" ), // Post's ID
				action = "my_update_likes",
				data = {
					action: action,
					post_id: id
				};
				
				$element.on( "click", function( e ) {
					e.preventDefault();
					$.getJSON( url, data, function( json ) {
						if( json && json.count ) {
							$count.text( json.count ); // Update the count without page refresh
						}
					});
				});
		});
	};

})( jQuery );

We can use the above plugin as follows:

(function( $ ) {
	$(function() {
		if( $( ".my-post-like" ).length ) {
			$( ".my-post-like" ).myPostLikes();
		}
	});
})( jQuery );