Creating a Custom jQuery Twitter Feed (API v1.1)

15 December, 2012 by Tom Elliott

This jQuery Twitter feed guide is designed to help anyone wanting to build a custom twitter feed to get the latest tweets from a user timeline. It uses the new API 1.1 authentication required by Twitter for all Twitter feed requests.

The latest version of the twitter feed has many customisable options such as tweet display limit, tweet actions, highlighting links, hashtags and is ideal for anyone who needs a customisable feed and design which isn’t available with the standard Twitter widgets. Check out the twitter feed demo.

This guide is split into 2 parts: 1) Twitter Feed Authentication – required by the new Twitter 1.1 API – and 2) feed integration and styling. There is also an additional (optional) tutorial for twitter feed caching to speed up loading of Tweets.

If you want to animate your twitter feed, checkout my posts on fading a twitter feed or the Twitter Carousel

In this guide, I’m using my twitter username @tomwebdev and will be tweeting any new features when they become available.

Part 1: Authenticating a Twitter feed

Head over to the twitter feed authentication post. The authentication tutorial gives a solution in PHP but the same principles apply for other server-side languages. Once you’ve got you’re tweets output to .json format, proceed to part 2

Part 2: Integrating and Styling a custom JQuery Twitter Feed

We start by setting up a basic styled twitter feed, using JavaScript and jQuery to parse the .json encoded text we created from the PHP file. We will output the .json as HTML and style it using CSS. The JS Twitter feed displays the tweet, relative time, twitter profile image and tweet actions. view the twitter feed demo here.

1. The HTML:

Nice and simple; 3 links required between the head tags for jQuery, the twitterfeed.js file and a CSS file.

<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/twitterfeed.js"></script>
<link href="css/twitter-styles.css" rel="stylesheet" type="text/css" />

This is followed by a single DIV with ID ‘twitter-feed’:

<div id="twitter-feed"></div>

2. The JavaScript:

Copy/Paste JavaScript code here

The twitter feed JavaScript has 3 functions; the main JSON call to the live twitter feed, a function to calculate how long ago the tweet was made and a function to detect and add links to any URLs and hashtags within the feed. The $.getJSON() call requests the live feed from the authenticating PHP script and the call is asynchronous, which means any other JavaScript can execute before waiting for the twitter request to be successful.

Replace the twitterprofile variable to the twitter username and tweak the variables below that to determine if the URL/hashtag links, profile pic, tweet actions and retweet indicator should be displayed. The displaylimit variable determines how many tweets are shown.

Also make sure the php file in the getJSON request on line 20 reflects whatever name you gave to the get tweets authentication file.

The below JS makes a request to a PHP script that authenticates for Twitter V1.1 API, please see my Twitter authentication tutorial

The Twitter feed also displays a loading graphic, a twitter bird image in the header along with a tweet actions sprite which you’ll probably want to grab.

The CSS

The CSS layout is straightforward; twitter-feed is the main container div, each tweet sits in a twitter-article class and the tweet text, profile image and tweet actions as divs within the article container.

To change the width of the twitter feed container, just modify the width style of the #twitter-feed div.

body {
	background-color:#333;	
	font-family:Arial, Helvetica, sans-serif;	
}

img  {
	border:none;
}

#loading-container {
    padding:16px 0px 16px 0px;
    text-align:center;  
}
 
#twitter-feed {
    width:258px;
    margin:auto;
    font-family: Arial, Helvetica, sans-serif;
    margin-top:60px;
    padding:8px 10px 5px 10px;
    border-radius:12px;
    background-color:#FFF;
    color:#333;
    overflow:auto;
}
 
#twitter-feed h1 {
    color:#5F5F5F;
    margin:0px;
    padding:9px 0px 9px 0px;
    font-size:18px;
    font-weight:lighter;    
}
 
.twitter-article, #loading-container {
    width:100%;
    border-top:1px dotted #CCC;
    float:left; 
    padding:8px 0px 8px 0px;
	position:relative;
} 
.twitter-pic {
    position:absolute;
}
 
.twitter-pic img {
    float:left;
    border-radius:7px;  
    border:none;
     
}
 
