Reactions Widget Script for Xtgem Blog (xtblog) [v. 1.0]

Allright, still talking about xtgem especially xtgem blog or xtblog. Now I will share a script that will make a reactions widget on your blog on xtgem site so that after visitor finished reading your article, they can leave reactions whether they like or not to our post.

By using a reactions widget, we can collect some mark leave by our readers. How many readers like our post, how many they hate it, or are they just being neutral about the post we written?

In this script, basically I am using the polling widget (xtpoll) xtgem has as one of the feature we can add via building block. But It's almost impossible to freely using poll widget combined with xtblog.

So here, I am manipulating the xtpoll widget by using some xtscript, and JQuery to redesign it. It will use your xtgem site domain and you blog post id as the unique string, adjust the poll question and answers parameters, and voila! A nice reactions widget for our xtblog...

By default, this script provide three choices your visitors can choose, it is: "Awesome", "Not bad", and "Horrible". If you are familiar with xtcode and Javascript/JQuery, you can easily modify this script by your own to your suits.

This script is also shows all reactions submitted by visitors in a "tube meter" looks. Note: The tube meter may will not shown on older browsers, e.g. all "Mini" browsers. Live demo: http://unduhapp.wapgem.com (Sorry, my blog only written in Bahasa Indonesia).


xtgem reaction widget mobile by weblogwap

xtgem reaction widget desktop by weblogwap

Installation - Reactions widget script for xtblog

1. Include JQuery library

This script really relies on JQuery to manipulate the elements, so you must include JQuery library source in your xtgem site. Include the following code in you _headtags file:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

2. Place the html code in your xtblog template

Place the following code snippet in your xtblog template file in entry/single post section where you want the widget to be appear (usually the good the place is after the post content):

<div id="reactions-meter"></div>  
<div id="poll-this-post"></div>

3. Add the main codes

Now here is the main codes, add the following main codes in your _footer file. Replace MYXTGEMSITE (on line 4) with your xtgem site domain WITHOUT dot [.] (e.g.: mysitextgemcom):

<!--parser:xtscript-->
	get __xtblog_entry
		if $__xtblog_entry
			print <div id='post-poll-section'><xt:poll id="MYXTGEMSITE_$__xtblog_entry" question="Rate this" voted_text="" show_results="always" answer1="Awesome" answer2="Not bad" answer3="Horrible" /></div>
		endif;
<!--/parser:xtscript-->

<script>
$(document).ready(function(){
	var checkForm, rctItem, rctWidth, rctPercent, fontSize;
	var r = 1;
	var postSection = $('#post-poll-section').html();
	$('#post-poll-section').text('');
	$('#poll-this-post').html(postSection);
	checkForm = $('#poll-this-post div form').attr('class');
	$('#poll-this-post').css('display','block');
	var rcWidth = $('#reactions-meter').innerWidth();
	$('#poll-this-post div').removeAttr('class');
	if (checkForm == 'xtpoll') {
		$('form.xtpoll input[type="submit"]').attr('value','Rate!');
		$('#poll-this-post div form label').each(function(){
		rctItem = $(this).text();
		rctPercent = rctItem.split('(')[1].split('%')[0].trim();
		if (rctPercent <= 20) {
			fontSize = '7px';
		} else { fontSize = 'auto'; }
		if (rctPercent != 0) {
			rctPercent = ((rctPercent * rcWidth) / 100) - 5;
			$('#reactions-meter').append('<span class="rating-'+r+'" style="display:inline-block;width:'+rctPercent+'px;text-align:center;font-size:'+fontSize+'">'+rctItem.split(':')[0]+'</span>')
		}
		$(this).attr('class','text-color-'+r);
		r++;
	});
	} else {
	$('#poll-this-post div div div').each(function(){
	rctItem = $(this).text();
	rctPercent = rctItem.split('(')[1].split('%')[0].trim();
	if (rctPercent <= 20) {
		fontSize = '7px';
		} else { fontSize = 'auto'; }
	if (rctPercent != 0) {
		rctPercent = ((rctPercent * rcWidth) / 100) - 5;
		$('#reactions-meter').append('<span class="rating-'+r+'" style="display:inline-block;width:'+rctPercent+'px;text-align:center;font-size:'+fontSize+' !important;">'+rctItem.split(':')[0]+'</span>')
	}
	$(this).attr('class','text-color-'+r);
	r++;
	});
	}
});
</script>

4. The CSS code

The last one is the styling. Green means positive, blue means neutral, and orange means negative reactions. Add the following css code snippet to your css file, or simply paste it in your _headtags file:

<style>
#post-poll-section {display:none}
#reactions-meter {font-size:12px !important;width:100%;display:block;border:1px solid #ccc; border-radius:5px; padding:3px;margin-top:10px;text-align:center;background:#fafafa}
#reactions-meter span {color:#fff;padding:5px;height:30px;vertical-align:middle;}
#poll-this-post .text-color-1 {color:#8BC34A}
#poll-this-post .text-color-2 {color:#2196F3}
#poll-this-post .text-color-3 {color:#FF9800}
#reactions-meter span.rating-1 {background:linear-gradient(#8BC34A,#B7FF64)}
#reactions-meter span.rating-2 {background:linear-gradient(#2196F3,#81C6FC)}
#reactions-meter span.rating-3 {background:linear-gradient(#FF9800,#FFC167)}
</style>


Allright finally done. Now every visitors that come to your xtgem site and read your blog post can leave a mark of how they think about your post.

Stay up to date to WeBlogWap to get the latest update of this reactions widget script for your xtgem blog or xtblog in the future...

Comments on "Reactions Widget Script for Xtgem Blog (xtblog) [v. 1.0]"