Quick Star Buttons

Ever want to just insert a star rating into your website with CSS, HTML & Basic jQuery? There are a bunch of scripts out there that’ll give you fancy images or crazy javascript but most of the time you just want a basic star rating with nothing flashy. This will do the trick. No images and no fuss. Also it is ready to insert directly into a form to submit your review!

Ok, we should stop talking and dive in!

First: The HTML

<input type="hidden" name="review[stars]" id="star-rating" />
<dl>
    <dt>Rating: </dt>
    <dd>
	    <div class="rating">
		<span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span>
	    </div>
    </dd>
</dl>

Second: The CSS

.info-reviews .rating {
  unicode-bidi: bidi-override;
  direction: rtl;
}
.info-reviews textarea, .info-reviews input.text {
	width: 100%;
}
.info-reviews .rating > span, .info-reviews .rated > span {
  display: inline-block;
  position: relative;
  font-size: 15px;
  width: 1.5em;
  cursor: pointer;
}
.info-reviews .rating > span:hover:before,
.info-reviews .rating > span:hover ~ span:before,
.info-reviews .rating > span.selected:before {
   content: "\2605";
   position: absolute;
   color: #27a8df;
}

Third: The jQuery

$(document).ready(function()
{
	$('.rating span').click(function() {
		$('.rating span').removeClass('selected');
		found = false; obj = this; stars = 0;
		$('.rating span').each(function() {
			if (this == obj)
				found = true;
			if (found)
			{
				$(this).addClass('selected');
				stars++;
			}
		});
		$('#star-rating').val(stars);
	});
});

And there you have it effortless star ratings that can be popped right into your form without uploading any images and will reflect a number 1-5 when the form is submitted. An added bonus is if you just add more stars they’ll work. Want a rating 1-10? Just add 5 more stars.

The Taming of the 3D Product Viewer

We were stumped.

We had a client who needed a cheap, portable, multi-browser compliant, mobile ready 3D viewer for their products.

I had used 3D viewers in the past but things have changed. Apparently 3D Product Viewers have become either expensive or not very good! We had a medium sized budget but we didn’t want to stick the client with a monthly or yearly fee to use a 3D product viewer on their site.

So we bit the bullet and made our own.

Initially it seemed simple. Make a WordPress plugin that allows them to drag and view different angles of the product. It seemed simple. We realized that a lot of times the rendered files are very large resulting in long wait times for 15 degree image shots. We tried everything, the initial renders came to us in PNG format which was obviously too much so we decided to move to JPEG which sucked because we wanted the transparency of the PNG. This still sucked as a solution because even though the images loaded it was still ~10MB of downloads for 15 degree view.

Then it dawned on us. Video.

Sure we’ll still have the transparency issue. Sure we’ll still fall back onto JPEGs if their browser doesn’t support HTML5 video tag or flash but when the user does we were able to compress ~10MB of images into 1.8MB of video. When the user drags to a certain angle of the product we just flip to a certain frame in the video. Better yet we can even do a 1 degree video with little increase in size and the user can drag around the product almost seemlessly.

That still seemed like.. So what?

So we thought… what would be cool? We realized that in today’s world a lot of our users would be looking at the site on a mobile device. The video worked on Android, iPad but not iPhone (iPhone won’t allow you to remove that annoying little play button overlay from the video, feature request) but when you look at it on mobile devices panning your finger around on an image seems so cold and unfeeling. We started looking into what we could do, and we found it. Mobile devices with accelerometer devices in them report the current x, y, z to the browser via Javascript. We took that and ran with it.

Now when users land on our client’s website from their desktop they quickly load the product via video (a couple seconds on broadband) and can pan around the product without a problem, dragging or arrow keys, pick your poion.

Mobile users get an even cooler experience though. They visit the website and are looking at a couple products, check out the 3D view and they are panning around it using their finger and it asks them, “Do you want to enter ‘Augmented View’?” When they choose yes it is like looking into product window on your device, you rotate the device around and it rotates in the same fashion as if you were looking at the product.

We hope to productize this in the next 3-6 months and offer product image hosting (Amazon S3), image to video conversion, a WordPress plugin, a jQuery plugin, support on product usage and a bunch of cookies.

If you have an immediate need for an awesome and fast product viewer, contact us today and we can help you out with a beta version.

Next Up: Augmented Reality Jewelry.

WordPress Search Traffic Analysis Plugin Integrates With Neverblue

Ever want to know exactly which search hits are the most profitable on your site when it comes to clicking your sponsor ads?

The system seperates organic and sponsored traffic, then measures earnings per click by importing conversion data from affiliate networks. This allows you to measure your ROI on ad spend as well as track the earnings potential of free organic search hits that come in.

Earnings per Hit – All the hits that came to your site from search engines divided by revenue
Earnings per Click – a measure of the people who clicked on a banner of on your site to a sponsor divided by revenue

By generating this data you know precisely where you can bid and maintain profits.

Toplist WordPress Plugin

Toplist Directories have been a popular way to promote certain types of sites for many years. Our latest plugin allows you to list referring sites in your sidebar and/or dedicate a full page to the most recent referers.

Other site owners can register and view stats for how many hits they are sending and receiving from the site that has our plugin installed. This is a great way to encourage more people to link to your site.

Using Google Gears to Enhance Websites

Due to a recent project I’ve been working with Google Gears extensively. It’s an extremely exciting project. Using a very basic back end Google has created a way of completely offlining a web application allowing users to work on web applications offline or with spotty internet. Of course interfacing with the database instance, content store and the entire system is via javascript instead of a back end language like php or asp. It’s really great to be able to do this especially for companies like Avon where agents could have the application on their laptop, fill it out as though they were online and then when they go back online the application syncs the data up in the background using the worker processing (background) in Google Gears.

There are also some other quite interesting uses though. For example, what if you have a server with a bunch of long static pages and images? You can use Google Gears to store static content, images, etc as well as dynamic content. If you have a site that is receiving thousands of unique visitors and tens of thousands of page views if you were to sync your content up to even a third of your users that would create a significant dent in your bandwidth usage while also increasing access speed for those users as they would be accessing the content locally.

Also an exciting feature of Google Gears is that it can be used to create desktop icons. This can be used to facilitate return visits. If you have a utility that people may use regularly, a desktop icon can remind them to use it more often. Additionally with sites that may not be regularly used, you may even be able to use this icon as a “reminder” to users to return. Say a visitor is planning a trip via your site, you can link the user to the specific itinerary with this tool allowing a user to visit their itinerary even offline pre-conversion. This could promote users returning and even purchasing via your site if there is an icon on their desktop reminding them to do so (this would even be viable with sites with a shopping cart or even returning users after an order completion). The best part is that you can change the content the user sees on the return visit, meaning that you could change the ads, action items and links.

Finally users allowing you to interact with their client via Google Gears have given you a certain amount of trust. This allows you to build a very specific profile for them. Google Gears databases, stores, etc are not removed with browser cookie removal — the more users using Google Gears on your site the more personal your site can feel. Additionally due to the trust your site gains with the user authorization it opens all kinds of doors for personalization and “user features.”

As you can see, Google Gears is a huge step forward for usability, speed, content, personalization and bandwidth optimization.

Coding an Affiliate Network from the Ground Up

Unfortunately I can’t share much information about this project, but it is very exciting and has moved into full production with great success.

What I can say is this system allows the network owner to track affiliate conversions across many points of his site. They can accept publishers into his program that send traffic and are paid based on the actions performed by the surfers they provide via banner rotators on their own sites.

Please contact us if you would like to setup a pay per performance / pay per sale network of your own.