Internes “Like”-System für Artikel

2

Viele Websites ermöglichen es dem Leser, über die Qualität eines Beitrags abzustimmen. Am bekanntesten dürfte die Darstellung in Form von “Sternen” sein, wobei die Anzahl der Sterne ein Maß für die Güte eines Artikels, Produkts, etc. ist. In vereinfachter Form kommt das Konzept allerdings auch mit nur einem Button aus, mit dessen Hilfe der User zwar keine direkte Bewertung durchführen, aber zumindest mitteilen kann, dass ihm der Beitrag gefallen hat. Ein solches System ist seit wenigen Tagen auf meiner Website im Einsatz und ich möchte Ihnen nun zeigen, wie Sie es auch auf Ihrer Website einbauen können.

1) Die Bewertungs-Funktionen

Der nachstehende Code, der in die functions.php des WordPress-Themes kopiert wird, enthält die grundlegenden Funktionen für das Like-System. Zunächst einmal wird in der ersten Funktion das Javascript, welches im nächsten Arbeitsschritt erstellt wird, eingebunden und lokalisiert. Letzteres ermöglicht die Variablenübergabe an das spätere Script aus der PHP-Datei hinaus.
Danach wird die Funktion post_like() mithilfe der beiden Hooks wp_ajax_post-like und wp_ajax_nopriv_post-like an die in WordPress enthaltene Datei wp-ajax.php übergeben.
Schließlich folgen die eigentlichen Funktionen, die die IP-Adresse des Users auslesen und bei einem Klick auf den Like-Button den Zählstand erhöhen. Danach kann der User erst nach Ablauf der in der Varibale $timebeforerevote gespeicherten Zeit wieder eine Bewertung für den entsprechenden Artikel vornehmen.
Die letzte Funktion erstellt schließlich das Markup für den Like-Button. In meinem Fall kommen hier sogenannte Font-Icons zum Einsatz, über dessen Gebrauch Sie hier mehr erfahren können. Alternativ können Sie auch ein einfaches Bild oder ein entsprechendes ASCII-Zeichen verwenden.

// Enqueue Ajax script
function enqueue_rating_scripts() {
	wp_enqueue_script('like_post', get_template_directory_uri().'/js/post-like-system.js');  
	wp_localize_script('like_post', 'ajax_var', array( 'url' => admin_url('admin-ajax.php'), 'nonce' => wp_create_nonce('ajax-nonce') ));
}
add_action('wp_head', 'enqueue_rating_scripts');

// Hook Ajax
add_action('wp_ajax_nopriv_post-like', 'post_like');
add_action('wp_ajax_post-like', 'post_like');

$timebeforerevote = 120; // 2 hours

// Like function
function post_like() {
	$nonce = $_POST['nonce'];
	
	if( !wp_verify_nonce( $nonce, 'ajax-nonce' ) ) {
		die();
	}
	
	if( isset($_POST['post_like']) ) {
	
		// Get the user's IP adress
		$ip = $_SERVER['REMOTE_ADDR'];
		$post_id = $_POST['post_id'];
		$meta_IP = get_post_meta($post_id, "voted_IP");
		$voted_IP = $meta_IP[0];
		
		if( !is_array($voted_IP) ) {
			$voted_IP = array();
		}
		
		// Get votes count for the current post
		$meta_count = get_post_meta($post_id, "votes_count", true);
		
		if( !hasAlreadyVoted($post_id) ) {
			$voted_IP[$ip] = time();  
			// Save IP and increase votes count
			update_post_meta($post_id, "voted_IP", $voted_IP);
			update_post_meta($post_id, "votes_count", ++$meta_count);
			// Display count  
			echo $meta_count;
		}		
		else {
			echo "already";
		}
	}
	exit;  
}

// Check if user has already voted
function hasAlreadyVoted($post_id) { 
	global $timebeforerevote;
	$meta_IP = get_post_meta($post_id, "voted_IP");
	$voted_IP = $meta_IP[0];
	
	if( !is_array($voted_IP) ) {
		$voted_IP = array();
	}
	
	// Get IP address
	$ip = $_SERVER['REMOTE_ADDR'];
	
	if( in_array($ip, array_keys($voted_IP)) ) {  
		$time = $voted_IP[$ip];
		$now = time();
		if( round(($now - $time) / 60) > $timebeforerevote )  
			return false;
		return true;
	}
	
	return false;
}

// Create markup for the like button
function getPostLikeLink($post_id) {
	$vote_count = get_post_meta($post_id, "votes_count", true);
	
	if( $vote_count > 0) {
		$vote_count_display = $vote_count;
	}
	else {
		$vote_count_display = '0';
	}
	
	$output = '<div class="post-like">';
	if( hasAlreadyVoted($post_id )) {
		$output .= '<i title="' . __('I like this article', 'lbprojects') . '" class="icon-heart like alreadyvoted"></i>';  
	}	
	else {
		$output .= '<a href="#" data-post_id="' . $post_id . '"><i title="' . __('I like this article', 'lbprojects') . '" class="icon-heart qtip like"></i></a>';
	}	
	$output .= '<span class="count">' . $vote_count_display . '</span></div>';
	
	return $output;
}

