Custom jQuery and PHP Twitter Widget

If you just want to use the standard Twitter widget that Twitter provide then that’s easy enough but what if you want a custom style that fits in with the style of your own website? This quick tutorial will show you how.

There used to be a ton of plugins available that were quick and easy to install but as of June 2013 this is no longer an option due to Twitter updating their API to v1.1. However, there is still a way of styling your own Twitter feed using the following method.

First, you’ll need to download the code from github: Download Tweet.js-mod

Next, upload the whole /twitter/ directory to the root of your website.

Then you’ll need to reference the jQuery file with the following in the head of your document (and also make sure you’re referencing the jQuery library:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/twitter/jquery.tweet.js"></script>

Now, create a div within your HTML page that you want to target with the twitter feed.

<div class="twitter-content"></div>

Next, you’ll need to add the following jQuery to the HTML page making sure that you change the username to the feed you want to display:

<script>
$(document).ready(function() {
$('.tweet-content').tweet({
username: "dave_woods",
modpath: '/twitter/',
count: 3,
loading_text: 'loading twitter feed...',
});
});
</script>

Prior to Twitter API v1.1, this would have been sufficient for the twitter feed to work. However, you now need to provide the code with OAuth credentials so you’ll need to visit https://dev.twitter.com/apps.

Once you’re there, login and create an app. After the app has been created, scroll to the bottom of the details tab and click the “Create my access token” button.

I then found that I had to go to the “Settings” tab and scroll to the Application Type section and change the “Acccess” setting to “Read, Write and Access direct messages“.

After you’ve updated this, click on the OAuth tab and you’ll see the Consumer key, Consumer secret, Access token and Access token secret which you’ll need to activate the code.

Within the Twitter folder that you’ve downloaded, open up the index.php file and you’ll see the four areas that you need to add these keys.

// Your Twitter App Consumer Key
private $consumer_key = 'YOUR_CONSUMER_KEY';

// Your Twitter App Consumer Secret
private $consumer_secret = 'YOUR_CONSUMER_SECRET';

// Your Twitter App Access Token
private $user_token = 'YOUR_ACCESS_TOKEN';

// Your Twitter App Access Token Secret
private $user_secret = 'YOUR_ACCESS_TOKEN_SECRET';

Once you’ve done this and uploaded all these files to your site, your Twitter feed should display in a similar way to the Twitter feed in the footer on this site. You’ll then just need to add a few bits of CSS to style it the way you like and you’re good to go.