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!