Novi Builder Plugin for visual RD Twitterfeed customization
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
- Change user name which posts are shown
- querySelector — contains a css selector which defines the Plugin container.
If your website doesn't contain RD Twitterfeed follow the instructions below to install it.
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 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>
$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({});
}
}
});