Tweet Feed

‌

Configuration

Create a Twitter Widget and Obtain a Widget ID

In order to configure your tweet feed timeline, you will have to head over to twitter and configure your widget.

1. After logging in to twitter, go to the twitter widget creation page. (You can get here also by clicking the cog in the top right corner, and selecting settings in the dropdown. Then select widgets in the menu on the left.)
2. Click the create new button.
   
3. Select any of the options. The style options will not be applied because Tweet Feed applies its own styles, but everything else is fair game.
4. Click "Create Widget".
   
5. Select the Widget ID on the url by selecting the text between the widgets and edit portion of the url. (You can also get the widget id by copying the html that twitter provides and getting the data-widget-id attribute on the a element)
   
6. Copy the id and save it for the installation of your widget.

‌

Installation

Javascript

I have included 'tweetfeed.min.js'. Just include this on your html page after jQuery like this:

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/tweetfeed.min.js"></script>

CSS

I have included 'tweetfeed.css'. Just include this on your html page like this:

<link type="text/css" rel="stylesheet" href="css/tweetfeed.css"/>

</> HTML

Paste your widget ID in this input to get the correct code. Just copy and paste the code below to your site.

<div id="tweet-feed-widget"></div>
<script type="text/javascript">
  $('#tweet-feed-widget').tweetFeed({
    widgetId: 'PASTE YOUR WIDGET ID HERE'
  });
</script>

‌

Examples

Easy One-Liner

<div id="tweetfeed-container" data-widget-id="PASTE YOUR WIDGET ID HERE"><script>$('#tweetfeed-container').tweetFeed({widgetId:$('#tweetfeed-container').attr('data-widget-id')})</script></div>
Try It

Feed will appear Here

Custom Sizing

By default, the feed is responsive with its width, but you can also specify an explicity width.

$('#container5').tweetFeed({
  widgetId: 'PASTE YOUR WIDGET ID HERE',
  width: 800,
  height: 300
})
Try It

Feed will appear Here

‌

API

tweetFeed Function

$(selector).tweetFeed(options);

• selector:string - A jquery selector to select the element to fill with the feed. If multiple items are selected, only the first will be filled with a tweet feed.
• options:object - A configuration object containing each of the options for the tweetfeed.

Options Configuration Object

$(selector).tweetFeed({
  widgetId: undefined
  pollInterval: 10,
  maxTweets: 10
  height: undefined
  width: 400
  stopPollOnHover: true
});

• widgetId:string - default:undefined - The twitter widget id that you can obtain from twitter when you create a widget on the twitter website.
• pollInterval:number - default:10 - The interval (in seconds) in which tweetFeed will poll twitter for new tweets. It's recommended for performance to keep this number equal to or above 3. Note: Polling is only enabled when resultType is 'recent' and feedType is 'search'.
• maxTweets:number - default:3 - The maximum number of tweets to show at any one time. It's recommended for performance to keep this number equal to or below 10.
• height:number - default:undefined - Set the height of the feed in number of pixels. Set to undefined or false to automatically set the height.
• width:number - default:400 - Set the width of the feed in number of pixels. Set to undefined or false for the feed to fill the width of the container.
• stopPollOnHover:boolean - default:true - If true, when the user hovers over the feed, it will stop polling for new tweets. When their mouse leaves, it will continue polling for new tweets.

‌

Sources and Credits

I've used the following images, icons or other files as listed.

• Thanks to Font Awesome for the great icon library
• Thanks to Twitter Bootstrap for the layout of this quick start guide.
• Shout out to Twitter for the great api and messaging system.

- justspamjustin