Tutorial: Add a vote button on your site using SteemConnect
steemconnect·@busy.org·
0.000 HBDTutorial: 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👍 busy.org, kosmatimuc, teamsteem, lamech-m, fosho, wang, xer, jocelyn, joseph, idol, krnel, picokernel, adelja, ekitcho, steemaccess, demartini, lord666, ioc, dubi, awakeningartist, dongu, tanyabm, themartian, amarajacilido, babochilac, silentpsycho, alwayzgame, tejasbm, goldsteem, blackchen, makishart, leesunmoo, kingscrown, jsg, rusteemitblog, dicov, marinabogumil, raymondspeaks, smailer, dmilash, romancs, bigsambucca, kamil5, victoriart, steemplay, dhrms, lindo, lehard, on0tole, crypto.owl, always1success, marinaz, ballinconscious, zodiac, ekaterinka, gif-art, reisman, steemittalk, hypnosisawaken, ratel, adrehajiuh, vl248, achim86, dims, dark.sun, steemafon, berkah, demyan7, sveokla, konti, kibela, nekromarinist, xanoxt, justforfun, anton333, i-spec, steemlift, m3rcos1ty, ash, tyler-fletcher, rolik, uuuhha, numberone, nadin3, mapalatv, htyfn, max-max, pozitivityspace, acidsun, losos, anmuravjev, rishaaa, cryptojoy.com, zaebars, mama-steem, tatianka, maks, elena-singer, marialin, ianboil, anasya, sairji, hyiparena, krishtopa, sci, borishaifa, marel, icorating, voronenka, razvanelulmarin, clement, kovatelj, kell234, sharker, asdes, villainblack, pollina, zettar, kiks14, codydeeds, tarindel, fabien, phenom, ipumba, songkran, val-c, ct-gurus, franks, applecrisp, tee-em, razberrijam, excavator, steempredict, godzilla, pangur-ban, snowden, toddemaher1, proctologic, winstonwolfe, gamer00, jesus2, mental, deanliu, dgiors, penguinpablo, stiletto, borran, paco-steem, spaninv, cass, might, mark-waser, davidjkelley, digital-wisdom, ethical-ai, jwaser, bwaser, ellepdub, herpetologyguy, morgan.waser, strong-ai, technoprogressiv, blueorgy, serejandmyself, xeldal, enki, mineralwasser, sunscape, bingo-0, steem-meme, mrs.agsexplorer, hilarski, shadowspub, boombastic, sethlinson, good-karma, cryptos, robotev, robotev1, robotev2, comeup, alexma3x, craig-grant, kafkanarchy84, nil1511, r4fken, thecryptodrive, steemdrive, james212, steemsports, mokluc, garvofe, selwi, bryan-imhoff, kenistyles, spottyproduction, beervangeer, jaycobbell, bitcoiner, nano2nd, thebatchman1, gifts, cebymaster, virtualgrowth, debmund, remlaps1, cub1, dianargenti, thelindvall, sweetsssj, kooshikoo, donchate, saiku, siol, realmeandi, makis84, gregm, vegascomic, yefet, macksby, drkarl, vip, kevinwong, lichtblick, lukestokes, albertogm, pkattera, justinschwalm, pcste, baharoba, catto000, herverisson, joanaltres, twinner, michelle.gent, kenny-crane, july01, testz, sqube, liondani, stephen.king989, morning, senseiteekay, nippel66, cyan91, felixxx, userlogin, incomemonthly, aizensou, jamesc, compumatrix, maxse, cardboard, natord, steemit-life, prufarchy, yoonjang0707, z3r0d4yz, hanshotfirst, rishi556, arisbe, ubik, andrarchy, valtr, keepdoodling, siniceku, tosch, celsogoya, future24, pavelmenme, wagnertamanaha, freedomengineer, mranderson, opmac, pal, sulev, skapaneas, stephenkendal, sgnsteems, meysam, steemrollin, helikopterben, henriquez147, the-future, bones, luzcypher, tommycoin, steemseed, leongkhan, bitcoinparadise, timcliff, voteinterestpool, asmolokalo, clayop, jaewoocho, greatdabu, cnfund, pnc, jbrukh, karenmckersie, aaronsuncamacho, steemitfaucet, metaflute, funnyman, sauravrungta, chris4210, irawandedy, cryptokom, artem-sokoloff, glyuk, azmi, klye, zet, intelligentvan, mondeja, ausbitbank, steemleak, leprechaun, finleyexp, smooth, einsteinpotsdam, knozaki2015, coinbar, ozchartart, ozmaster, croatia, richman, stevescriber, b0y2k, poseidon, jejujinfarm, zahnspange, hagie, rizwanali101, supremo, tommyhansen, neroru, sethroot, shla-rafia, allasyummyfood, steemsquad, diananggraini, jlufer, mindfreak, ace108, roadscape, indika, the-alien, englishtchrivy, voronoi, cryptoctopus, singapasee, kushed, johnnyyash, dragosroua, raluca, astrologybits, kurtbeil, steemitawards, steemawards, thefinanceguy, dddcoinz, thecryptofiend, grildrig, yanik, technovedanta, juliosalas, doitvoluntarily, hitheryon, anca3drandom, steemitqa, sergeykitayev, gmno, demotruk, minitrio, jfesrom, igster, chitty, karamellka, tommycordero, walhallo777, raymonjohnstone, yasemin-gencer, chhaylin, fabio, sebastien, sirwinchester, jerryblanceton, terrycraft, steemychicken1, timbernana, taskmanager, sokoloffa, the-ego-is-you, allesgruen, brandon-rosano, framelalife, soundlegion, sigmajin, dresden, geronimo, theprophet0, simply1moore, gduran, metrox, marcosnaitzel, the-great-dane, roelandp, rocknrolldm, pocketnerd, makki420, sebastianjago, tony.jennings, guest123, jason-donovan, barvon, soonsilchicken, slobo, iloveupvotes, murh, vadbars, inna-yatsuk, teamsteemit, thegreatomski, atomica, drewmachakmusic, danlocks.com, remnant39, darmaputra, artwatch, todderic, punreal, redeauxtech, muhammadirfan17, dream.trip, codingnick, chanmaly, azmirdolar, akmaladila, steemboy7,