Twitter Widget

The Twitter widget renders recent tweets for a given account as an icon list or as a rotating slider. Because the Twitter API requires authenticated access, Canvas fetches through a small backend endpoint that returns tweet JSON, then formats each tweet with linkified URLs and mentions plus a relative timestamp.

Structure

The standard layout is an icon list. Add .twitter-feed to an empty ul, wrapped in the .widget-twitter-feed widget:

<div class="widget widget-twitter-feed">
	<h4>Twitter Feed</h4>
	<ul class="iconlist twitter-feed" data-username="envato" data-count="2"></ul>
	<div class="d-flex justify-content-end">
		<a href="#" class="btn btn-secondary btn-sm">Follow Us on Twitter</a>
	</div>
</div>

Each tweet is injected as a list item with an X icon, the linkified tweet text, and a timestamped permalink:

<li>
	<i class="fa-brands fa-x-twitter"></i>
	<div>
		<span>Tweet text with links and @mentions turned into anchors</span>
		<small><a href="https://twitter.com/USER/statuses/ID" target="_blank" rel="noopener">3 hours ago</a></small>
	</div>
</li>

Slider Variant

Add the .fslider class (Canvas FlexSlider) and Canvas renders each tweet as a rotating slide instead of a list. This is the "twitter scroll" style:

<div class="fslider customjs testimonial twitter-scroll twitter-feed"
	data-username="envato"
	data-count="3"
	data-animation="slide"
	data-arrows="false"></div>

In slider mode each tweet becomes:

<div class="slide">
	<p class="mb-3 font-body">Tweet text</p>
	<small class="d-block"><a href="https://twitter.com/USER/statuses/ID" target="_blank" rel="noopener">3 hours ago</a></small>
</div>

Options

Set these data-* attributes on the .twitter-feed element. These are the exact attributes the module reads:

Attribute	Purpose	Default
`data-username`	The account whose tweets are fetched.	`twitter`
`data-count`	Number of tweets to display.	`3`
`data-loader`	URL of the backend endpoint that returns tweet JSON.	`include/twitter/tweets.php`
`data-fetch-message`	Text shown in the loading alert while fetching.	`Fetching Tweets from Twitter...`
`data-font-class`	Font utility class applied to tweet text in the slider variant.	`font-body`

Setup

The widget fetches from data-loader with ?username= appended, expecting a JSON array of tweet objects (each with text, id_str, and created_at). While loading it shows a spinner alert, which it removes on success or turns red on error. URLs and @mentions in the tweet text are automatically converted to links, and the timestamp is rendered as relative time (for example about an hour ago).

Tips

Use .twitter-feed on a ul.iconlist for the compact sidebar list, or add .fslider for the rotating slider version.
The slider variant needs the customjs class so Canvas defers init and boots FlexSlider only after the tweets are injected.
If the backend returns a non JSON response (a PHP error page or missing credentials), the widget shows a clear error message rather than failing silently.
Point data-loader at your own endpoint if your credential handling differs from the bundled PHP script.

Usage

<ul class="iconlist twitter-feed" data-username="envato" data-count="2">
	<li></li>
</ul>

Settings

Setting	Description
`data-username`	The Username from which you want to retrieve tweets. Example: `__semicolon`
`data-count`	No. of Tweets you want to be retrieved. Example: `3`

Code Snippets

Code Sample for a Twitter Feeds Scroller

Render tweets as a rotating slider by combining the .twitter-feed widget with the .fslider (FlexSlider) class. Canvas fetches tweets, builds slides, then initialises the slider.

<div class="twitter-feed fslider"
     data-username="Envato"
     data-count="3"
     data-loader="include/twitter/tweets.php">
    <div class="flexslider">
        <div class="slider-wrap"></div>
    </div>
</div>

Attributes read by the Twitter module:

data-username: account handle (default twitter).
data-count: number of tweets to show (default 3).
data-loader: server endpoint returning the tweet JSON (default include/twitter/tweets.php).
data-font-class: text font class (default font-body).

Without .fslider the tweets render as a simple <ul> list instead of a scroller.

Twitter oAuth Authentication Setup

Twitter OAuth Authentication Setup

The Twitter widget fetches tweets from a small PHP loader (default include/twitter/tweets.php). That loader talks to the Twitter/X API and must return a JSON array of tweets. To make it work you supply your app credentials.

Steps:

Create a developer app in the Twitter/X developer portal and generate these four credentials:
- Consumer Key (API Key)
- Consumer Secret (API Secret)
- Access Token
- Access Token Secret
Open the Twitter loader inside include/twitter/ and set the four values in its config section:

$settings = array(
    'oauth_access_token'        => 'YOUR_ACCESS_TOKEN',
    'oauth_access_token_secret' => 'YOUR_ACCESS_TOKEN_SECRET',
    'consumer_key'              => 'YOUR_CONSUMER_KEY',
    'consumer_secret'          => 'YOUR_CONSUMER_SECRET'
);

Point the widget at the loader (or leave the default path):

<ul class="iconlist twitter-feed"
    data-username="envato"
    data-count="3"
    data-loader="include/twitter/tweets.php">
</ul>

Notes:

The page must be served through PHP so the loader can run.
The loader must respond with Content-Type: application/json and a JSON array; the widget shows an error alert if it receives an HTML error page instead (the usual sign of missing or wrong credentials).
Never commit real keys into public files; keep the credentials only in your server copy.
Each request passes ?username= to the loader, so the same endpoint can serve different accounts.

Was this page helpful?