Custom "Like"-Button in SharePoint List

I've recently started to work with the JSLinks in SharePoint and I'm currently struggeling a bit with something here and multiple hours of browsing and searching haven't really helped me so far so I hoped maybe you could. I have a SharePoint-List with the Like-Feature activated. I wanted to use jsLink to render the LikesCount-Column differently (The images Basic Look show what the column looks like out of the box and the Look i wanted to go for)

Basically is what i did is I looked at the basic code, took it to a template-Engine and replace the template in SharePoint using the following Code. As it renders just fine as you can see in the second image, I loose the event handling. So when I click the Like-Button, no Web-Request will be sent and the Item will not be liked.

Would be very happy if someone could help me out

(function(){
	var inCtx = {
		Templates: {
			Fields: {
				'LikesCount':{
					'View' : LikesCount
				}	
			}
		},
	};	SPClientTemplates.TemplateManager.RegisterTemplateOverrides(inCtx);


	function LikesCount(itemCtx){

		var tmplParams = {
			ElementId: itemCtx.CurrentItem.ID,
			Title: '',
			LikesCount : itemCtx.CurrentItem.LikesCount
		};
		var likedByIds = [];

		$.each(itemCtx.CurrentItem.LikedBy, function(index){
			likedByIds.push(parseInt(this.id));
			tmplParams.Title += this.title;

			if(index !== itemCtx.CurrentItem.LikedBy.length-1){
				tmplParams.Title += this.title +', '
			}
		})
		var result = '';
		if(likedByIds.indexOf(itemCtx.CurrentUserId) !== -1){
			tmplParams.ImageLink = '***/images/LikeButtonActive.png'
			result = $('.likes-count[version="0.1"]').tmpl(tmplParams).html();
		} else {
			tmplParams.ImageLink = '***/images/LikeButtonInactive.png'
			result = $('.likes-count[version="0.1"]').tmpl(tmplParams).html();
		}
		return result;
	}

})();

<script class="likes-count" version="0.1" type="text/x-jQuery-tmpl">
	<span id="root-likesElement-{{html ElementId}}">
		<a href="javascript:;" id="likesElement-{{html ElementId}}" class="ms-secondaryCommandLink"><img class="like-button" src="{{html ImageLink}}" /></a>
		<span title="{{html Title}}" class="ms-comm-likesMetadata ms-metadata">
			<span class="ms-comm-likesCount ms-comm-reputationNumbers">{{html LikesCount}}</span>
		</span>
	
	</span>
</script>

Basic Look

Look that I'd like

For rendering rating fields SP.UI.Reputation.LikesRenderer is intended, you could take a look at sp.ui.reputation.debug.js to find more details on how click event handler is registered.

But instead of customizing LikesCount rendering from scratch i would suggest a bit different approach. The idea is to specify custom image url via SP.UI.Reputation.LikesHelpers.ImageUrls class which in turn used by SP.UI.Reputation.LikesRenderer to specify image urls.

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides({

      OnPreRender: function(ctx) {
          SP.UI.Reputation.LikesHelpers.ImageUrls.$W = "/Style Library/hand-like-32.png";
          SP.UI.Reputation.LikesHelpers.ImageUrls.$X = "/Style Library/hand-like-32.png";
      }
    });

});

Result