How To Display Twitter Feed on Website Using PHP?


This tutorial will teach you how to display Twitter feed on website using PHP.

Do you actively use Twitter for your brand or products? Does your client use it?

If you use it for your brands or products and you have your own website, it will be a great feature if you can display your Twitter feed or posts on your website.

I know you can embed your Twitter feed using the Twitter widget, but you cannot customize the look and feel.

It looks like the default Twitter interface.

Don’t get me wrong, it looks good! But sometimes, our design scheme or our clients have different requirements, they want the Twitter feed to look like it belongs to their brand.

The good news is that our code for today is a way to do it!

Don’t want to code?

Before we start coding, you might be someone not really interested in coding. Or, you just want a quick solution to adding a Twitter feed to your website.

If that’s the case, you need to use a “no code” approach. One way of doing it is to use a website plugin called SociableKIT. It is a free website plugin that allows you to embed your Twitter feed on your website. No coding is required.

Let’s go back to coding below.

Source Code Overview

Here’s an overview of what our code does:

  1. It gets a Twitter users’s profile information and posts from a specified twitter account. We’ll try Taylor Swift’s twitter account in the demo.
  2. Display these Twitter data to a webpage (assuming it is your WordPress or PHP website.)
  3. Show some awesome UI powered by Bootstrap. If you’re not yet familiar with this awesome front-end framework, see our step by step Bootstrap tutorial here.

Final Output Demo

LEVEL 1 Source Code Output

We have to know where we are going, if we’re done with the code tutorial in this post, we will achieve this output:


LEVEL 2 Source Code Output

More improvements were provided after the step by step tutorial. If you need more features, you might need the LEVEL 2 version. It has the following output:


See the full list of features in section 15.0 below. It has all the details of these features.

Obtain Access Tokens and Keys

Go to Twitter Apps page.

Click the ‘Create New App’ button on the upper right corner.

Fill out the form with your information

Go back to the twitter apps page, you should see your new app now

Click your app and go to the “Keys and Access Tokens” tab


There you will see the access tokens and keys you need:

  • Consumer Key (API Key)
  • Consumer Secret (API Secret)
  • Access Token
  • Access Token Secret

Create The index.php File

We will make index.php Bootstrap ready. For those not familiar with the CSS framework Bootstrap, please refer to our step by step tutorial here:

Step by Step Bootstrap Tutorial for Beginners

The index.php file will have the following code.

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Display Twitter Feed On Website - LEVEL 2 - Live Demo</title>
        <!-- Bootstrap CSS -->
    <link href="libs/js/bootstrap/dist/css/bootstrap.css" rel="stylesheet" media="screen">
<!-- jQuery library -->
<script src="libs/js/jquery.js"></script>
<!-- bootstrap JavaScript -->
<script src="libs/js/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="libs/js/bootstrap/docs-assets/js/holder.js"></script>
<!-- HTML5 Shiv and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src=""></script>
<script src=""></script>

Put Container Tags, Page Title and HTML

We will have the following code inside the “body” tag of our code in section 4.0

<div class="container">
    <div class="col-lg-12">
        <div class="page-header">
            <h1>Display Twitter Feed On Website - LEVEL 1 - Live Demo</h1>
    <div class="col-lg-4">
    </div> <!-- end <div class="col-lg-4"> -->
    <div class="col-lg-8">
    </div> <!-- end <div class="col-lg-8"> -->
</div> <!-- end <div class="container"> -->

Specify Keys And Variable Values

The following code will be inside the DIV tag with class=”col-lg-4″.

Access token and keys value were retrieved during our section 3.0 earlier.

