> For the complete documentation index, see [llms.txt](https://hencework.gitbook.io/pangong/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://hencework.gitbook.io/pangong/social-feed/twitter-feed.md).

# Twitter Feed

## Introduction

We implemented live Twitter Feed on Pangong, for that we used [twitterFetcher](http://jasonmayes.com/projects/twitterApi/#sthash.4KiphcTH.dpbs) third party plugin.

## How to Setup <a href="#how-to-setup" id="how-to-setup"></a>

### **HTML Stucture** <a href="#html-stucture" id="html-stucture"></a>

```markup
<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

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

### JS

```markup
<!-- 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

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

```