I know there miiighty be... an issue currently. This solves the issue:
<script src="https://mktcode.github.io/blurt-widgets/assets/js/blurt-widgets.min.js"></script>
<script>
blurt.api.setOptions({ url: 'https://rpc.blurt.world', useAppbaseApi: true }); // <-- ADD THIS
blurtWidgets.profile....
....(
A simple way to display content from blurt.world on your website.
by mkt
The easiest way is to use the generator. You can adjust a lot there but if you need an even more individual solution keep reading.
First you need to decide where to put the content. You only need an empty element with an id somewhere on your website.
<h1>My Blurt Blog</h1>
<div id="my-blog"></div>Now add the necessary files to your website. You only need the javascript API for Blurt and the plugin itself. You don't have to download anything if you use the CDN links in the code below. Just copy these lines and paste them right before your closing </body> tag.
<script src="https://cdn.blurtjs.com/lib/latest/blurt.min.js"></script>
<script src="https://mktcode.github.io/blurt-widgets/assets/js/blurt-widgets.min.js"></script>Next you need to initialize the widget you want. All the widget functions are accessible through the blurtWidgets object. In this example we'll use the blog() function to display your blog posts.
<script>
blurtWidgets.blog({
element: 'my-blog',
user: 'your-username'
});
</script>Put together your html file might look like this:
<!DOCTYPE HTML>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>My Blurt Blog</h1>
<div id="my-blog"></div>
<script src="https://cdn.blurtjs.com/lib/latest/blurt.min.js"></script>
<script src="https://mktcode.github.io/blurt-widgets/assets/js/blurt-widgets.min.js"></script>
<script>
blurtWidgets.blog({
element: 'my-blog',
user: 'your-username'
});
</script>
</body>
</html>This will display a simple list of links to your blog posts along with the number of upvotes, comments and payout.
To adjust the display you can use a custom template with some placeholders for the content from blurt. There are two options to provide a template. You can pass the html directly to the template option like this:
<script>
blurtWidgets.blog({
element: 'my-blog',
user: 'your-username',
template: '<div class="post"><a href="${URL}">${TITLE}</a><br>${Payout}, ${UPVOTES} Upvotes, ${COMMENTS} Comments</div>'
});
</script>The second option is to use a <template> tag with an id which you pass to the template option.
<template id="my-blog-post-template">
<div class="post">
<a href="${URL}">${TITLE}</a><br>
${Payout}, ${UPVOTES} Upvotes, ${COMMENTS} Comments
</div>
</template>
<script>
blurtWidgets.blog({
element: 'my-blog',
user: 'your-username',
template: 'my-blog-post-template'
});
</script>Read the next section to learn how to display posts from other feeds, like trending posts or posts from a specific category, or your profile information and what placeholders you can use.
You can display user related content like blog, feed and profile information and you can display tag related or general posts from the new, hot and trending feeds. Each have slightly different options and placeholders.
blurtWidgets.profile(options);| Option | Description | Type | Default |
|---|---|---|---|
| element | Sets the html id of the element in which to show the content. | String | null |
| username | Sets the blurt.world username whose profile to show. | String | mkt |
| template | Provides the HTML to display the profile. Can be either an HTML string or the ID of a <template> tag. |
String | <img width="100" src="${IMAGE}" /><br><a href="https://blurt.world/@${USER}">@${USER}</a> |
| reputationPrecision | Sets the decimal precision for the reputation score. | Integer | 0 |
| votingPowerPrecision | Sets the decimal precision for the current voting power. | Integer | 2 |
| updateInterval | Sets the interval in seconds to update the output. Set to 0 to disable updates. | Integer | 60 |
| createdCallback | Sets a callback function to handle the created date display, for example with moment.js. | Function | function (created) { monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; created = new Date(created); return monthNames[created.getMonth()] + ' ' + created.getDate() + ', ' + created.getFullYear(); } |
| Placeholder | Description |
|---|---|
| ${USER} | Outputs the username (without the @). |
| ${NAME} | Outputs the alternative display name you can set in the blurt.world settings. |
| ${LOCATION} | Outputs the users location. |
| ${WEBSITE} | Outputs the users website url. |
| ${IMAGE} | Outputs the users profile image url. |
| ${COVERIMAGE} | Outputs the users cover image url. |
| ${REPUTATION} | Outputs the users reputation. |
| ${VOTINGPOWER} | Outputs the users actual current voting power. |
| ${FOLLOWERS} | Outputs the number of followers the user has. |
| ${FOLLOWING} | Outputs the number of users the user is following. |
| ${POSTCOUNT} | Outputs the users overall post count. |
| ${ABOUT} | Outputs the users about text. |
Source: coinmarketcap.com. (Updated every 5 minutes.)
blurtWidgets.ticker(options);| Option | Description | Type | Default |
|---|---|---|---|
| element | Sets the html id of the element in which to show the content. | String | null |
| currency | Sets the currency. | String | blurt |
| template | Provides the HTML to display the ticker. Can be either an HTML string or the ID of a <template> tag. |
String | <h3>${NAME} <small>(${SYMBOL})</small></h3><p>USD: ${PRICE_USD}<br>BTC: ${PRICE_BTC}</p> |
| priceBTCPrecision | Sets the decimal precision for the BTC price. | Integer | 8 |
| priceUSDPrecision | Sets the decimal precision for the USD price. | Integer | 2 |
| updateInterval | Sets the interval in seconds to update the output. Set to 0 to disable updates. | Integer | 300 |
| Placeholder | Description |
|---|---|
| ${ID} | Outputs the ID. |
| ${NAME} | Outputs the name. |
| ${RANK} | Outputs the current rank. |
| ${SYMBOL} | Outputs the currency symbol. |
| ${IMAGE} | Outputs the url to an logo image. |
| ${24H_VOLUME_USD} | Outputs trading volume for the last 24 hours. |
| ${AVAILABLE_SUPPLY} | Outputs the available token supply. |
| ${TOTAL_SUPPLY} | Outputs the total token supply. |
| ${MARKET_CAP_USD} | Outputs the market cap in USD. |
| ${PERCENT_CHANGE_1H} | Outputs the price change percentage for the last hour in. |
| ${PERCENT_CHANGE_24H} | Outputs the price change percentage for the last 24 hours in. |
| ${PERCENT_CHANGE_7D} | Outputs the price change percentage for the last seven days in. |
| ${PRICE_BTC} | Outputs the current BTC price. |
| ${PRICE_USD} | Outputs the current USD price. |
blurtWidgets.blog(options);
blurtWidgets.feed(options);| Option | Description | Type | Default |
|---|---|---|---|
| element | Sets the html id of the element in which to show the content. | String | null |
| user | Sets the blurt.world username whose blog/feed to show. | String | mkt |
| limit | Sets the number of posts to show. | Integer | 10 |
| template | Provides the HTML to display the posts. Can be either an HTML string or the ID of a <template> tag. |
String | <div><a href="${URL}">${TITLE}</a>${REBLURTED}<br>${Payout}, ${UPVOTES} Upvotes, ${COMMENTS} Comments</div> |
| defaultImage | Sets the URL for a default image if there is no post image. | String | show |
| reblurtedIndicator | Sets the HTML displayed by ${REBLURTED} placeholder if a post was reblurted. | String | (reblurted) |
| payoutPrecision | Sets the decimal precision for the payout amount. | Integer | 2 |
| reputationPrecision | Sets the decimal precision for the reputation scores. | Integer | 0 |
| dateCallback | Sets a callback function to handle the date display, for example with moment.js. | Function | function (date) {return date;} |
| updateInterval | Sets the interval in seconds to update the output. Set to 0 to disable updates. | Integer | 60 |
| Placeholder | Description |
|---|---|
| ${URL} | Outputs the post url. |
| ${TITLE} | Outputs the post's title. |
| ${AUTHOR} | Outputs the author's username. |
| ${REBLURTED} | Outputs the HTML provided in the reblurtedIndicator option when a post was reblurted. |
| ${REBLURTEDBY} | Outputs the username (prefixed with "reblurted by") of the user who reblurted this post. |
| ${DATE} | Outputs the post's creation date. Can be customized using the dateCallback option. |
| ${IMAGE} | Outputs the post's image url. |
| ${PAYOUT} | Outputs the full pending or past payout amount. |
| ${REPUTATION} | Outputs the users reputation. |
| ${COMMENTS} | Outputs the number of comments on the post. |
| ${UPVOTES} | Outputs the number of upvotes the post has received. |
| ${CATEGORY} | Outputs the post's category (first tag). |
blurtWidgets.new(options);
blurtWidgets.hot(options);
blurtWidgets.trending(options);| Option | Description | Type | Default |
|---|---|---|---|
| element | Sets the html id of the element in which to show the content. | String | null |
| tag | Sets the tag for which to show posts. By default no tag is set and all posts will be shown. | String | null |
| limit | Sets the number of posts to show. | Integer | 10 |
| template | Provides the HTML to display the posts. Can be either an HTML string or the ID of a <template> tag. |
String | <div><a href="${URL}">${TITLE}</a><br>${Payout}, ${UPVOTES} Upvotes, ${COMMENTS} Comments</div> |
| defaultImage | Sets the URL for a default image if there is no post image. | String | show |
| payoutPrecision | Sets the decimal precision for the payout amount. | Integer | 2 |
| reputationPrecision | Sets the decimal precision for the reputation score. | Integer | 0 |
| dateCallback | Sets a callback function to handle the date display, for example with moment.js. | Function | function (date) {return date;} |
| updateInterval | Sets the interval in seconds to update the output. Set to 0 to disable updates. | Integer | 60 |
| Placeholder | Description |
|---|---|
| ${URL} | Outputs the post url. |
| ${TITLE} | Outputs the post's title. |
| ${AUTHOR} | Outputs the author's username. |
| ${DATE} | Outputs the post's creation date. Can be customized using the dateCallback option. |
| ${IMAGE} | Outputs the post's image url. |
| ${PAYOUT} | Outputs the full pending or past payout amount. |
| ${REPUTATION} | Outputs the users reputation. |
| ${COMMENTS} | Outputs the number of comments on the post. |
| ${UPVOTES} | Outputs the number of upvotes the post has received. |
| ${CATEGORY} | Outputs the post's category (first tag). |
blurtWidgets.fullPost(options);| Option | Description | Type | Default |
|---|---|---|---|
| element | Sets the html id of the element in which to show the content. | String | null |
| author | Sets the tag for which to show posts. By default no tag is set and all posts will be shown. | String | null |
| permlink | Sets the number of posts to show. | Integer | 10 |
| template | Provides the HTML to display the posts. Can be either an HTML string or the ID of a <template> tag. |
String | <div><a href="${URL}">${TITLE}</a><br>${Payout}, ${UPVOTES} Upvotes, ${COMMENTS} Comments<p>${BODY}</p></div> |
| payoutPrecision | Sets the decimal precision for the payout amount. | Integer | 2 |
| reputationPrecision | Sets the decimal precision for the reputation score. | Integer | 0 |
| dateCallback | Sets a callback function to handle the date display, for example with moment.js. | Function | function (date) {return date;} |
| bodyCallback | Sets a callback function to handle the body display, for example with https://github.com/jonschlinkert/remarkable. | Integer | function (body) {return body;} |
| tagsCallback | Sets a callback function to handle the tags display. | Integer | function (tags) { let tagsHtml = '', i; for (i = 0; i < tags.length; i++) { tagsHtml += '<a href="https://blurt.world/trending/' + tags[i] + '">' + tags[i] + '</a>'; } return '<div class="blurt-full-post-tags">' + tagsHtml + '</div>'; } |
| Placeholder | Description |
|---|---|
| ${URL} | Outputs the post url. |
| ${TITLE} | Outputs the post's title. |
| ${AUTHOR} | Outputs the author's username. |
| ${DATE} | Outputs the post's creation date. Can be customized using the dateCallback option. |
| ${BODY} | Outputs the post's body. |
| ${PAYOUT} | Outputs the full pending or past payout amount. |
| ${REPUTATION} | Outputs the users reputation. |
| ${COMMENTS} | Outputs the number of comments on the post. |
| ${UPVOTES} | Outputs the number of upvotes the post has received. |
| ${CATEGORY} | Outputs the post's category (first tag). |
| ${TAGS} | Outputs the post's tags (link). Can be customized using the tagsCallback option. |
If you want to format the post dates you can use the dateCallback option. Here is an example of how to display realtive times like "1 hour ago" like on blurt.world with moment.js.
<script src="https://cdn.blurtjs.com/lib/latest/blurt.min.js"></script>
<script src="https://mktcode.github.io/blurt-widgets/assets/js/blurt-widgets.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script>
blurtWidgets.blog({
element: 'my-blog',
user: 'your-username',
dateCallback: function (date) {
return moment.utc(date).from(moment.utc().format('YYYY-MM-DD HH:mm:ss'));
}
});
</script>You have to be careful because javascript works with your local time which might be different from what blurt.world shows. The above example takes care of this by converting dates to UTC.
If your website uses jQuery you can use the built-in jQuery syntax.
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdn.blurtjs.com/lib/latest/blurt.min.js"></script>
<script src="https://mktcode.github.io/blurt-widgets/assets/js/blurt-widgets.min.js"></script>
<script>
$('#my-profile').blurtProfile({user: 'your-username'});
$('#my-ticker').blurtTicker();
$('#my-blog').blurtBlog({user: 'your-username'});
$('#my-feed').blurtFeed({user: 'your-username'});
$('#new-posts').blurtNew();
$('#hot-posts').blurtHot();
$('#trending-posts').blurtTrending();
</script>You can now omit the element option. Just make sure jQuery is included before the plugin.