As I shared in a [previous post](https://steemit.com/steemit/@mkt/steemit-posts-on-your-website-jquery-plugin-update) I am currently working on a jQuery plugin to embed content from steemit.com on your website.
I completely revised the code and it has now reached a fairly acceptable state, together with (hopefully) easy to understand instructions on how to use it.
<hr>
# <center><sub>Website:</sub><br>[jQuery Steemit Plugin](https://mktcode.github.io/steemit-widgets/)</center>
#
# <center><sub>And check out the new:</sub><br>[GitHub Repository](https://github.com/mktcode/steemit-widgets)</center>
#
<hr>
# <center>Features</center>
*The plugin is only meant to read and display content from steemit.com, not to interact with it. You can't vote or publish or send steem with this plugin (yet). Therefore no keys, passwords or any authorization is needed.*
### Profile
You can display the following profile information for any user:
- username
- display name
- profile image
- reputation
- voting power
- location
- website
- about text
- followers count
- following count
- post count
### Posts
You can display posts from these feeds:
- a user's blog
- a user's feed
- new, hot and trending
- new, hot and trending for a specific tag/category
### Templating
The looks of the output is completely customizable. You can provide your own html template and css styling and populate it with placeholders for the steemit content.
### Easy to use
I recommend to use the CDN versions of the required files ([jQuery](https://jquery.com), [SteemJS](https://github.com/steemit/steem-js)) and the plugin itself as it is better for performance and easier to implement.
Here is a complete (copy/paste-able) example of how to implement it, including some styling from the demo:
**UPDATE:** This code doesn't work anymore. Checkout the [current version](https://mktcode.github.io/steemit-widgets/).
```html
<!DOCTYPE HTML>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.4/css/uikit.almost-flat.min.css" />
<style>
#my-profile {
border-radius: 6px;
max-width: 360px;
margin: 0 auto;
padding: 4px;
background: #4696e5;
}
#my-profile .uk-comment-header {
margin-bottom: 5px;
}
#my-profile .uk-comment-avatar {
width: 50px;
height: 50px;
background-position: center center;
background-size: cover; width: 50px; height: 50px;
}
#my-profile .uk-comment-body {
color: #fff;
}
.steemit-post {
border-radius: 6px;
max-width: 360px;
margin: 0 auto;
padding: 4px;
background: #4696e5;
}
.steemit-post .steemit-post-image {
display: block;
height: 200px;
background-position: center center;
background-size: cover;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border: none;
}
.steemit-post .steemit-post-image:hover {
border: none;
}
.steemit-post .uk-comment-header {
margin-bottom: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.steemit-post .uk-comment-body {
margin-top: 5px;
color: #fff;
}
</style>
</head>
<body>
<h1>My Steemit Profile</h1>
<div id="my-profile"></div>
<h1>My Steemit Blog</h1>
<div id="my-blog"></div>
<template id="steemit-profile-template">
<article class="uk-comment">
<header class="uk-comment-header uk-text-left">
<div class="uk-comment-avatar" style="background: url(${IMAGE}) center center; background-size: cover; width: 50px; height: 50px;"></div>
<h4 class="uk-comment-title"><a href="https://steemit.com/@${USER}">@${USER}</a> <div class="uk-badge uk-badge-notification">${REPUTATION}</div></h4>
<div class="uk-comment-meta"><a href="${WEBSITE}">${WEBSITE}</a><br>${ABOUT}</div>
</header>
<div class="uk-comment-body">
<div class="uk-grid">
<div class="uk-width-1-3">${POSTCOUNT}<br><sup>Posts</sup></div>
<div class="uk-width-1-3">${FOLLOWERS}<br><sup>Followers</sup></div>
<div class="uk-width-1-3">${FOLLOWING}<br><sup>Following</sup></div>
<div class="uk-width-1-2 uk-text-small uk-text-left">Voting Power: ${VOTINGPOWER} %</div>
<div class="uk-width-1-2 uk-text-small uk-text-right"><i class="uk-icon-map-marker"></i> ${LOCATION}</div>
</div>
</div>
</article>
</template>
<template id="steemit-blog-template">
<div class="uk-width-medium-1-3">
<div class="steemit-post uk-margin-bottom">
<article class="uk-comment">
<header class="uk-comment-header uk-text-left">
<div class="uk-comment-avatar" style="background-image: url(${IMAGE});"></div>
<h4 class="uk-comment-title uk-text-truncate"><a href="${URL}">${RESTEEMED} ${TITLE}</a></h4>
<div class="uk-comment-meta">
${DATE} by <a href="https://steemit.com/@${AUTHOR}">${AUTHOR}</a> in <a href="https://steemit.com/trending/${CATEGORY}">${CATEGORY}</a>
</div>
</header>
<a href="${URL}" class="steemit-post-image" style="background-image: url(${IMAGE});"></a>
<div class="uk-comment-body">
<div class="uk-grid">
<div class="uk-width-1-3"><i class="uk-icon-thumbs-o-up"></i> ${UPVOTES}</div>
<div class="uk-width-1-3"><i class="uk-icon-comments"></i> ${COMMENTS}</div>
<div class="uk-width-1-3"><i class="uk-icon-dollar"></i> ${PAYOUT}</div>
</div>
</div>
</article>
</div>
</div>
</template>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdn.steemjs.com/lib/latest/steem.min.js"></script>
<script src="https://cdn.rawgit.com/mktcode/jquery-steemit/aa875039/jquery.steemit.min.js"></script>
<script>
$('#my-profile').steemit().profile({
template: 'steemit-profile-template',
reputationPrecision: 1
});
$('#my-blog').steemit().blog({
template: 'steemit-blog-template',
limit: 3,
resteemedIndicator: '<i class="uk-icon-refresh uk-text-success"></i> ',
dateCallback: function (date) {
return moment.utc(date).from(moment.utc().format('YYYY-MM-DD HH:mm:ss'));
}
});
</script>
</body>
</html>
```
# <center>Todo</center>
This is only very basic functionality and there's still a lot of potential. I have a list of planned improvements and some major ideas for the future.
- display whole posts, including comments
- snippet generator, for even easier implementation
- writing access to steemit.com
- ...
# <center>If you have any more ideas, wishes, criticism, whatever... please share in the comments! I'd really love to see some of you trying it out and giving me some feedback.</center>
<hr>
<center>[](https://steemit.com/@mkt)</center>
<center>Technology/Science/Future<br>Nature/Environment/Sustainability<br>Society/Ethics/Philosophy<br>Art/Music/Fun<br><br><sup>shared and original content</sup></center>
<center>Read [about me](https://steemit.com/introduceyourself/@mkt/i-m-just-a-dreamer) and [my content](https://steemit.com/introduceyourself/@mkt/why-you-should-follow-or-not).</center>