An der Stelle, an der später der Like-Button in Ihrem Code erscheinen soll, rufen Sie die nachstehende Funktion auf. Dadurch wird das in der letzten Funktion oben generierte Markup ausgegeben.

<?php echo getPostLikeLink(get_the_ID()); ?>

2) Das Javascript

Das folgende Script hat im Wesentlichen die Aufgabe, beim Klick auf den Like-Button einen Ajax-Request auszuführen und auf diese Weise den Zählerstand zu erhöhen. Zudem werden einige Klassen hinzugefügt, die zur späteren Gestaltung des Like-Buttons in CSS benötigt werden.

// Ajax functions for post like system
jQuery(document).ready(function(){
	jQuery(".post-like a").click(function(){	
		heart = jQuery(this);	
		post_id = heart.data("post_id");		
		jQuery.ajax({
			type: "post",
			url: ajax_var.url,
			data: "action=post-like&nonce="+ajax_var.nonce+"&post_like=&post_id="+post_id,
			success: function(count){
				if(count != "already"){
					heart.addClass("voted");
					heart.siblings(".count").text(count);
				}
			}
		});		
		return false;
	});
});

Kopieren Sie den Code in Ihr Projekt und binden Sie das Script im Dokumentenheader über einen Script-Tag ein.

<script type="text/javascript" src="pfad/datei.js"></script>

3) Das Stylesheet

In meinem Fall sieht das CSS für den Button folgendermaßen aus. Sie sollten es je nach Verwendung allerdings anpassen, da es aktuell auf mein Theme zugeschnitten ist.

.post-like {
	position: absolute;
	bottom: 15px;
	right: 10px;
	font-size: 125%;
	color: #3a3a3a;
}

.post-like .like {
	margin-right: 3px;
	display: inline-block;
	line-height: 80%;
	vertical-align: middle;
	font-size: 18px;
	text-decoration: none;
	color: #aaa;
	transition: color .15s;
	-moz-transition: color .15s;
	-webkit-transition: color .15s;
	-o-transition: color .15s;
	-ms-transition: color .15s;
}

.post-like a:hover .like {
	color: #3a3a3a;
}

.voted .like,
.post-like.alreadyvoted {
	color: #f00;
}

4) Den Zählstand im Backend anzeigen

Den Administrator der Website interssiert sich natürlich dafür, wie oft der Button in einem Artikel bereits geklickt wurde. Damit man die unterschiedlichen Zählstände für die Artikel auf einen Blick erfassen kann, kann man diese in einer zusätzlichen Spalte in der Artikelübersicht im Admin-Panel anzeigen. Somit erspart man sich das Anklicken der einzelnen Artikelseiten.
Um dieses Feature zu ergänzen, fügen Sie folgenden Code in die functions.php ein.

// Add column for post post like count
function LB_add_post_like_column($cols){
	$cols['LB_post_like'] = __('Likes', 'lbprojects');
	return $cols;
}
add_filter('manage_posts_columns', 'LB_add_post_like_column', 5);

function LB_post_like_column($col, $id){
	if( $col == 'LB_post_like' ) {
		echo getPostLikeLink(get_the_ID());
	}
}
add_action('manage_posts_custom_column', 'LB_post_like_column', 5, 2);

Die zusätzliche Spalte erscheint in der Artikelübersicht und kann über die Optionen ein- bzw. ausgeblendet werden.

Über die zusätzliche Spalte im Admin-Panel können die Likes angezeigt werden.

5) Das Endergebnis

Die beiden Bilder zeigen das Endergebnis dieses Tutorials. An der gewünschten Stelle wird nun der Like-Button angezeigt. Beim Klick darauf erhöht sich der Zählstand des Buttons, was dank Ajax sogar ohne Reload der Seite erfolgt.
Ein solcher einfach umzusetzender Button ermöglicht es dem Autor einer Website, Feedback von seinen Lesern zu erhalten. Zwar ist er nicht ganz so flexibel einsetzbar wie das bekannte “5-Sterne” System, ermöglicht aber dennoch eine grobe Einschätzung der Qualität eines Beitrags.

Like-Button mit dem Zählerstand 0

Nach dem Klick färbt sich das Icon rot und gibt somit ein gut sichtbares Feedback.

Hinterlasse eine Antwort

Ihre Email-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert.

*

Kommentare umschalten

2 Kommentare zu "Internes “Like”-System für Artikel"

  • Moritz sagt:

    Hey,

    Cooles System!
    Aber einen Fehler habe ich gefunden:
    Jeder Besucher kann einen Beitrag so oft “Liken”, wie er will, ich glaube, dass das nicht so sein soll. :D

    Moritz

    • Lukas Bommes sagt:

      Hi,
      das ist tatsächlich nicht beabsichtig und hat gestern auch noch funktioniert. Muss wohl irgendetwas “kaputtprogrammiert” haben^^. Danke für den Hinweis. ;)
      Lukas

      P.S. So, jetzt müsste es wieder funktionieren.