Skip to content

NoviBuilder/novi-plugin-rd-twitterfeed

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 

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({});
    }
  }
});