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