├── README.md
├── js
    └── like-post.js
├── like-metabox.php
└── like-post.php


/README.md:
--------------------------------------------------------------------------------
 1 | WP like button (ajax)
 2 | ===================
 3 | An ajax like button for Wordpress that can be used anywhere you want.
 4 | 
 5 | **We have received a few questions about how we made the like button on [Draft.im](http://www.draft.im "Draft.im") so I decided to make it available on Github**. It's a Wordpress function that stores the IP address of those who like a post, post or custom post type post in a metabox. Simple yet effective.
 6 | 
 7 | ##Include the php files
 8 | note: these should be included in the functions.php
 9 | ```php
10 |    <?php
11 |    include_once('inc/like-metabox.php');
12 |    include_once('inc/like-post.php');
13 |    ?>
14 | ```
15 | 
16 | ##Enqueue the js file
17 | note: this also has to be added to the functions.php file, if there's already a "wp_enqueue_scripts" present just add the script to that function
18 | ```php
19 | <?php
20 | function enqueue_js_files() {
21 | 
22 |    wp_register_script( 'like-post', get_template_directory_uri() . '/js/like-post.js', array('jquery') ,false,'1.0',true);
23 |    wp_enqueue_script( 'like-post' );
24 | 
25 | }
26 | add_action( 'wp_enqueue_scripts', 'enqueue_js_files' );
27 | ?>
28 | ```
29 | 
30 | ##Show the like link
31 | Make the like button show up in the front-end in it's most basic form, when the button has been clicked the js adds or removes the class "liked"
32 | ```html
33 | <a class="like" rel="<?php echo $post->ID; ?>"><?php echo likeCount($post->ID); ?> likes</a>
34 | ```
35 | 
36 | ###Show the metabox on multiple post types
37 | Simply add new ones to the array and the metabox will show up on those pages. Just don't forget to add the like button/link in the front-end
38 | ```php
39 | // You can find this on line 9 in the like-metabox.php file
40 | $show_on = array('post', 'pets');
41 | ```


--------------------------------------------------------------------------------
/js/like-post.js:
--------------------------------------------------------------------------------
 1 | jQuery(document).ready(function($) {
 2 | 
 3 | 	/***************************************
 4 | 		ajax like shot feature
 5 | 	***************************************/
 6 | 	$(".like").stop().click(function(){
 7 | 
 8 | 		var rel = $(this).attr("rel");
 9 | 
10 | 		var data = {
11 | 			data: rel,
12 | 			action: 'like_callback'
13 | 		}
14 | 		$.ajax({
15 | 			action: "like_callback",
16 | 			type: "GET",
17 | 			dataType: "json",
18 | 			url: ajaxurl,
19 | 
20 | 			data: data,
21 | 			success: function(data){
22 | 
23 | 				console.log(data.likes);
24 | 				console.log(data.status);
25 | 
26 | 				if(data.status == true){
27 | 					$(".like[rel="+rel+"]").html(data.likes + " likes").addClass("liked");
28 | 				}else{
29 | 					$(".like[rel="+rel+"]").html(data.likes + " likes").removeClass("liked");
30 | 				}
31 | 
32 | 			}
33 | 		});
34 | 
35 | 	});
36 | 
37 | });


--------------------------------------------------------------------------------
/like-metabox.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | /*******************************
 4 |  * Add / show metabox
 5 | *******************************/
 6 | 
 7 | function add_like_metabox() {
 8 | 
 9 |    $show_on = array('post');
10 |    if(in_array(get_post_type(), $show_on)){
11 | 
12 |       add_meta_box(
13 |          'like_metabox',
14 |          'Likes',
15 |          'render_like_metabox',
16 |          get_post_type(),
17 |          'side',
18 |          'low'
19 |       );
20 | 
21 |    }
22 | 
23 | }
24 | 
25 | add_action('add_meta_boxes', 'add_like_metabox');
26 | 
27 | 
28 | 
29 | /*******************************
30 |  * Render the metabox
31 | *******************************/
32 | 
33 | function render_like_metabox(){
34 |    global $post;
35 |    $likers = get_post_meta($post->ID, '_likers', true);
36 |    $likes_count = get_post_meta($post->ID, '_likes_count', true);
37 | 
38 |    wp_nonce_field(__FILE__, 'wp_nonce');
39 |    ?>
40 |    <p>
41 |       <label for="likers">IP address array of the likers:</label>
42 |       <textarea name="_likers" id="likers" class="widefat"><?php echo $likers; ?></textarea>
43 |    </p>
44 |    <p>
45 |       <label for="likes_count">Likes count:</label>
46 |       <input type="text" name="_likes_count" id="likes_count" class="widefat" value="<?php echo $likes_count; ?>" />
47 |    </p>
48 |    <?php
49 | }
50 | 
51 | 
52 | 
53 | /*******************************
54 |  * Save the metabox
55 | *******************************/
56 | 
57 | function save_like_metabox(){
58 |    global $post;
59 | 
60 |    if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE ) return;
61 | 
62 |    if($_POST && wp_verify_nonce($_POST['wp_nonce'], __FILE__)){
63 |       if(isset($_POST['_likers']) || isset($_POST['_likes_count'])){
64 |          update_post_meta($post->ID, '_likers', $_POST['_likers']);
65 |          update_post_meta($post->ID, '_likes_count', $_POST['_likes_count']);
66 |       }
67 |    }
68 | }
69 | 
70 | add_action('save_post', 'save_like_metabox');
71 | ?>


