We have an open API that lets custom Steemit clients display badges by verified usernames.
It's very easy to implement too!
In this example we are using FontAwesome, so be sure to add this to the head section of your HTML document:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
We also use jQuery so be sure to add this right above your HTML document's closing body tag:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Now below that put this:
<script src="https://steemverify.com/js/1.0/badge.js"></script>
badge.js queries our API. Keep in mind that our database pushes any new data to the API every 30 minutes. Feel free to host this JavaScript file yourself if you want to. Also, feel free to download verified.json and host it yourself if you want, but remember to keep it updated.
Phew.. that's all over with!
Now in your custom Steemit client add the steem_verify class to all usernames like so:
<p class="steem_verify">dalt</p>
Our badge.js file will auto check all usernames on the page and add a badge by all verified people.
Example:
Here's all code from this tutorial:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<div class="steem_verify">steemverify</div>
<div class="steem_verify">test</div>
<div class="steem_verify">dalt</div>
<div class="steem_verify">dalt</div>
<div class="steem_verify">fakeperson</div>
<div class="steem_verify">steemitqa</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://steemverify.com/js/1.0/badge.js"></script>
</body>
</html>
If you need any help get in touch!
Yes! I need help, for me this is all abracadabra. What do I need to post in my posts? Can I just use your whole example and edit it?
This is a tutorial on how custom Steemit clients such as Busy.org or eSteem can utilize our API and display badges. Sadly badges won't display on Steemit.com unless they ever utilize our API.
Edit: I'm looking into having some browser extensions made so that we can show badges on Steemit sites that aren't using our API.
Thanks! I still don't get it really, but I'll ask a friend.