Simple jQuery Plugin for Displaying Twitter Feed – Tweetie

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  Auto Resize Textarea When Typing - Auto-Resize.js

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  Generate Custom Social Share Buttons With jQuery C Share Plugin

 

Use

Initialize just like any other plugin.

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

READ  Google Books API Pagination Example in Javascript - Coding Shiksha

 

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  Generating PDF with jsPDF & Autotable

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  How to add Custom Fonts in JSPDF | JSPDF Tutorial | Html to Pdf Tutorial

 

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

 

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

 

READ  Make a Fully Responsive Website in Materialize CSS with Source Code in 2019

 

4. Create the html for the twitter feed widget

 

<div class="tweet"></div>
READ  Image Processing in Node.js Using Jimp Library - Coding Shiksha

 

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  How to get Full Path of Uploaded Image in Electron Application

 

Leave a Reply

Close Menu