Getting started

10 Dec 2020 by Vladimir Haltakov

Introduction

I Want To Read More is a service that allows you to integrate vote links in your blog. Your readers can click on these links if they are interested in a particular topic and you will see the aggregated statistics in your dashboard.

There are several different ways to integrate the vote links, depending on how much control you have on your blog (for example if you are able to run JavaScript) and how much customization you want to do:

  • Minimal setup - no JavaScript or CSS required. Easy integration into any blogging platform.
  • Advanced setup - you need to include our JavaScript and CSS, but you get a better user experience.
  • Custom setup - you can easily customize every part of the UI/UX if you want to.

Projects and Topics

Take a minute to uderstand the concept of projects and topics before you go on. Every vote link has the following 3 components which you will need to specify:

  • username - this is your user name for I Want To Read More
  • project - this is the name of your project
  • topic - this is the topic that you want to setup the voting for

The project is a collection of multiple topics so that you can organize them better. You can create one project for every article you write or you can use one for your entire blog. This is up to your preferences! The first time somebody clicks a vote link, it will automatically appear in your dashboard.

Minimal Setup

The minimal setup is just to include direct links to the vote API. When the user clicks on a link he will be taken to a page with a simple "Thank you for voting" message. The message itself or the page can be customized.

You can easily use way of integration on any blogging platform, like for example Hashnode (see example), Dev.to (see example) or Wordpress (see example), because it doesn't require you to include any JavaScript or CSS. However, in this way a new page will open up instead of showing a toast.

https://iwanttoreadmore.com/vote/<username>/<project>/<topic>/

Here is how it looks like if you are using Markdown:

[Vote](https://iwanttoreadmore.com/vote/<username>/<project>/<topic>/)

On many platforms, you can also use HTML directly:

<a href="https://iwanttoreadmore.com/vote/<username>/<project>/<topic>/" target="_blank" rel="noopener">Vote</a>

Customizing the message after voting

You can customize the message that the reader will see after voting from the Settings page. Alternatively, you can also specify a page on your onw website, where the user will be redirected after voting. We just ask you to include a small text that the voting is powered by iwanttoreadmore.com.

Advanced Setup

If you are able to include JavaScript and CSS files in your blog, you will be able to improve the user experience by showing a toast with information when a reader clicks on the vote link, instead of opening a new page. The vote links will also show as small icons like this in the text.

  1. Include the CSS in the <head> section:
<link rel="stylesheet" href="https://iwanttoreadmore.com/dist/iwanttoreadmore.min.css" />
  1. Include the JavaScript before the closing </body> tag. The script will initialize automatically with the default configuration. See below if you want the customize some of the parameters.
<script defer src="https://iwanttoreadmore.com/dist/iwanttoreadmore.min.js"></script>
  1. To add a vote link to your text add a regular <a> tag with a data-vote attribute:
<a href="#" data-vote="<username>/<project>/<topic>"></a>

Configuration options

By initializing the script manually, you can configure the messages and the icon of the vote links. Call the initliazing function when your page is loaded with the required configuration:

iwanttoreadmore.init({messageDuration: 5, messageTitle: "Thanks for voting!!!"});

You have the following options:

  • voteLink - content of the vote link (by default the I Want To Read More icon). HTML can be used. Set to empty to use the original content of the link.
  • tooltip - text to show in the tooltip. Set to empty to hide the tooltip.
  • messageTitle - title of the message shown after voting
  • messageText - text of the message shown after voting
  • messageDuration - duration that the message will be shown after voting in seconds. Set to 0 to disable.

Custom Setup

If you don't like the icon, the messages or the design of the toast, you can easily change them! Copy the iwanttoreadmore.js and iwanttoreadmore.css files to your server and adapt them as needed. Remember - everything is open-source! Some customization options in the initialization function of the script are planned for the near future.

Need more help?

If you need any further help, you can contact us directy at the e-mail you will find at the top of the Settings page.