Tutorial: Add a vote button on your site using SteemConnect

Hi,

Today i want to show you how you can embed a vote button on any site in a 2 step simple tutorial using SteemConnect.

vote

1. Add the widget SDK

Copy & paste the following code between the tag <body> of your html page:

<script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//cdn.steemjs.com/lib/latest/steemconnect-widget.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'sc-sdk'));</script>

2. Add vote button code

Change data-author and data-permlink params of the following code to match the post you want to do a vote button. On this example we will use a post of @dantheman:

<span class="sc-vote" data-author="dantheman" data-permlink="who-really-controls-bitcoin"></span>

You can add multiple vote button code on your page, the code will change to a vote button.

Full Code Example

<html>
<head>
  <title>Your Website Title</title>
</head>
<body>

  <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//cdn.steemjs.com/lib/latest/steemconnect-widget.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'sc-sdk'));</script>
  
  <span class="sc-vote" data-author="dantheman" data-permlink="who-really-controls-bitcoin"></span>

</body>
</html>

Demo

You can try a demo here: https://bonustrack.github.io/plugins/vote-button.html

Or see the code on GitHub: https://github.com/bonustrack/bonustrack.github.io/blob/master/plugins/vote-button.html

The vote button use optimistic update, that mean it will show active instantly when you click on it while request is sent to the blockchain.

What's next?

Here is the embeds solutions we plan to do:

Follow button
Reblog button
Transfer button and link
Comment box

Something you would like to come first? Let us know in comment!

Want to support us?

Vote for @busy.witness

Fabien