// keys from your app
$oauth_access_token = "change_to_your_oauth_access_token ";
$oauth_access_token_secret = "change_to_your_oauth_access_token_secret ";
$consumer_key = "change_to_your_consumer_key ";
$consumer_secret = "change_to_your_consumer_secret ";
// we are going to use "user_timeline"
$twitter_timeline = "user_timeline";
// specify number of tweets to be shown and twitter username
// for example, we want to show 20 of Taylor Swift's twitter posts
$request = array(
    'count' => '10',
    'screen_name' => 'taylorswift13'

Get OAuth Signature

OAuth is an authentication protocol that allows users to approve application to act on their behalf without sharing their password. More about Twitter OAuth here.

Put the following code below our code on section 6.0

// put oauth values in one oauth array variable
$oauth = array(
    'oauth_consumer_key' => $consumer_key,
    'oauth_nonce' => time(),
    'oauth_signature_method' => 'HMAC-SHA1',
    'oauth_token' => $oauth_access_token,
    'oauth_timestamp' => time(),
    'oauth_version' => '1.0'
// combine request and oauth in one array
$oauth = array_merge($oauth, $request);
// make base string
$r = array();
foreach($params as $key=>$value){
    $r[] = "$key=" . rawurlencode($value);
$base_info = $method."&" . rawurlencode($baseURI) . '&' . rawurlencode(implode('&', $r));
$composite_key = rawurlencode($consumer_secret) . '&' . rawurlencode($oauth_access_token_secret);
// get oauth signature
$oauth_signature = base64_encode(hash_hmac('sha1', $base_info, $composite_key, true));
$oauth['oauth_signature'] = $oauth_signature;

Make The Authorization Request

We can now make request to the Twitter API with the help of $oauth variable and cURL.

Put the follwing code below our code on section 7.0

// make request
// make auth header
$r = 'Authorization: OAuth ';
$values = array();
foreach($oauth as $key=>$value){
    $values[] = "$key=\"" . rawurlencode($value) . "\"";
$r .= implode(', ', $values);
// get auth header
$header = array($r, 'Expect:');
// set cURL options
$options = array(
    CURLOPT_HTTPHEADER => $header,
    CURLOPT_HEADER => false,
    CURLOPT_URL => "$twitter_timeline.json?". http_build_query($request),

Retrieve Twitter Feeds With User Information

Using the the following code, we can get the data in JSON format. Put it below our code on section 8.0

// retrieve the twitter feed
$feed = curl_init();
curl_setopt_array($feed, $options);
$json = curl_exec($feed);
// decode json format tweets
$tweets=json_decode($json, true);

Display Twitter User Information

The following code shows how we can display the specified Twitter user’s information. Put it below our code on section 9.0

// show user information
echo "<div class='overflow-hidden'>";
    // user data
    $profile_photo=str_replace("normal", "400x400", $tweets[0]['user']['profile_image_url_https']);
    // show profile photo
    echo "<img src='{$profile_photo}' class='img-thumbnail' />";
    // show other information about the user
    echo "<div class='text-align-center'>";
        echo "<div><h2>{$name}</h2></div>";
        echo "<div><a href='{$screen_name}' target='_blank'>@{$screen_name}</a></div>";
    echo "</div>";
    echo "<hr />";
echo "</div>";

Display Twitter User Status Count And Follower Count

Now we will put the following code inside the DIV tag with class=”col-lg-8″.

// show numbers
echo "<div class='overflow-hidden'>";
    // show number of tweets
    echo "<div class='float-left margin-right-2em text-align-center'>";
        echo "<div class='color-gray'>Tweets</div>";
        echo "<div class='badge font-size-20px'>" . number_format($statuses_count, 0, '.', ',') . "</div>";
    echo "</div>";
    // show number of followers
    echo "<div class='float-left margin-right-2em text-align-center'>";
        echo "<div class='color-gray'>Followers</div>";
        echo "<div class='badge font-size-20px'>" . number_format($followers_count, 0, '.', ',') . "</div>";
    echo "</div>";
echo "</div>";
echo "<hr />";

Display Twitter Posts / Status Feed

Finally we can now display the user’s Twitter posts.

// show tweets
foreach($tweets as $tweet){
    // show a tweet
    echo "<div class='overflow-hidden'>";
        // show picture
        echo "<div class='tweet-image'>";
            echo "<img src='{$profile_photo}' class='img-thumbnail' />";
        echo "</div>";
        // show tweet content
        echo "<div class='tweet-text'>";
            // show name and screen name
            echo "<h4 class='margin-top-4px'>";
                echo "<a href='{$screen_name}'>{$name}</a> ";
                echo "<span class='color-gray'>@{$screen_name}</span>";
            echo "</h4>";
            // show tweet text
            echo "<div class='margin-zero'>";
                // get tweet text
                // make links clickable
                $tweet_text=preg_replace('@(https?://([-\w\.]+)+(/([\w/_\.]*(\?\S+)?(#\S+)?)?)?)@', '<a href="$1" target="_blank">$1</a>', $tweet_text);
                // output
                echo $tweet_text;
            echo "</div>";
        echo "</div>";
    echo "</div>";
    echo "<hr />";

Add Your Custom Styling

The following CSS code is what I used to add a some style on our page. I put it inside the “head” tag, just below the Bootstrap CSS.

<!-- custom CSS -->
    margin:0 1em 0 0;
    float:left; width:15%;
.tweet-image img{
    float:left; width:80%;

Control Background and Link Colors

You can control or change the background or link colors by going to the design settings section of your twitter account.

Here’s how you can go to that page:

  1. Go to
  2. On the upper right corner of the page, click your picture.
  3. Click “Settings” in the dropdown.
  4. On the left side bar, click “Design”.

You should see the following page.


“Theme Color” is the link color. Changes made here will reflect in your page using the LEVEL 2 source code.

Download The Source Code

Getting The Source Code

You can get the source code by following the whole, well detailed tutorial above. But isn’t it more convenient if you can just download the complete source code we used, and play around it?

There’s a small fee in getting the complete source code, it is small compared to the:

✔ Value or skill upgrade it can bring you, orYES
✔ Income you can get from your website project or business.YES
✔ Precious time you save.YES
✔ Expert advice you can get from me, just in case you have any questions with the code.YES

For a limited time, I will give you the source code for a low price. DOWNLOAD THE SOURCE CODE LEVEL you desire by clicking its the BUY button below.

Download the LEVEL 1 Source Code

Show Twitter users’ profile picture YES
Show Twitter users’ name YES
Show Twitter users’ username with link YES
Show number of tweets YES
Show exact number of followers YES
Specify number of tweets to display YES
Specify Twitter username where to get tweets YES
Show profile pic in tweets YES
Show profile name in tweets YES
Show profile username in tweets YES
Show original tweets YES
Show retweets YES
Links in tweets are clickable YES
Bootstrap enabled YES
Mobile friendly YES
Download Now

Download LEVEL 2 Source Code

All features of the LEVEL 1 version YES
Show twitter profile description YES
Show twitter user’s website with link YES
Show number of following YES
Show number of favorites YES
Twitter profile mentions in tweets are clickable YES
Show when a tweet was tweeted with “Time ago” format YES
Show profile banner image YES
Apply background color set in design settings YES
Apply link color set in design settings YES
Free email support for 6 months. Yes
Free source code updates. Yes
Download Now

Do you need more reasons to download it?

Buy only once, use on unlimited number of websites and Twitter accounts! YES
No different kind of licenses. YES
No many different pricing schemes. YES
No monthly or any recurring fees. YES
No need to rely on another website to render Twitter feed. YES
No need for codes from other websites. YES
You can learn more how to code, I love teaching and can give you free tips! YES
Familiarize yourself with the Twitter API. YES
Features are constantly improving, and you get it for free. YES
Completely customizable. YES

Thank you for supporting our projects here at!

Do You Want a Demo?

If you want a demo to see if this will work with your own Twitter account, please send me a message via email [email protected], or via our official Facebook page!

Please provide your Twitter username on the message, thanks!

Social Media Scripts – LEVEL 3 – PRO PACK

Social Media Scripts - LEVEL 3 - PRO PACK
Display Facebook EVENTS on Website $49.99 YES
Display Facebook PHOTOS on Website $49.99 YES
Display Facebook VIDEOS on Website $49.99 YES
Display Facebook FEED on Website $49.99 YES
Display Instagram FEED On Your Website $49.99 YES
BONUS! The following script does not have LEVEL 3, only LEVEL 2. We will give them to you as bonus.
Display Twitter FEED on Website $29.99 YES
Display Google+ FEED on Website $29.99 YES
Read more about this package.

What’s Next?

Today we have learned how to show a Twitter Feed on your website.

Did you know that you can display Google+ Feed on your website as well?

Let us go to the next tutorial: How To Display Google+ Feed on Website?

Related Source Codes

Did you know that you can also display other social media data on your website? I’ve created tutorials on them too, see the following:

Social Media Script Tutorials
Display Facebook Page EVENTS on Website
Display Facebook Page PHOTOS on Website
Display Facebook Page VIDEOS on Website
Display Facebook Page POSTS on Website
Display Instagram FEED On Your Website
Display Twitter FEED on Website
Display Google+ FEED on Website

Some Notes

#1 Found An Issue?

If you found a problem with this code, we can solve it faster via Email or FB message, please send me a message via email [email protected], or via our official Facebook page!

Please be more detailed about your issue. Best if you can provide an error message and your test or page URL. Thanks!

Please feel free to comment if you have any questions, suggestions, found something wrong or want to contribute to this code.

#2 Become a true Ninja!

  • 1. Subscribe to social media scripts tutorial news and updates.
  • 2. Be updated about what works and what does not work on social media APIs.
  • 3. Be notified for any related social media API updates.
100% Privacy. We will never spam you!

#3 Thank You!

Thanks for visiting our tutorial on how to display twitter feed on website using PHP!

By Mike Dalisay

I'm Mike Dalisay, a pro web developer since 2010. I love web development. Improving our tutorials and source codes makes me happy. Do you want to suggest an edit to our tutorial? Got something to ask about our source codes? You may use our comments section below or email our team at [email protected]


  1. Hello Mike,
    Your code is too good.. I want to buy this package.. and is it possible to display only live videos of twitter user???

  2. Nice script, I would like to buy the All-Pack, one question, talking about Facebook one, does it rely on php sdk? which version?

    1. Hello @ttwist, glad you found our code nice and thanks for your willingness to purchase and support our source code development!

      To answer your question, we did not use any PHP SDK, Facebook graph API is an HTTP based API so you can access data via URLs.

      1. Just another question, on both twitter and Facebook I just want to pull what I post, not all peoples posts on my wall, or comments, etc.

        Is this possible with Pro version?

      2. Hello @ttwist, on our Twitter source code, you can use it with any Twitter account with public posts. On your Facebook scripts, you can use it with any Facebook pages, not personal account.

Leave a comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to top