jQuery Steemit Plugin

mkt (66)in #steemdev • 7 years ago (edited)

As I shared in a previous post 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.

_Website:
jQuery Steemit Plugin

_{And check out the new:}
GitHub Repository

Features

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, SteemJS) 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.

<!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>

Todo

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
...

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.

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

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

#steemjs #programming #website #blog