CommunitiesEcosystem
Search
Login
Signup
Write a post
Switch dark

jQuery Steemit Plugin

66
7 years ago
in#steemdev

jquery-steemit-plugin.png

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.

jquery-steemit-demo.png

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> 
${REPUTATION}div></h4>
          <div class="uk-comment-meta"><a href="${WEBSITE}">${WEBSITE}</a>
${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 ${CATEGORY}
              
            
            
            

              

                
 ${UPVOTES}

                
 ${COMMENTS}

                
 ${PAYOUT}

              

            

          
        
      
    

    
    <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: ' ',
        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.




mkt



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

shared and original content



Read about me and my content.
steemdevsteemjsprogrammingwebsiteblog
7 years ago
mkt66
via steemit
$ 64.48
14
H2
H3
H4
3 columns
2 columns
1 column
7 Comments