Twitter Feed

Introduction

We implemented live Twitter Feed on Pangong, for that we used twitterFetcher third party plugin.

How to Setup

HTML Stucture

<div class="card bg-primary text-center">
<div class="twitter-slider-wrap card-body">
<div class="twitter-icon text-center mb-15">
<i class="fa fa-twitter"></i>
</div>
<div id="tweets_fetch" class="owl-carousel owl-theme"></div>
</div>
</div>

Dependency

CSS

<!-- Lightgallery CSS -->
<link href="vendors/lightgallery/dist/css/lightgallery.min.css" rel="stylesheet" type="text/css">

JS

<!-- twitter JavaScript -->
<script src="dist/js/twitterFetcher.js"></script>
<script src="dist/js/widgets-data.js"></script>
<!-- Owl JavaScript -->
<script src="vendors/owl.carousel/dist/owl.carousel.min.js"></script>
<!-- Owl Init JavaScript -->
<script src="dist/js/owl-data.js"></script>

Initialize Twitter Feed

if( $('#tweets_fetch').length > 0 ){
var configList = {
"profile": {"screenName": 'envato'},
"domId": 'tweets_fetch',
"maxTweets": 2,
"enableLinks": true,
"showUser": false,
"showTime": true,
"showImages": false,
"showInteraction":false,
"lang": 'en'
};
twitterFetcher.fetch(configList);
}
});
$(window).on('load', function () {
setTimeout(function(){
$('#tweets_fetch').owlCarousel({
loop:true,
margin:0,
autoplay:true,
responsiveClass:true,
autoHeight:true,
autoplayTimeout:4000,
responsive:{
0:{
items:1
}
}
});
},2000);
});