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.
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
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"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
ok
ok
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 :)
Haha!
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
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%