Dave Woods - Freelance Web Design Warwickshire

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="http://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.

10 comments on “Custom jQuery and PHP Twitter Widget

  1. LocalPCGuy

    In addition to changing their UI, Twitter also change the requirements to display a tweet on your website (see: https://dev.twitter.com/terms/display-requirements). Failure to follow those terms could result in your application being banned, which would cause the tweets to stop showing agian.

    No idea how rigid Twitter is going to be with this, but wanted to point it out for anyone thinking this is a quick and easy way to get things running again.

  2. Adam Pocius

    Thanks you for this! All my custom feeds tanked the other day and I have been waiting to find this blog post somewhere. Hopefully I can get it working…

  3. Dave Woods Post author

    Thanks @LocalPCGuy, I wasn’t aware that their requirements had changed also. I’ll update this article and my own Twitter feed over the next week so that it meets Twitter’s requirements.

  4. Dave Woods Post author

    @Renier, you’d basically need to do exactly the same for a WordPress site. This very site is run on WordPress and I simply dropped in the JavaScript in the header.php file of the theme and then put the HTML in the relevant place and it should all work :)

  5. Dave Woods Post author

    Hi Luke, it’s the link in the third paragraph above. It’s in the file you download from github ;)

  6. Elliott

    I am really loving the theme/design of your blog. Do you ever run
    into any internet browser compatibility problems?
    A small number of my blog readers have complained about my site
    not operating correctly in Explorer but looks great in Firefox.
    Do you have any tips to help fix this problem?

  7. Dave Woods Post author

    Hi Elliot, IE7 and IE8 do have a few bugs that won’t render things correctly sometimes and you’ll need to put fixes in place in certain circumstances if you want to support those browsers. Hopefully it’s now a thing of the past as IE10 is a pretty good browser :)