On Friday I shared my jQuery plugin to display your steemit blog on your website. Feedback was not much... but positive. In terms of post payout... VERY positive, by my standards! Thanks @roadscape! :D

So I decided to further improve the plugin and now, no 48 h later, I want to share the result with you again.

The first version really could only display a users posts. Now there are a few more options:

user feed
trending posts (all or by tag)
hot posts (all or by tag)
show author/resteemer and main tag of a post

_{Check out the new}
GItHub Page

_{And the new demos}
simple - advanced

_{Devs check out the}
GItHub Repository

And for the sake of completeness:

The Readme

For the impatient, here's a quick minimum implementation to display your own posts:

<body>
  <h1>My Steemit Blog</h1>
  <div id="blog"></div>

  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://cdn.steemjs.com/lib/latest/steem.min.js"></script>
  <script src="https://cdn.rawgit.com/mktcode/steemit-posts/9dd3edfa/steemit-posts.js"></script>
  <script>
    $('#blog').steemitBlog({user: 'your-username'});
  </script>
</body>

You can adjust it to your needs, by looking at the options.

There are also two example html files in the docs/examples directory.

Step 1: Installation

The fastest and easiest way to include all necessary files is to use CDN resources like in the example above. This way you don't have to download and host the files yourself.

However, you can also download the archive and copy the files to your website directory.

Given the following directory structure:

website/
|-- index.html
|-- js/
    |-- steemit-posts/
        |-- steemit-posts.js
        |-- lib/
            |-- jquery-3.2.1.min.js
            |-- steem.min.js

The includes look like this:

<script src="/js/steemit-posts/lib/jquery-3.2.1.min.js"></script>
<script src="/js/steemit-posts/lib/steem.min.js"></script>
<script src="/js/steemit-posts/steemit-posts.js"></script>

Step 2: Initiate

First of all you'll need a place on your website where the posts should be displayed. Just put and empty div element somehwere in your html and give it an id.

<h2>My Steemit Blog</h2>

<div id="blog"></div>

Next you have to initiate the plugin. This must be after the includes from the first step.

<script src="/js/steemit-posts/lib/jquery-3.2.1.min.js"></script>
<script src="/js/steemit-posts/lib/steem.min.js"></script>
<script src="/js/steemit-posts/steemit-posts.js"></script>
<script>
  $('#blog').steemitBlog({user: 'your-username'});
</script>

You can not only display a users blog but also a users feed and trending or hot posts from a specific tag or all of them.

Feed

<script>
  $('#blog').steemitFeed({user: 'your-username'});
</script>

Hot

<script>
  // display hot posts from all tags
  $('#blog').steemitHot();

  // display hot posts from the life tag
  $('#blog').steemitHot({tag: 'life'});
</script>

Step 3: Configure

To adjust the output to your needs you can use the following options. (They are slightly different for blog/feed and trending/hot.)

Options for Blog and Feed

user: (string) the steemit.com username (default: 'mkt')
resteemedIndicator: (string) html output if a post was resteemed (default: ' (resteemed) ')

Options for Trending and Hot

tag: (string) a tag from steemit.com (default: null)

Options for All

limit: (integer) the maximum number of posts to show (default: 10)
dateCallback: (callback) a callback function to manipulate the date output, (default: function (date) {return date;}
defaultImage: (string) default image source
postTemplate: (string) the html template for a post (default: '<div><a href="${URL}">${TITLE}</a>${RESTEEMED}<br>${Payout}, ${UPVOTES} Upvotes, ${COMMENTS} Comments</div>'

Step 4: Styling and Placeholders

The html output for each post can be completely customized by using the postTemplate option. In this html template you can use the following placeholders:

${TITLE}: post title
${AUTHOR}: post author
${DATE}: date of post creation
${IMAGE}: post image
${RESTEEMED}: html from resteemedIndicator option
${RESTEEMEDBY}: user who resteemed the post
${PAYOUT}: total post payout in SBD
${COMMENTS}: number of comments
${UPVOTES}: number of upvotes
${MAINTAG}: the first tag of the post (category)

Date Format

To format the post dates you can use moment.js which is included in the lib directory.

<script src="/js/steemit-posts/lib/jquery-3.2.1.min.js"></script>
<script src="/js/steemit-posts/lib/moment.min.js"></script>
<script src="/js/steemit-posts/lib/steem.min.js"></script>
<script src="/js/steemit-posts/steemit-posts.js"></script>
<script>
  $('#blog').steemitBlog({
    user: 'mkt',
    dateCallback: function (date) {
      return moment(date).format('MMMM Do YYYY, h:mm a');
    }
  });
</script>

More Feedback Please!

Please try the plugin and share your thoughts or requests in the comments! If there is demand I will try my best to further improve and extend the plugin!

Technology/Science/Future
Nature/Environment/Sustainability
Society/Ethics/Philosophy
Art/Music/Fun

^{shared and original content}
Read about me and my content.

Steemit Posts On Your Website (jQuery Plugin) - UPDATE

Check out the newGItHub Page

And the new demossimple - advanced

Devs check out theGItHub Repository