Tutorial: Add a vote button on your site using SteemConnect

in #steemconnect8 years ago (edited)

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

Sort:  

Hi @busy.org,

I have tried to open in browser the following:
https://steemconnect.com/embed/vote?author="neander-squirrel"&permlink="the-beauty-of-sunday"&weight="9900"

It is not working. It shows me a vote button with the number 0 next to it. When I click in the button it changes to 1 for a second than goes back to 0. Also there is no vote registered on the blockchain. I am logged in to SteemConnect on my browser.

I would like to be able to upvote posts and comments with reduced vote power. Without running a node as I am mostly using Steem from my phone.

Any advice to do that? What am I doing wrong?

I'm searching for information since HF19 but no success. Please help me if you can!

Thank you for your time!

Please try submit your issue here: https://github.com/busyorg/steemconnect/issues
probably @fabien will help you on that or @nil1511

Thanks My dear friends I am happy

I bet Wordpress plugin won't be necessary for this, so every blog out there can start using this... great work guys! 👍

Thank you for the support! Indeed it should be easy to integrate on WP without a plugin :)

Thank you. Very useful tutorial, please post more about this.

Dudes... you rock! Thank you for your work.

I @tsxbox search for this piece of html code. I upvoted @busy.org - cheers

This is awesome!

Thanks you so much for this & Keep up the great work!


source
Shared on twitter

Steem_Land Steem_Land tweeted @ 11 Dec 2016 - 13:21 UTC

Tutorial: Add a vote button on your site using SteemConnect

steemit.com/steemconnect/@… / https://t.co/7r09w5Lq2v

@SteemUps @SteemitPosts @steemit @Beyond_Bitcoin

Disclaimer: I am just a bot trying to be helpful.

is there a way to use steemconnect with just your posting key instead of the key for your whole account?

Amazing! Think about the potential for Steem if all Facebook like buttons on so many websites will be replaced by Steem upvote buttons in the future...

@risky2187 please give me your vote 100%