/* -------- TEXT STYLING ------*/
.twitter-text {
    width:100%;
    float:left;
    font-size:11px;
    padding-left:52px;
	-moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.twitter-text p {
    margin:0px;
    line-height:15px;   
}
.twitter-text a,  h1 a {
    color: #00acee;
    text-decoration: none;
}
.twitter-text a:hover,  h1 a:hover {
    text-decoration: underline;
    color: #00acee;
}
 
.tweet-time {
    font-size:10px;
    color:#878787;
    float:right;
}
.tweet-time a, .tweet-time a:hover {
    color:#878787;
}
 
.tweetprofilelink a {
    color:#444;
}
.tweetprofilelink a:hover {
    color:#444;
}
 
/* -------- FEED  ACTIONS ------*/
#twitter-actions {
    width:75px;
    float:right;
    margin-right:5px;   
    margin-top:3px;
        display:none;
}
.intent {
    width:25px;
    height:16px;
    float:left; 
}
.intent a{
    width:25px;
    height:16px;
    display:block;
    background-image:url(../images/tweet-actions.png);
    float:left; 
} 
.intent a:hover{
    background-position:-25px 0px;
} 
 
#intent-retweet a{
    background-position:0px -17px;
} 
#intent-retweet a:hover{
    background-position:-25px -17px;
} 
#intent-fave a{
    background-position:0px -36px;
} 
#intent-fave a:hover{
    background-position:-25px -36px;
} 
 
/* -------- RETWEET INDICATOR ------*/
#retweet-indicator {
    width:14px;
    height:10px;
    background-image:url(../images/tweet-actions.png);
    background-position:-5px -54px;
    margin-top:3px;
    float:left;
}

Hooray! You should now have a fully functioning Twitter feed. If you run into any problems, the error handling might help or check out the troubleshooting tips below. Once everything is working, you may want to remove the error handling alert from the JavaScript (line 124) as this can sometimes get triggered if a visitor presses the browser back button before the tweets have loaded.

Updates

