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

READ  SweetAlert2 - Awesome Library Solution for Old Javascript Alert Popups

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.

 

READ  Build a PDF to Audio Mp3 Converter Web App in Node.js and Express Using GTTS Library Full Tutorial For Beginners

 

Use

Initialize just like any other plugin.

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

READ  jQuery HTML5 File Upload with Progressbar Animation in Browser Using Javascript 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
.
READ  Node.js Project to Check HTTP Status Code (Active or Dead),Header of Website Link or URL Using link-check Library in 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');

 

READ  Node.js Convert SVG to PNG,JPEG,TIFF and HEIF Format Using Sharp Library in Javascript Full Tutorial 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>

 

READ  How do I Check if an element is hidden in jQuery Using :hidden & :visible Selector in Browser Full Tutorial For Beginners

 

4. Create the html for the twitter feed widget

 

<div class="tweet"></div>
READ  Build Flappy Bird Clone Game in 25 Lines of Javascript Code and Deploy it on Vercel 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>

 

READ  Node.js Tutorial to Access User Webcam Using Navigator API Wrapper getusermedia Library Full Tutorial

 

Leave a Reply