Category: Beginner
Those of you who have followed the life of Facebook founder Mark Zuckerberg must know about how he started the social network from a very basic ‘hot or not’ rating system after scraping all the images off student pages of popular colleges. This was popularized by the movie ‘The Social Network’ and the rest, as they say, is history. In this tutorial, we would be focussing on how to create such a rating system for images in your website without any particular knowledge in web designing technologies.
Such contests like Hot or Not can be very addictive to your readers, increasing the time a user spends on your site and decreasing the bounce rate by a big amount!
The Plugin:
The plugin that we would use is also termed ‘Hot or Not’ and you can install it using the instructions available in the plugin page. Alternately, you can go to Plugins > Add New in your wp-admin directory and search for ‘Hot or Not’. Activate the plugin after installation.
It enables you to host hot or not contest on your site. Not only does it allow you to add images, you can add embedded videos or textual content too!
To check a demo of how it works, you can check their demo site where they have implemented the plugin to show you the final product.
There are two new menu items that you would notice on activation of the plugin. One of them is the Competitors and the other one is Hot or Not.
Organising a new competition:
Competitors are custom page types. They are just like WordPress pages, just a bit different in implementation in the back end, which would not affect you. To add a competitor, go to Competitors > Add New.
Note that the new page that opens is just like that of a WordPress page. To post an image for a competitor, click on Add Media.
After you have successfully added the image, on the right end of the screen, you would notice that there is an option of groups. Create a new group or add it to an existing group.
Groups are like a collection of the members. You can run a hot or not competition between the members of a group. Note that a member (image, video, text) can be a part of multiple groups at the same time.
You can add images as competitors, you can embed videos or text as competitors too! Once you have a few competitors in a group, we can create a competition by adding a new WordPress post or page.
When you create a new post or a page, you would notice a new icon in your editor which looks like a lightning bolt. That is the icon for inserting short codes for the Hot or Not plugin.
On clicking on the new icon, you would see that a new dialog box pops up asking for information about the shortcode. In case you want to host a competition, you should select Hot or Not as the short code type. If you want to show the stats, you need to select Hot or Not stats and the short code type.
Note that you can view live stats for your competitors by visiting the dedicated page that is created for your competitor too.
Publish the post or the page to see the competition go live!
Customizing Hot or Not options:
As mentioned in the plugin description, the plugin comes with a very easy customizable set of options. Go to Hot Or Not > Settings to view and edit the settings.
You can set the dimensions of images and set whether you require a transition message that is shown to users, blocking any interaction while the page reloads. Click save to save settings.
At the end of the settings file, you can find some FAQs which describe how to organize a competition and explain the features of this plugin.
What’s even better is that you can change the text that is shown to the users. For this purpose, you need to visit Hot Or Not > Customize. You can change the caption to show once the user has voted, the skip image text and the text that you want to appear instead of the words ‘Hot’ and ‘Not’. For instance, if you choose Tom and Jerry in place of the two respectively, your competition would show ‘Tom or Jerry’ instead of ‘Hot or Not’.
Lastly, you can style the plugin to show colors that you want too. In fact, the options are so varied that you can set the color for every single element in this plugin, including gradients and background colors.
We hope that this post helped you in setting up such contests on your site, increasing the average time a reader would spend on your site and decreasing the bounce rate in the process!
Hot or not is the Trademark of Or Not Corporation
