ifeeds v1.1.2
ifeeds
One of the most useful features of Blogger is its ability to generate feeds, and based on this, I developed a plugin that creates widgets, allowing visitors with their own blogs and who enjoy your content to display your latest posts as a sign of appreciation.
Install
npm
npm i ifeeds
cdn
<script href="https://cdn.jsdelivr.net/npm/ifeeds@1/dist/js/feeds.min.js"></script>
Basic Usage
Builder Mode
It provides controls for users to configure the plugin, this would be the minimum structure:
<!-- Customizer -->
<div id="dev-customizer">
<label>
<input type="radio" name="direction" value="column" checked=""/> Column
</label>
<label>
<input type="radio" name="direction" value="row"/> Row
</label>
<input class="dev-input" type="number" value="4" min="3" max="9" name="max"/>
<input class="dev-input" type="text" value="#ffffff" name="background"/>
<input class="dev-input" type="text" value="#212121" name="title"/>
<input class="dev-input" type="text" value="#212121" name="category"/>
<input class="dev-input" type="text" value="#f1f1f1" name="categorybg"/>
<input class="dev-input" type="text" value="#e6e6e6" name="border"/>
<input class="dev-input" type="text" value="" name="label"/>
</div>
<!-- Preview -->
<div class="widget-feeds"></div>
<!-- Result -->
<div id="dev-results">
<textarea spellcheck="false"></textarea>
<button>Copy code</button>
</div>
Finally (after including feeds.js), use the initCustomizer
method to use the script in "Creator" mode:
Feeds.initCustomizer()
Example: codepen.io/zkreations/pen/poOvXVY Custom example: codepen.io/zkreations/pen/zYJxZyR
Plugin Mode
In this mode, only the container is required:
<div class="widget-feeds"></div>
Now you need to initialize it using the initPlugin
method to display the feed:
Feeds.initPlugin()
Options
Both previously mentioned methods share the same options, here is a table with more information:
Option | Type | Default |
---|---|---|
url | string | origin |
max | number | 5 |
direction | string | column |
image | string | https://i.imgur.com/snnjdGS.png |
imageSize | string | w300-h240-c |
title | string | #212121 |
category | string | #212121 |
categorybg | string | #f1f1f1 |
border | string | #e6e6e6 |
background | string | #ffffff |
label | string | #ffffff |
styles | boolean | true |
License
feeds.js is licensed under the MIT License
Inspiration: somoskudasai