--------------------------------------------------------------------------------
/like-post.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | /*******************************
 4 |  * make sure ajax is working otherwise the like button won't work
 5 | *******************************/
 6 | 
 7 | function add_ajax_url() {
 8 |     echo '<script type="text/javascript">var ajaxurl = "' . admin_url('admin-ajax.php') . '";</script>';
 9 | }
10 | // Add hook for admin <head></head>
11 | add_action('wp_head', 'add_ajax_url');
12 | 
13 | 
14 | 
15 | /*******************************
16 |  * likeCount:
17 |  * Get current like count, this is used to show the amount of likes to the user
18 | *******************************/
19 | 
20 | function likeCount($id){
21 | 
22 |    $likes = get_post_meta( $id, '_likers', true );
23 | 
24 |    if(!empty($likes)){
25 |       return count(explode(', ', $likes));
26 |    }else{
27 |       return '0';
28 |    }
29 | 
30 | }
31 | 
32 | 
33 | 
34 | /*******************************
35 |  * like_callback:
36 |  * add or remove likes from the Wordpress metabox field
37 | *******************************/
38 | 
39 | add_action('wp_ajax_like_callback', 'like_callback');
40 | add_action('wp_ajax_nopriv_like_callback', 'like_callback');
41 | 
42 | function like_callback() {
43 | 
44 |    $id = json_decode($_GET['data']); // Get the ajax call
45 |    $feedback = array("likes" => "");
46 | 
47 | 
48 |    // Get metabox values
49 |    $currentvalue = get_post_meta( $id, '_likers', true );
50 |    $likes = intval(get_post_meta( $id, '_likes_count', true ));
51 | 
52 | 
53 |    // Convert likers string to an array
54 |    $likesarray = explode(', ', $currentvalue);
55 | 
56 | 
57 |    // Check if the likers metabox already has a value to determine if the new entry has to be prefixed with a comma or not
58 |    if(!empty($currentvalue)){
59 |       $newvalue = $currentvalue .', '. $_SERVER['REMOTE_ADDR'];
60 |    }else{
61 |       $newvalue = $_SERVER['REMOTE_ADDR'];
62 |    }
63 | 
64 | 
65 |    // Check if the IP address is already present, if not, add it
66 |    if(strpos($currentvalue, $_SERVER['REMOTE_ADDR']) === false){
67 |       $nlikes = $likes + 1;
68 |       if(update_post_meta($id, '_likers', $newvalue, $currentvalue) && update_post_meta($id, '_likes_count', $nlikes, $likes)){
69 |          $feedback = array("likes" => likeCount($id), "status" => true);
70 |       }
71 |    }else{
72 | 
73 |       $key = array_search($_SERVER['REMOTE_ADDR'], $likesarray);
74 |       unset($likesarray[$key]);
75 |       $nlikes = $likes - 1;
76 | 
77 |       if(update_post_meta($id, '_likers', implode(", ", $likesarray), $currentvalue) && update_post_meta($id, '_likes_count', $nlikes, $likes)){
78 |          $feedback = array("likes" => likeCount($id), "status" => false);
79 |       }
80 | 
81 |    }
82 | 
83 |    echo json_encode($feedback);
84 | 
85 |    die(); // A kitten gif will be removed from the interwebs if you delete this line
86 | 
87 | }
88 | ?>


--------------------------------------------------------------------------------