Steemit Blog On Your Website (jQuery Plugin)

in #steemit7 years ago (edited)

website-plugin.png

Go to new version!

I created this very simple plugin for anyone to easily display a Steemit blog on a website. On Wednesday I described how to do this manually but now I put it into a tiny jQuery plugin which is very easy to use but also can be further improved a lot... if there's demand.

Check out the
Demo

You can find the
Plugin on GitHub

And here is how to use it:

Include Files

Include jQuery, Steem.js and the plugin itself into your website.

<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/aad36fab/steemit-posts.js"></script>

You can also download those files and upload them to you webspace. However, using these CDN resources saves performance and space and is quicker.

Usage

<script>
    $('#blog').steemitBlog({
        user: 'mkt',
        limit: 10,
        // ...
    });
</script>

Options

  • user: string, the steemit.com username (default: 'mkt')
  • limit: integer, the maximum number of posts to show (default: 10)
  • dateCallback: callback, a callback function to manipulation the date output, (default: function (date) {return date;}
  • postTemplate: string, the html template for a post (default: '<a class="steemit-post" href="https://steemit.com${URL}"><h2>${TITLE}</h2><h5>${DATE}</h5><p>${PAYOUT}</p><p>${COMMENTS} comments</p><p>${UPVOTES} upvotes</p></a>'
  • resteemedHtml: string, html output if a post was resteemed,
  • defaultImage: string, default image source

Placeholders

In the html of thepostTemplate option you can use the following placeholders:

  • ${TITLE}: post title
  • ${RESTEEMED}: resteemed html
  • ${DATE}: date of post creation
  • ${IMAGE}: post image
  • ${PAYOUT}: total post payout in SBD
  • ${COMMENTS}: number of comments
  • ${UPVOTES}: number of upvotes

I hope you like it and maybe someone actually wants to use it. :)

Give me feedback in the comments. I'll try to improve it over time!


Thank you for your attention!

Follow for more on
Technology/Science/Future
Nature/Environment/Sustainability
Society/Ethics/Philosophy
Art/Music/Fun

Read about me and my content.

Sort:  

You should link to a demo ;)

Ok... I updated the post with a demo link. :P The problem was, I didn't actually use the plugin on my website. It was the very dirty "proof of concept" implementation working there. :D Now it's the plugin! ;)

I did in the other post. It's just my website: https://markus-kottlaender.de

cannot install in my joomla website error its says "cannot find xml file sir

This seems to have nothing to do with this plugin. (There is no xml involved.) Could you give me more details on the error? Maybe I can help anyway.

Also I did some updates... you should now use this link to include the plugin:
https://cdn.rawgit.com/mktcode/steemit-posts/dab46ba5/steemit-posts.js

Did you get it to work?

Congratulations @mkt! You have completed some achievement on Steemit and have been rewarded with new badge(s) :

Award for the number of posts published

Click on any badge to view your own Board of Honor on SteemitBoard.
For more information about SteemitBoard, click here

If you no longer want to receive notifications, reply to this comment with the word STOP

By upvoting this notification, you can help all Steemit users. Learn how here!

Coin Marketplace

STEEM 0.17
TRX 0.15
JST 0.028
BTC 62094.36
ETH 2436.39
USDT 1.00
SBD 2.50