- Added retweet indicator
- Added intent actions for tweet, retweet and favourite
- Added link to hashtags which open up Twitter search, when ‘showtweetlinks’ is set to true
- Added error handling
- Fixed bug with URL links sometimes cutting off on retweets
- Fixed bug with broken links when enclosed with non standard quote marks
- Improved CSS to make it much easier to resize the twitter feed width (set by #twitter-feed)

Note: the Twitter feed should now comply with Twitter’s new display ‘requirements’ brought in after the old API v1 depreciation. Whilst it is unclear how Twitter are going to enforce these requirements (if at all) other than ‘reaching out to developers‘, please be aware that changing the default parameters in the feed JavaScript may result in a feed that doesn’t comply to these rules.

Twitter feed troubleshooting tips

  1. Make sure the twitter get tweets php file is correctly outputting the tweets in .json format
  2. It’s worth outputting at least 30 tweets in the php as the JS is set to skip past any direct tweets
  3. Check the php source and make sure no HTML is included after the closing ?> tag
  4. The get tweets php should be in the same folder as your main twitter feed page
  5. Uncomment the alert(feeds); line in the feeds function to make sure the array of feeds has been parsed
  6. Try an absolute path to the php for the $.getJSON call
  7. Make sure you’re using the latest jQuery file and that this appears in the HTML before twitterfeed.js
  8. If you are getting a JavaScript error: ‘Uncaught TypeError: Property ‘$’ of object [object Object] is not a function..’, adding a ‘$’ in the document ready function should fix it. i.e. jQuery(document).ready(function ($) {

If you want a set of tweets from a specific search phrases, hashtag or twitter handle instead, check out my tutorial for a custom Twitter search

If you need to make a cross-domain call to your JSON encoded tweets, checkout my guide on cross-domain AJAX/JSON calls

JQuery Twitter Feed: Caching Tweets

Caching a twitter feed to a local file will speed up twitter feed load time and avoid Twitters rate limiting.

Twitter Feed Animation

Extend your twitter feed by adding some animation! Checkout the below posts:
1. Fading tweet rotation
2. Twitter feed carousel

You may also like Limitations with Twitter Search (https://twitter.com/search)



487 Comments

  • Lisa says:

    Will this still work in March 2013 when API v 1 is deprecated? V 1.1 apparently requires oAth. I am looking for a way to replace my current custom css twitter feed as the widgets are really restrictive

  • Mallory says:

    I’ve followed your instructions exactly and can’t get this to work for the life of me! What am I missing? :(

  • Ian says:

    I’ve gotten the authentication working fine. Thanks for making it easy!

    However, I can’t get the feed itself to function. Any ideas? http://thepowersource309.cmswebstaging.com/wp-content/themes/tps309/twitterfeed/twittertest.php

  • Hi Tom!

    Great tutorial – I am using Rapid Weaver for my site and would love to customize via CSS what you have here but I cannot get it working. I know it is related to Rapid Weaver, as they do things just a little differently. Would you happen to know what I may be missing? I have the ability to add the CSS code in addition to the style sheet so I thought this may be an issue as well.

    Thanks,
    Wade

  • Dan says:

    I’m trying to get this to work on a website built in Sharepoint 2007, I’ve followed everything, and added/created all the files etc. But it still wont display, anyone have any ideas why this would be?

    • Tom says:

      Hi Dan. Happy to take a look if you can send me a link. First thing to check is if get-tweets.php is outputting all tweets correctly? If it is, then check the that the .php file is being parsed – maybe by adding an alert(feeds); line after “function(feeds) {“

  • ramzesimus says:

    Hey Tom,
    Thanks for your solution. It works fine for me. One question: it seems that in the demo you’re using improved script (twitterfeed.js) And it links to get-tweets1.1.php probably also improved.
    I’ll be very appreciated if you provide those improved versions of both.
    Many thanks

    • Tom says:

      Hey Ram,
      Great, glad you got it working! Yeah, the JavaScript in the twitter feed demo is updated with a few bits and pieces such as a pre-loading graphic which I’ll have updated in this main post soon :). The get-tweets1.1.php is actually the same in the demo as it is in the oAuth post.
      Tom

  • Val says:

    Hi Tom,
    Great article but I am not having any luck getting the feeds to display either. My get-tweets.php file is running fine and the container is on my site. Any help would be appreciated. You can see my site at dev.craftbutchery.com.

    Thanks!

  • Val says:

    Hi Tom,
    Think I figured it out. Looks like there are 2 displayLimit vs. displaylimit within the js.
    Fixing both did it for me.

    Thanks!
    Val

  • Finally got it working but when the page first loads, the JSON format shows for a second before loading as HTML. How can I fix that?

  • Sebastian says:

    Hi Tom.

    Could you look at my code, it walked through the tutorial and checked the respones above, but it is still not working for me. The get-tweets.php seems to be working fine.

    Link:
    http://q-international-projecten.nl/Tweets/

    Cheers,
    Sebastian

    • Tom says:

      Hi Sebastian,

      This problem I haven’t seen before – I’ve had a look at your code and can’t see anything wrong with it.. – no JS errors and I tried copying\pasting all your details and worked fine when uploaded to http://www.webdevdoor.com/demos/jquery-twitter-feed/index-ap.php

      I wonder if it’s a server issue – what version of PHP are you using? Also if you want to send me the PHP code (I won’t publish it), I can take a look at that.

    • Tom says:

      Hey Sebastian,

      Thanks for sending me your PHP – it looked like removing the extra HTML at the end of the get-tweets PHP file fixed your problem :)

  • Joel says:

    Awesome! Thanks for this. Any idea how to get a feed of only favorites using this method? I probably missed something, this is new for me!

    Thanks again!
    Joel

  • Joel says:

    Nevermind! I just changed the API url to what twitter specifies on this page:
    https://dev.twitter.com/docs/api/1.1/get/favorites/list

    TO:
    https://api.twitter.com/1.1/favorites/list.json?…….(etc.)

    Works like a charm! You rule!
    Joel

  • Jesper says:

    Hi, i have done everything correct (I think) but i cant get the tweets to be displayed, only my name and link to the twitteraccount.

    Should the feed work on a local host or do i have to upload it to my webserver?

    thanks in advance

    • Tom says:

      Hi Jesper,

      No reason why it the Twitter feed shouldn’t work locally but it may be a good idea to upload to your web server anyway. Are the tweets being displayed as JSON when you run the PHP direct? Also, is the PHP file in the same location as the page displaying the tweets?

      • Loopo says:

        I get the same issue as Jesper. PHP direct works fine but only name, image and loading gif display in twitter feed. HELP!!!!!

        • Tom says:

          Hey Loopo, this problem is usually due to the twitter JS function not being able to parse the PHP. I suspect either you have an incorrect path to the PHP or some extra HTML being output in the PHP file itself. Try an absolute path to the JavaScript including full site name or feel free to send me a link :)

          • Loopo says:

            New API is on this test page. Rest of site using v1 still. http://www.loopowebdesign.co.uk/test

            Changed paths to script to absolute but didnt do anything. Sure it must be something really simple.

            thanks for your help.

          • Tom says:

            Ah, I can’t seem to open get-tweets.php from your site root when I try direct – page not found error. Also you have an additional jQuery loading after twitterfeed.js. Hope that helps :)

          • Loopo says:

            Thanks Tom, got it working, was a path issue in the twitterfeed.js file. Just looks odd in ios now so will need to address this!

  • Thanks Tom. Very helpful. The API deadline has been hanging over us for a while now ;-)

  • Danielle says:

    Hey Tom,

    Awesome tutorial about trying to work with the new Twitter API. I have a strange problem. I’m working locally on a WAMP server and I believe I have everything in place. Here’s what’s happening: When I reload the page the tweet (I have it set to just display one tweet right now for testing purposes) displays for about maybe a second says “Tweet Loader” then disappears and I’m left with a small white bar.

    I’ve got the php file in the same place as the index.php file it’s being used on and I’m linking to the latest jQuery library via google. The js file is in a folder and I have it going up one directory to find where the php file is. so basically ../get-tweet1.1.php

    I’m not sure why this is happening, any help would be greatly appreciated!

    • Tom says:

      Hi Danielle,

      Thanks for your comment and detailed description. ‘tweet loader’ is actually the alt text for the animated loading gif which would display if the loading image is missing. Based on the directory structure you describe, the js path to the php should actually be ‘get-tweet1.1.php’ (counter intuitive I know) instead of the parent path you’ve used. I would also output a load of tweets in the php – if your last tweet was a direct tweet for example, the twitter feed javascript is set to ignore this by default.

      Hope that helps! :)

      • Danielle says:

        Yep that was it! I also set direct tweet to false just in case.

        Thanks so much Tom. I’m working with a client and we’re going to display a bunch of twitter feeds. I had an old script that ran with the old API and was shocked to find Twitter was dropping it (I’m just a little out of the loop haha).

        I know you mentioned a tweet limit and having to cache, so I’m going to look into that next.

        Thanks again!

  • Austin says:

    Hi Tom,

    Thanks so much for this. Is there a way to make the feed search for a certain hashtag in addition to a profile feed? The embedded twitter feed I was previously using from SeaOfClouds (http://tweet.seaofclouds.com/) was able to do this. The Museum I work for wants to show tweets directed at a specific exhibition hashtag in addition to tweets about the Museum.

  • Marijn says:

    Hey Tom,

    I love the script, thanks!

    But it took me way to long to get it working, so I thought I post the following for people who have the same problem.

    I didnt get it to work on Localhost (wamp), when I tried the get-tweets.php in browser, I got the following error: “Fatal error: Call to undefined function curl_init() in C:\wamp\www\test\twitteroauth\twitteroauth.php on line 199″

    But when I uploaded the same code on my server, it worked :D

    So if there is a solution for localhost, I would love to hear it, but anyway I’am glad I got it to work

    • Tom says:

      Hey Marijn,

      No problems and thanks for sharing how you fixed your issue. Sounds like cURL used by the Twitteroauth library was not installed or enabled locally but glad it worked when you tried it online :)

  • Stu says:

    Hi, I’ve tried the code and tested it at http://www.dinahstudios.com/molly/test – and it works fine but when I try to integrate it to the main site where I want to display it it fails. Comes back with an error :

    ‘Uncaught TypeError: Property ‘$’ of object [object Object] is not a function twitterfeed line 2′

    Any ideas?

    Thanks

  • Stu says:

    The main url is http:www.dinahstudios.com/molly

  • Ferry says:

    Hi Tom,

    I am working on a new community website and new to this, it seem the get-tweets.php is working, but the tweets are not showing.

    http://www.wfm-gaming.com/get-tweets.php – seems to work
    http://www.wfm-gaming.com/test.php – not showing

    • Hi Ferry, you’re getting a get-tweets.php 404 (Not Found) error and should change the getJSON path to the twitter php. $.getJSON(‘get-tweets.php’, should work

  • Gerald says:

    Hey Tom,

    I commented out session_start(); in my get-tweets.php file and it finally displayed my tweets. Do I need that?

  • Alexis says:

    Hello,

    Thank you for your tutorial!

    I have encountered an error. I keep getting this message error:

    Uncaught ReferenceError: jQuery is not defined twitterfeed.js:2
    (anonymous function)

    I have tried the solution in tip:#8 but it didn’t work. Do you have any idea how I could solve this?

    Thanks in advance, Alexis

    • Hi Alexis,
      I think the error your getting is because you have the jQuery file loading after twitterfeed.js. Try switching the two around which should fix the Twitter feed.
      Tom

  • Mike says:

    Hi Tom.

    Thanks for the script.

    I’m having a few problems getting my tweets to display. I’ve double checked everything but can’t manage to find where I’ve gone wrong, any advice would be great.

    http://www.mikewarddesign.co.uk/test

    Thanks,

    Mike

  • ira says:

    Got it all set up with ease. Thanks. However, I needed to implement it in a cross-domain scenario; I ended up adding an Access-Control-Allow-Origin header to the php file and that worked great in Mac browsers but NOT in IE9/8.

    Can this work cross-domain in IE?

    Thank you.

    • Hi, although the Twitter feed hasn’t been tested cross domain, as far as I’m aware you should be able to make a cross-domain call. You may need to change the call to ajax/jsonp and set cross domain to true. Hopefully this link will help

      • ira says:

        Yup, set it up as ajax/jsonp and it works great.

        Question: Have you experienced any issues with ‘Timstamp out of bounds’ and server clock not synced to Twitter’s with any of this? Apparently If your server’s clock is off by more than 5 or 10 minutes, all your OAuth requests will fail. I have experienced this twice around 1AM EST so I am going to check out my server clock.

        Also, should I just use jQuery to get different dates.

        Thanks man.

  • Matt says:

    Hi Tom

    thanks for a really useful guide. We are trying to use this on our library website, and I’m beginning to make it work in most browsers, but I am trying to fit it into a small box, and IE is throwing up some scroll bars… Any quick advice you might be able to offer? I

    it’s over at http://library.shu.ac.uk/twitter

    thanks in advance, and thanks again for useful guide.

    • Hi Matt, glad you found my twitter feed guide useful. Try taking off the ‘overflow:auto;’ style from #twitter-feed. This was added to expand the containing tweet DIV to a variable height, but should work fine without it.

      • Matt says:

        Tom, many thanks for a quick and speedy reply. This has helped with the scroll bars issue, so thanks – it’s really appreciated.

        Just one more thing… I’m confused about how the script displays the Twitter profile pic. At the moment it doesn’t seem to work in Chrome – even the demo doesn’t display profile pics – http://www.webdevdoor.com/demos/jquery-twitter-feed/

        So the Twitter feed at library.shu.ac.uk/twitter is missing pictures in Chrome, but not in IE, Firefox and Safari. Have you noticed this before?

        Ideally it’d be neat to be able to switch off images altogether and have the text start from the left, but I can’t work out how to do that…

        thanks again, I’ve really appreciated your help.

        • Hi Matt, no problem. I haven’t come across missing twitter profile pics in Chrome before and both the SHU and demo images load fine in Chrome for me. I would guess it’s a browser security setting, perhaps since images are loaded from a https link. The easiest way to turn off images would be to add a ‘display:none’ style to the css .twitter-pic class. Hope that helps

  • Anthony says:

    Thank you for creating this script. I really want to use it but, I have one question?

    Twitter’s Feed Widget can display images and I’m not sure about Vine videos. Just wondering can this JQuery handle displaying images from Twitter, Instagram, etc. and/or Vine Videos?

    Thanks

    • Hi Anthony, yeah – the only images the jQuery displays is the Twitter feed is profile picture from the tweeter. Embedded vine videos, instagram etc that Twitter’s Feed Widget displays *should* appear as a link rather than being displayed inline.

  • William says:

    Great tutorial!!

    I am a complete novice when it come to all things jquery / javascript but I have managed to add a neat little bit of code in the script to truncate the feed and add on “…” at the end along with a link “more” to the users twitter profile page.

    If anybody is interested I will post it up as long as I have permission to do so?

    Regards,
    William.

  • Benjamin says:

    The new(isn) guidelines from twitter say that the full timestamp include date and time must be shown. In your example only the date is shown. How’d you change that? (https://dev.twitter.com/terms/display-requirements)

    • Hi Benjamin, actually the twitter date should be displayed as per point 3 in the ‘timeline’ display guidelines: Tweets older than 24 hours should show a short form date including the day and month, e.g., “6 Jun”.

      • Benjamin says:

        Ah, ok. I must of misread that.
        How do you change the feed to show direct tweets?
        Thanks!

        • Hi Benjamin, setting the variable ‘showdirecttweets’ to true on line 8 should do the trick

          • Benjamin says:

            It’s me again.(sorry about that) This time it had been going fine until earlier today when it stopped for no reason. I did some checks and there seems to be something wrong with the PHP. So I re did the PHP and re did the app authorisation process, but that still doesn’t work. The PHP command writes the TXT as 0KB and the text reads “null”.

          • Hi Benjamin, it’s hard to know what the problem could be without seeing the source code. If you want to send me the feed PHP, I’ll try and take a look. Is there any chance you could have exceeded the Twitter rate limiting of 180 requests per 15 minutes? Also, are there any messages in the Twitter Dev area?

  • Benjamin H says:

    Great tutorial. I’ve got it to work, and it displays, etc. However, it won’t display my most recent tweet. I’ve tweeted 4 or 5 news ones and it still jumps back to one before them. (none of them are direct or RTS).

    I even deleted the tweet that it was using, and it’s still going back to that one?

    • Hey, sounds like it’s a caching issue. Are you trying to cache your tweets as in part two of this post or are you calling the PHP file direct? If you can send me a link, I’ll try and take a look

  • Jack Coldrick says:

    Hi Tom, Fantastic tutorial. Very helpful and clearly explained. I have it working, however my div only updates when I refresh the page. Is there a way I can update the div as I update my twitter? Here is a link to my page:

    http://www.jdiadt.com/twitterv1_1feed/testindex.html

    • Hi Jack, thanks for your feedback. Yeah, to get the DIV to update automatically without having to refresh would require setting a timer interval to re-load the tweet php script. I implemented a refresh timer on a variation of this post for a twitter feed search – hopefully you can grab the code you need from there

  • Marvel M. says:

    Hey Tom,

    I can’t seem to get my feed to appear on my website. I got the get-tweets1.1.php to output my tweets in JSON fine but I can’t seem to parse my it through my twitterfeed.js. Can you please help me?
    http://marvelmarcel.com/

  • Daniel says:

    Ok so I seam to have done something wrong. The tweets are not showing, can someone help please?

    Thanks

  • Sam says:

    Hello, Great tutorial. So i’m having an issue when this code will only work when I open it in http://localhost/index.html. And if i try to open it from the folder on my desktop…nothing…Suggestions?

  • Blake says:

    Excellent tutorial! Thank you. This has been very helpful.

    I’m having a problem with getting the tweets to display in HTML. Looks like the php is good, but it’s not translating to the HTML file. PHP is in the same folder as the HTML. Please help. Thank you in advance.

    http://greenolivemedia.com/revolution/update/06-12-13/js/twitteroauth-master/interior_twitter.html

  • Adam says:

    Tom,
    Thanks so much for this! Helped me understand the new API. I have a working implementation here but the tweets never load on my phone in mobile Safari (spinner shows indefinitely), and a friend can’t see them in desktop Chrome. In both cases the php shows info (http://blueinkdesign.com/tnc/get-tweets-search.php), so is this some kind of JS problem?

    http://blueinkdesign.com/tnc/

    Thanks much Tom!

    • Hi Adam, thanks – I’ve just had a look on both Safari (iPhone 4S) and Chrome desktop and latest tweet loads fine for me with no spinner… perhaps it’s a caching issue

  • Jonathon says:

    Hi Tom,

    I am a complete newbe and I am having a problem with the twitter feed only showing our name and the spinning loader image but no tweets.
    http://cyntrax.co.uk/twitter.php

    Could you be kind enough to have a look.

    It would be greatly appreciated

    Kind regards

    Jonathon

    • Hi Jonathon, no problem – I’m seeing a 404 file not found JS error for get-tweets-ap.php so I’d check that out

      • Jonathon says:

        Hi Tom, renamed get-tweets.php to get-tweets-ap.php and all was solved.

        Many thanks for taking the time to develop this script and the time to reply to my question.

        If i could ask one more question. Our original script before the API1.1 allowed us to remove the timestamp. Can this be done with your script?

        Kind regards

        Jonathon

        • Hi Jonathon, glad you got it working – yes, you can remove the timestamp either by editing line 63 of the JS or (probably more easier), setting the CSS display property of .tweet-time in the CSS to ‘none’

  • Davy says:

    Hi Tom,

    Mind me asking a question too? I put this tutorial in the bottom left of this site (http://www.wderw.nl/), but for me it sticks to the loading gif. I’ve got no js errors, if i manually enter the get-tweets.php link i do get a response (http://www.wderw.nl/templates/WeghDerWeegen/get-tweets.php), but somewhere between the 2 it goes wrong. I made the link to the get-tweets absolute, and i changed the #tweet-div to .tweet, but i changed that in the .js folder as well, and as you can see it does build the heading. What am i doing wrong?

    thanks for your effort!

    Davy

  • Luke says:

    Hi Tom, got it all working now, looks excellent, thanks for everything.

    Just on a side note, wandering if possible there is java script than can rotate through the twitter feed?

    so just displaying one tweet which changes every minute or so?

  • DeeDee says:

    Thank you for this tutorial. Any idea why I’d be getting this error? (I know very little about this stuff, so sorry if I’m making an obvious mistake!)

    Warning: require_once(/adamscottfans.net/tweets/twitteroauth/twitteroauth.php) [function.require-once]: failed to open stream: No such file or directory in /home/edeainfj/adamscottfans.net/tweets/get-tweets.php on line 3

    Fatal error: require_once() [function.require]: Failed opening required ‘/adamscottfans.net/tweets/twitteroauth/twitteroauth.php’ (include_path=’.:/usr/local/lib/php:/usr/local/php5/lib/pear’) in /home/edeainfj/adamscottfans.net/tweets/get-tweets.php on line 3

    I’ve quadruple checked the path, and I don’t know what else could be wrong.

    • Hi DeeDee, hmm – this does look like a path issue – based on how your files look like they are setup, the code require_once(“twitteroauth/twitteroauth.php”); should work?

  • Hi Tom, thanks ever so much for this! I followed the tut and got it all working fine but there’s one thing i need… ideally i’d like to rotate the tweets so that only one is shown at a time. This is how i had it before on my website (as you can see from the layout of it) and i notice this is how you have it set up on this site.

    I was using the rotate jQuery function for my old twitter feed, but it was suited for li’s rather than divs. And for the life of me i can’t get it to work with this plugin.

    Can you offer any guidance on this as soon as you have a spare moment, i’m desperate to get this working?

    Many thanks in advance :)

    • Hi Simon, your welcome. Yeah – I want to do some tutorials on twitter feed animation including the single tweet fade/rotate when I get the chance like the one used on the site – in the meantime though you could take a look at the modified JS I use for these tweets on Web Dev Door which will hopefully help: http://www.webdevdoor.com/demos/jquery-twitter-feed/js/twitterfeed-main.js

      • Cheers Tom! I’ll give this a try when i get home tonight. Thanks a lot much appreciated! :)

      • Rob Parker says:

        Hi Tom, firstly congrats on an excellent tutorial which I have followed successfully.

        Like Simon, I am interested in animating the feed as this is what I had with my previous script which worked on the old API before it was “terminated”.

        The link above to your script gives me the start of this effect for a single “tweet” – do you think this could easily be modified to display multiple tweets and these rotate/slide up on a timer?

        Any help is gratefully received!

        • Hi Rob, many thanks. The script could certainly be modified but wouldn’t be entirely straightforward. I’d start by increasing displaylimit and modifying animatetweets() function so that the loop doesn’t hide all the tweets initially and then loop through fadetweet() so it fades or slides say 3-4 tweets at a time.

          It’s a good idea and I want to do a few animation tutorials/demos when I get the chance such as fading single and sliding multiple tweets :)

      • RK says:

        I’d love to get a tutorial on how to rotate single tweets. I looked at your JS but I’m totally lost. It all appears to be set up much different.

      • Matteo says:

        Thanks! it works perfectly! as you can see on my weebsite..

        ;)

  • Leave a Reply

    Your email address will not be published. Required fields are marked *

    css.php