Simple jQuery Plugin for Displaying Twitter Feed – Tweetie

Welcome Folks I am back with another blog post. In this blog post we will be displaying the twitter feed using a very special library of jQuery called as Tweetie. Tweetie is a cute little library which you can use in your apps or websites to display your twitter account feed. So step by step process on how to use this library is given. Just follow the steps and write the code as shown below. You will be able to make the same application. So let’s get started with the tutorial

See also  How to Build HTML Live Editor like W3schools,VSCode,Codepen in Javascript Full Project

jQuery Tweetie – Simple Twitter Feed Plugin that works with new Twitter API.

 

Install

Download the lastest version of jQuery Tweetie.

In order to successfully use jQuery Tweetie, you have to have server-side/backend API. The plugin comes with very simple PHP backend that you can easily setup and get going.

 

See also  How to Use Day.js Date Time Validation & Manipulation Library in Browser Using HTML5 & Javascript Full Example For Beginners

 

Use

Initialize just like any other plugin.

$('.tweets').tweetie();

See also  JavaScript Program to Compare Two Strings Using localCompare() Method Full Project For Beginners

 

Settings

Property Type Description
url String Required. API URL.
type String Required. Fetch tweets via hashtags, search terms, username and lists. Available options timeline, list, search and hashtag.
template String Required. Template for each individual tweet. Learn more here.
params Object Required. Parameters required to fetch collection of relevant tweets matching a specified query. Only timeline, list and search/hashtag params are accepted.
dateFormat
.
See also  Build a Bootstrap CSS UI Unit Weight Converter Web App in Vanilla Javascript Full Project For Beginners

How to use it:

1. Get a consumer key and secret keys from Twitter developer center

2. Edit api/config.php file and replace variables with your Consumer and oAuth Keys.

 

// Consumer Key
define('CONSUMER_KEY', 'CONSUMER_KEY_HERE');
define('CONSUMER_SECRET', 'CONSUMER_SECRET_HERE');

// User Access Token
define('ACCESS_TOKEN', 'ACCESS_TOKEN_HERE');
define('ACCESS_SECRET', 'ACCESS_SECRET_HERE');

 

See also  jQuery Tutorial to Find the ID of Clicked Element in Browser Full Project For Beginners

 

3. Include jQuery library and jQuery Tweetie plugin on the web page

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="twittie.min.js"></script>

 

See also  Build a Text to Voice or Speech App Using Google Chrome Web Speech API in Javascript Full Project For Beginners

 

4. Create the html for the twitter feed widget

 

<div class="tweet"></div>
See also  Build a Bootstrap HTML Form Fields Template Generator or Editor From JSON Schema in Browser Using Lodash Library in Vanilla Javascript Full Project For Beginners

 

5. Call the plugin with options

 

<script class="source" type="text/javascript">
$('.tweet').twittie({
list: null,
hashtag: null,
<a href="https://www.jqueryscript.net/time-clock/">date</a>Format: '%b. %d, %Y', // date format
template: '{{tweet}} <div class="date">{{date}}</div>', // Format how you want to show your tweets. 
count: 1, // Number of tweets you want to display.
hideReplies: true, // Hide replies and only show your own tweets
username: null, // Option to load tweets from another account.
apiPath : 'api/tweet.php'
});
</script>

 

See also  Build a Youtube Video Thumbnail Generator in HTML5 CSS3 and Javascript Full Project For Beginners

 

Leave a Reply