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%
please give me your vote 100%
Awesome! Thank you :)
Awesome! :)
The follow button please! Thanks for this.
Very great, thanks for the information!
Mind blown!
It is very helpful. I have re-steemed it )
I find it annoying to type in a password or WIF but I can see that it is necessary unless steemconnect gets some special arrangement with steemit.com..
Another thing the insertion code replaces the first script tag indiscriminately. Don't you want something like the following?
var js, fjs = d.getElementsByClassName('sc-vote')[0];Great job, I have been advocating this kind of thing and now it's here.
Thank you, i understand your concern, what i can tell you is that your posting WIF isn't stored by SteemConnect, we need you to type it if we want to create a signature for the vote. Steemit could create the same service without requesting your WIF again cuz you typed it already there. IMO it would make sense to have an official website for these services that involve WIF typing.
About the code, it actually dont replace any tag, it just adding the plugin SDK in the page before the first script tag.
We agree. Stay tuned.
Oh yes. That's true. I meant that people would expect the span tag to be the anchor for where the vote button is placed rather than the script itself.
I definitely agree that steemit Inc should buy steemconnect in order to avoid the friction. The user could make the browser or password manager remember the WIF.
That should be the case! Span tag is the anchor. The script is just adding an embed iframe inside every span tag.
This is super exciting. Great work busy people!
This is just amazing thanks for making this! A wordpress plug in would be next yes.
Thanks a lot, good work :)
Very crazy cool man!
So, actually this solution not sign transaction, just imitation voting action?
Great Job!!! Has any one tried using this on their WordPress?
I just dabbled with it here. My site ain't pretty... I only recently threw it together to start working on the integrations I foresee coming with Steem in the future! Should be an up vote button to the lower right of the most recent comic strip...
http://www.spottyproduction.com/appetitefordistraction/comic/6-past-trauma/
Let me add my voice to those hoping that once more embeds are created they might all be packaged together into an easy to use wordpress plugin.
I have a slight concern that with the embeds being individual components like this, an unscrupulous person could basically mislead users into upvoting content other than what is presented.
I noticed when testing out a button I placed, that it registered my vote under the name guest123. It did not ask for a login, I'm assuming since I was already logged into Steemit on another browser tab. Can you clarify or point to more documentation on how it works? I'm just wondering if this is normal behavior and if it properly registers Steem Power influence or is simply recording a vote count in some way...
Is this live and working now? I inserted the code on a couple of blog posts on my website, but it doesn't seem to work. It might be because I'm using Squarespace and it doesn't allow insertion of code into the body, so I tried inserting it in the header. The upvotes button shows up at the bottom of the post, but when I click on it, it turns blue for a moment, then back to white as if I hadn't clicked it. I hope you can help, I'd really like to get a Steem upvote button onto all of my external blog posts. Thank you!
Thanks for this, I have a little more to add to it. If you are using WordPress, you can create a child theme and place this code in the template file where you want it to appear, like single.php and place it next to the post title or under it and use this instead.
<span class="sc-vote" data-author="redeauxtech" data-permlink="<?php echo basename(get_permalink()); ?>"></span>This will dynamically create the permalink data, instead of changing this for every page or post.
This is very interesting...I'm going to try to put this into action. Would you be interested in giving me a hand with some finishing touches over at SteemThat.com?
hi nice post, i just stumbled on this post when i needed it most... I will love to know if there is a way a voter can adjust is voting weight.
Because i am working on a project and will love to add the option of them controling their voting weight when they want to vote..
when they tested it, it only allows 100% upvote
Hello @busy.org After logging in a User, what data do I receive? Again, can a user transfer Steem or SBD from my app using Steemconnect? If yes, any links to a tutorial or any suggestions on how to achieve this?
hi busy.org teams members happy new year to all.
i post by using, busy site but i not get any upvote yet,
i do not get a like from you?? https://steemit.com/busy/@aaryaan/us-government-to-sell-513-bitcoin-and-512-bitcoin-cash-seized-from-dark-web-dealer
as par this offer.
Hey! Is there any uptadet version of this tutorial? I would really appreciate! :) Thanks
Wow, this is cool,although it needs practicality guide.
Hi busy . i just used busy the first time , nice to known busy.
good day, pay attention to my account, I pay a fee for your votes from 50 to 70 % of the program sbdgiveaway, I will be glad to meet and communicate further)))