novi-plugin-rd-twitterfeed

Novi Builder Plugin for visual RD Twitterfeed customization

How to Install

You should follow several simple steps to install this plugin:

• Copy the novi-plugin-rd-twitterfeed.js file to your path/to/novibuilder/plugins folder.
• Launch NoviBuilder

What you are able to do

• Change user name which posts are shown

Developer Settings

• querySelector — contains a css selector which defines the Plugin container.

How to add RD Twitterfeed on your page

If your website doesn't contain RD Twitterfeed follow the instructions below to install it.

Include RD Twitterfeed files to Website

Copy the "assets/rd-twitterfeed.js", "assets/rd-twitterfeed.css", assets/bat to website's JS, CSS and PHP folders respectively and include this files to your website.

Add RD Twitterfeed HTML Layout

Add basic RD Twitterfeed HTML Layout:

<div class="twitter" data-twitter-username="novibuilder" data-twitter-date-hours=" hours ago" data-twitter-date-minutes=" minutes ago">
  <div class="twitter-feed" data-twitter-type="tweet">
    ...
  </div>
  <div class="twitter-feed" data-twitter-type="tweet">
    ...
  </div>
</div>

Markup in given block may be any, including elements of the grid, etc. It is only necessary presence element with the attribute data-twitter-type = "tweet". You can find more detailed information about tweet html markup in the official documentation

Example of RD Twitterfeed markup using Bootstrap and Font Awesome:

<div class="twitter" data-twitter-username="templatemonster" data-twitter-date-hours=" hours ago" data-twitter-date-minutes=" minutes ago">
    <div class="twitter-feed" data-twitter-type="tweet">
        <div class="media">
            <div class="media-left">
                <span class="fa fa-twitter twitter-icon"></span>
            </div>
            <div class="media-body">
                <div class="twitter-feed-content" data-tweet="text"></div>
                <div class="twitter-feed-name text-bold big" data-screen_name="text"></div>
                <div class="twitter-date">
                    <div class="time" data-date="text"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="twitter-feed" data-twitter-type="tweet">
        <div class="media">
            <div class="media-left">
                <span class="fa fa-twitter twitter-icon"></span>
            </div>
            <div class="media-body">
                <div class="twitter-feed-content" data-tweet="text"></div>
                <div class="twitter-feed-name text-bold big" data-screen_name="text"></div>
                <div class="twitter-date">
                    <div class="time" data-date="text"></div>
                </div>
            </div>
        </div>
    </div>
</div>

Initialize RD Twitterfeed

$document.ready(function () {
    var twitterfeed = $(".twitter");
  /**
   * RD Twitter Feed
   * @description Enables RD Twitter Feed plugin
   */
  if (twitterfeed.length > 0) {
    var i;
    for (i = 0; i < twitterfeed.length; i++) {
      var twitterfeedItem = twitterfeed[i];
      $(twitterfeedItem).RDTwitter({});
    }
  }
});