Tutorial: Add a vote button on your site using SteemConnect

busy.org (67) in steemconnect • 8 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

steemconnect steem busy embed vote

8 years ago by busy.org (67)

$149.17

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!

Sort Order:

Trending

[-]

neander-squirrel (48) · 8 years ago

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!

$0.13

2 votes

[-]

busy.org (67) · 8 years ago

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

$0.00

14 votes

[-]

max1994 (1) · 7 years ago

$0.00

[-]

max1994 (1) · 7 years ago

$0.00

[-]

richardalom (49) · 7 years ago

Thanks My dear friends I am happy

$0.00

[-]

good-karma (76) · 8 years ago

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

$0.07

5 votes

[-]

fabien (62) · 8 years ago

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

$0.00

[-]

liondani (69) · 8 years ago

$0.02

3 votes

[-]

teamsteem (74) · 8 years ago

Haha!

$0.00

[-]

morning (70) · 8 years ago

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

$0.02

1 vote

[-]

krnel (78) · 8 years ago

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

$0.02

3 votes

[-]

tsxbox (57) · 8 years ago

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

$0.00

1 vote

[-]

virtualgrowth (72) · 8 years ago

This is awesome!

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

source
Shared on twitter

$0.00

5 votes

[-]

twitterbot (56) · 8 years ago

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.

$0.00

[-]

codydeeds (66) · 8 years ago

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

$0.00

2 votes

[-]

penguinpablo (75) · 8 years ago

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...

$0.00

2 votes

[-]

risky2187 (44) · 7 years ago

@risky2187 please give me your vote 100%

$0.00

1 vote

[-]

risky2187 (44) · 7 years ago

please give me your vote 100%

$0.00

1 vote

[-]

spottyproduction (60) · 8 years ago

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...

$0.00

[-]

artem-sokoloff (66) · 8 years ago

It is very helpful. I have re-steemed it )

$0.00

[-]

leprechaun (56) · 8 years ago

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.

$0.00

[-]

fabien (62) · 8 years ago

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.

$0.00

[-]

sneak (64) · 8 years ago

IMO it would make sense to have an official website for these services that involve WIF typing.

We agree. Stay tuned.

$0.00

1 vote

[-]

leprechaun (56) · 8 years ago

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.

$0.00

[-]

fabien (62) · 8 years ago

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.

That should be the case! Span tag is the anchor. The script is just adding an embed iframe inside every span tag.

$0.00

[-]

toxichan (62) · 8 years ago

The follow button please! Thanks for this.

$0.00

[-]

voronoi (70) · 8 years ago

This is super exciting. Great work busy people!

$0.00

[-]

steemitqa (64) · 8 years ago

This is just amazing thanks for making this! A wordpress plug in would be next yes.

$0.00

[-]

joanaltres (56) · 8 years ago

Awesome! :)

$0.00

[-]

raymonjohnstone (62) · 8 years ago

Very crazy cool man!

$0.00

[-]

dark.sun (42) · 8 years ago

So, actually this solution not sign transaction, just imitation voting action?

$0.00

[-]

brandon-rosano (57) · 8 years ago

Great Job!!! Has any one tried using this on their WordPress?

$0.00

[-]

bryan-imhoff (66) · 8 years ago

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/

$0.00

[-]

bryan-imhoff (66) · 8 years ago

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.

$0.00

[-]

teamsteem (74) · 8 years ago

Mind blown!

$0.00

[-]

kendewitt (56) · 8 years ago

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!

$0.00

[-]

makis84 (54) · 8 years ago

Awesome! Thank you :)

$0.00

[-]

redeauxtech (38) · 8 years ago

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.

$0.00

[-]

binkley (55) · 7 years ago

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?

$0.00

[-]

modella (33) · 7 years ago

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

$0.00

[-]

christianjombo (44) · 7 years ago

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?

$0.00

[-]

aaryaan (52) · 7 years ago (edited)

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.

$0.00

[-]

folken (59) · 7 years ago

Hey! Is there any uptadet version of this tutorial? I would really appreciate! :) Thanks

$0.00

[-]

kingsleyemeka (30) · 7 years ago

Wow, this is cool,although it needs practicality guide.

$0.00

[-]

chanmaly (57) · 7 years ago

Hi busy . i just used busy the first time , nice to known busy.

$0.00

[-]

ivan2018 (56) · 7 years ago

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)))

$0.00

[-]

future24 (75) · 8 years ago

Very great, thanks for the information!

$0.00

[-]

minitrio (45) · 8 years ago

Thanks a lot, good work :)

$0.00