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