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

15 December, 2012 by Tom Elliott

This is comment page 2 for Creating a Custom jQuery Twitter Feed (API v1.1) »


Authenticating a Twitter Feed for OAuth API V1.1 – Timelines & streams »
Twitter feed authentication (API 1.1) for search »
Creating a Twitter Search & Analytics tool »


510 Comments

  • Sascha says:

    THANKS, great! Would be even greater if hashtags were links! #thx

  • Richard Pickles says:

    Hi there,

    Firstly thanks very much for the tutorials.

    Not being very technically minded I was still able to get part one of your tutorial ‘Twitter Feed Authentication (PHP)’ to work, at least I believe I have.

    However I am now struggling with part two, feed integration and styling.

    I’ve followed it along and have done so a few times now but I still can not get it working.

    Any help is greatfully appreciated.

    Thanks

    Richard

    • Tom Elliott says:

      Hi Richard, yes – I see what’s going on. The twitterfeed.js needs to reference get-tweets.php on line 20, i.e. $.getJSON(‘get-tweets.php’ instead of outputting the PHP direct into the HTML. get-tweets.php should only have the authentication stuff from step1 and everything else should be on a separate page.

  • James says:

    Hi Tom,

    Have you seen any issues where the browser outpusts a 500 error when trying to access the get-tweets.php file?

    This script worked fine locally but now I have updated it to the server (with 755 file permissions, 644 fif not work either), it does not work

    Cheers,

    James

  • Letitia says:

    Hello Tom,
    Thanks for the instructions for the new twitter api. I have managed to get the Json file and also embed the twitterfeed.js correct. But seems that’s about it. Seems something isn’t quite working with the function in the getJSON method. Would you have time to have a look? MERCI!

    • Tom Elliott says:

      Hi Letitia, it looks like you’re also echoing something else in your get-tweets.php file as ‘Array’ appears before anything else. [{“created_at”: should be the first thing to appear in get-tweets.php

      • Letitia says:

        Hello Elliott,
        Thanks so much for having a look! I don’t think that was the problem. As I just wanted to see if the files is actually executed. However I have removed the output and now it starts with {“created_at”:
        But still no success with replacing the loader with the latest twitts
        I’m feeling sorry for you, as most many people struggle to get the new api included. BIG THANKS for you’re help, time and colleague spirit!
        Letitia

        • Tom Elliott says:

          Hi Letitia, thanks – I like it when I’m able to help. πŸ™‚ Looks like you’re getting a cross-domain XMLHttpRequest JS error. Try removing the ‘www’ from the absolute path to the tweet fil in the $.getJSON call.

  • Jose Torres says:

    Hello, thank you for this wonderful tutorial. I have gotten the first part but the feed isn’t showing up on my website. It should be in the bottom left hand corner of the website. I have the get-tweets.php installed on http://www.cafehavanali.com/wp-content/themes/jldesigns/get-tweets.php. I’m installing this on WordPress. Thank you for all your help.

  • graz says:

    Thank you πŸ™‚

  • Tom Nolan says:

    The display requirements states:

    Reply, Retweet and Favorite Tweet actions must always be available to the user when interacting with the Tweet on the timeline. e.g., select, hover, touch, swipe.

    Your example seems not to comply with this, am I correct?

    • Tom Elliott says:

      Hi Tom, thanks for pointing this out – yeah, the code does not include actions for Reply, Retweet and Favorite yet but hope to have this updated soon… I’ve updated the post to notify others about this

  • Simon says:

    Hi,

    I have everything set up, but my feed just says loading tweets, there are no tweets coming through, although my get-tweets.php file is showing the tweets?

    • Tom Elliott says:

      Hi Simon – have you got a link you can send me? You could try checking to see if you’re getting any JavaScript errors in the meantime

      • Simon says:

        Yeh sure sorry if you go to my site, in the footer, I’ve checked I don’t seem to get any javascript errors, everything seems fine it just doesn’t want to display the tweets

        • Tom Elliott says:

          Hi Simon – I’m getting a XMLHttpRequest Access-control-origin error in Chrome JS console. I think you might need to make sure you’re using a relative path to your get tweets file

  • Simon Seddon says:

    Thanks for the detailed walk-through – you are THIS close to saving my bacon!

    I have the script working locally. My only question is: in the jQuery we’re declaring a bunch of variables (user, number of tweets, etc.) but these are being ignored when I run my demo, which is using those set in the get-tweets.php script.

    In your markup you cite get-tweets1.1.php – is this a different script? If so, do you have a link? If not, do you know why the variables in JS are being over-ruled?

    It’s not an ACTUAL problem since I don’t have a problem setting these in PHP – but it just means that I’m wasting memory in JS. Everything fails if I simply strip out the unused JS variables since they’re referenced throughout.

    Anyway, thanks again for the brilliant script and walkthrough! If only Twitter themselves were as helpful to us front-end devs πŸ™‚

    • Simon Seddon says:

      Ignore my last comment – it was just because I’d reduced the tweets limit in php to 1 (so setting it to 3 in JS obviously wasn’t going to work).

      I did notice that changing showprofilepic wasn’t changing anything, so wrapped line 61 in an if(showprofilepic){ statement.

      While I was there I also added a space on line 62 (now line 64) to separate the @handle from the time.

      Thanks again!

  • Tom Elliott says:

    Hi Minna, you’re getting an internal server error – could be an incorrect path to twitteroauth.php in gettweets.php for example. Checkout the troubleshooting tips on https://tomelliott.com/php/authenticating-twitter-feed-timeline-oauth/ for more details

  • RK says:

    One thing I noticed is you have us name the php file get-tweets.php but you reference it in the JS as get-tweets1.1.php. Just thought people should know who are having trouble. I renamed my file and all is good.

  • Duane says:

    Hi Tom, thank you once again for such a great and timely tutorial. I have got the get-tweets.php feed authorized it shows, coped and amended the javascript but yet I only get the loading image.

    I’m currently building and testing locally using xampp, I’ve checked to make sure cURL is activated, the root link in the php file (twitteroauth/twitteroauth/twitteroauth.php) is fine. I’m at a complete lost now,

    any help would be greatly appreciated.

    Thanks

  • Mary says:

    Hi Tom,

    Thanks for writing this tutorial, i was struggling to understand how to update all my old client twitter feeds with the 1.1 API, so thank you!

    I was testing it on localhost before i uploaded it and got a Fatal error: Call to undefined function curl_init() in C:\wamp\www\twitter\twitteroauth\twitteroauth.php on line 195 but it works fine once i uploaded the files to my server. Just in case anyone else is having that issue.

    • Daniel says:

      Mary you need to enable the cURL library in your wamp.

      The steps are as follows :

      Close WAMP (if running)
      Navigate to WAMP\bin\php\(your version of php)\
      Edit php.ini
      Search for curl, uncomment extension=php_curl.dll
      Navigate to WAMP\bin\Apache\(your version of apache)\bin\
      Edit php.ini
      Search for curl, uncomment extension=php_curl.dll
      Save both
      Restart WAMP

      This should solve your error.

      BTW: thanks Tom for this!, it worked on first try.

  • Danny H says:

    Hi,

    Would it be possible to use scrolling via a Jquery script? Are there examples already to be found somewhere?

    I want to display 2 tweets and then scroll to older tweets…showing the last 10 tweets this way.

    Danny

  • Jeric says:

    Thanks – Thank you very much I have been struggling with JSON and this really helped me see how it fits together. Cheers

  • Mary says:

    Thank Daniel,
    I got it working.

    I have it working fine on a live site but i can’t seem to get it working on another site. The get-tweets.php works fine http://centralcars-taxi.com/templates/centralcabs/get-tweets.php and i don’t see any errors but nothing is loading when i try and bring out the tweets. http://centralcars-taxi.com/templates/centralcabs/twitter.php
    I have it working on another site i did so can anyone tell if its a server issue?

    Thanks

  • Lahiru says:

    Hey Tom, just wanted to say Thank You for this guide. Deprecation of API 1 broke quite a few site (my fault for not being prepared) but your guide got it up and running in matter of minutes. Thanks again!

  • edk says:

    tom – hi there. thanks for the excellent walk-through. you took a very complex issue (to me) and provided an easy to follow step-by-step. unfortunately, i’m having a problem displaying my tweets on my page. i’ve followed the instructions best i can and i’ve also read the comments making edits along the way. here’s where i’m at:

    – outputting to JSON is fine
    – not outputting to final webpage

    i’ve changed “displaylimit” in both places, tried relative and absolute paths to the php, checked for extra html in the php, eliminated redundant calls to jquery files in the html, checked that the jquery call appears before the twitterfeed call, and some other things i can’t recall. hoping you have a moment to spot the issue. thanks a ton.

  • Vishakha says:

    Hi Tom,

    Thank you for this wonderful solution for custom twitter feed using the new version. I did get it to work when both the get-tweets.php (along with the library) and the html file (along with the JS files) are on the same hosting server. In my situation I have to host the authentication piece along with get-tweets.php on another server as PHP is not supported on the server that hosts the html website. I tried using absolute path when referring to get-tweets.php in the JS but it doesn’t load the tweets. Any help will be appreciated.

    Thanks!

  • Katherine says:

    I just wanted to say THANK YOU! Your tutorial was immeasurably helpful in getting a client’s Twitter feed back up and running after the switch to v1.1.

    My client’s site is a wordpress site, so I created a new blank page to hold the JSON code. I put the authentication PHP code in a special template file that I assigned to the blank page. Then I loaded up the JS in functions.php and for the getJSON url, I used “echo get_bloginfo(‘url’).’/name-of-json-page/’;” It is outputting the code to the homepage brilliantly.

    That might all be common knowledge and intuitive to others, but I took me a little while. Maybe it will save someone else a bit of time. πŸ™‚

    Thank you again!

  • Michael says:

    Hi,

    Great tutorial, the feed works great on a standard page, but when i’m trying to include it on the footer of my wordpress template its not displaying correctly:

    1) images not displaying, just showing alternate text.
    2) tweets not displaying.

    I think there is an issue with file paths because i am using wordpress.

    Any suggestions how I can resolve the file paths in my twitterfeed.js file?

    Thanks

    • Tom Elliott says:

      Hi Michael, thanks – yes, it does sound like a path issue and it depends where you have put the js and other image files. I would suggest putting all the Twitter feed files outside the theme’s folder which shouldn’t break the relative paths. You can also try absolute paths in twitterfeed.js

  • Martin says:

    Hello,

    I’ve managed to install it on the static problems without problems however it does not seems to work on the WordPress site. Should the guide be a bit different for installing the script on WP?

    Thanks

  • Laura says:

    You did an awesome job with this. My feeds are up and working now with minimal trouble and they look great. I can’t thank you enough for taking the time to look at everyone’s questions and answering them so thoroughly and frequently πŸ™‚

  • Irfan Ali says:

    Hi Tom,

    Thanks for this awesome work. It really helped me a lot πŸ™‚

  • Ed says:

    Hi Tom,

    Thanks a lot for this, I have three websites where the feed is not working since the change in API!
    I can’t get this working though… Any ideas?

    Thanks again,
    Ed

  • Kevin says:

    Hey Tom.

    I’m having a similar problem as many people on here. The tweets are outputing to the php file, but no tweets are loading on my feed page. The ‘Loading tweets’ graphic just spins – No tweets. Can you see what I’m doing wrong?

    Here’s the link: http://stablematecreative.com/twittertest/twittertest.html

  • Eric says:

    I tried this but get an error on the getJSON call. I can’t see what the error is. If I add .error(function() {
    alert(“JSON call failed”);
    });

    to the getJSON call, it displays the “failed” message. I verified my path, but no dice.

    Any ideas?

  • Danny says:

    Hi Tom,

    Thanks for the tutorial, I am not sure if anyone else has asked this question.

    I was just wondering if it is possible to make the hashtags within the tweets hyperlinks? as they are currently just plain text.

    I can see within your code how you have added http:// to all links but i was wondering how you would make all the hashtags work ? i assume you would return the following URL http://search.twitter.com/search?q= and then add the tag within the tweet?

  • Shameera says:

    Can you send me your demo project…? (without keys)

  • Sam Green says:

    Hey Tom,

    First, thanks for all the help your code has provided – I’d be much further from my goals without it (after trying several OAuth libs). I’ve been working on getting a twitter feed for a website I’m helping out, and I’m a little stuck. The code is able to authenticate, and when I click on the get-tweets.php file, I see the tweets in JQuery form. I made an html file with the three headers plus the div in it, and copied the Jquery file, as well as the css. They’re in the same directory as the get-tweets.php file, but when I click the HTML, I get nothing. It seems strange considering I’ve copied the code exactly (I typed it out first, but after not seeing results I adjusted everything and replaced my code with yours). Any idea why this wouldn’t be working?

  • Sam Green says:

    Thanks again for your walkthrough! I will not be defeated by these hiccups in my snippets!

    Updated::

    So I fixed the css path, as well as added in the proper formating for an HTML document (duh!). I now have my name appearing as well as my handle, but I saved the image of the bird and that’s not appearing, nor are any of my tweets. I got it to authenticate and show my tweets in JSON format, changed the address in the $.getJSON(get-tweets1.1.php) to my filename, but still no avail. Think you’ve got a chance to answer this one?

  • Jon Ewing says:

    Just wanted to let you know that this was hugely helpful.

    I’ve always used RSS feeds to access tweets in the past. It’s been years since Twitter actively promoted RSS feeds as a means of distributing content so I knew it was only a matter of time before the plug got pulled but I’ve done nothing about it till today. Your code has made it all possible.

    Many, many thanks.

  • Sam Green says:

    Last time I’ll try and get you a message – I’ve isolated the issue to the JSON. I can get the box to display with my handle, my name, the bird, and the loading graphic. I wondered why it wouldn’t work, but I eventually threw the script in chrome and got this

    Failed to load resource: the server responded with a status of 404 (Not Found)

    Even though all these files are stored in the same location :/ Any clues?

    • Tom Elliott says:

      Hi Sam, thanks for the update, yes hopefully it’s a path issue to your tweets php file. I would try using an absolute path from the getJSON to the php, including ‘http://www…’. Happy to take a look if you can send me a link?

  • Major says:

    All I wanna do is change the freaking FONT on my twatter widget. THE FONT. Why is it so hard? That’s what she said. I hate twittler. Can you help me?

    • Tom Elliott says:

      Ah haha, now that’s the problem with the embedded timelines that I think you’re using, not very customisable. I think Twatter just want everyone to conform. You can change the font easily if you implement the code from this tutorial but it will take a bit of time to setup

  • Kevin Tuskey says:

    Great work, Tom!

    Any chance of adding the ability to parse hashtags to make them functional links inside a tweet? It would be much appreciated. Thanks!

  • Tom Elliott says:

    Hi Wolvey, I’m afraid it looks like PHP isn’t activated on your server and your get tweets script isn’t being executed (you can tell if you view source).

    • Wolvey says:

      Dumb question, but I’m not quite sure how to do that. How do I make that happen?
      I created a previous test project on the same server (bluehost) in php and never had a problem.

  • Alex Johnson says:

    Hi, I’ve followed this tutorial and it works perfectly on my local version, but when I’ve uploaded it to the live server, all I get is the spinning ajax-loader.gif

    Can you take a look and see if i’m missing anything here please. the domain name is http://www.carrickfinancialmanagement.net/

    Many thanks for this great tutorial.

    • Tom Elliott says:

      Hi Alex, thought I’d already replied to this! I’m getting a 404 file not found for the get-tweets1.1.php – perhaps if you try an absolute path to the PHP file from the $.getJSON request?

  • Danny says:

    A few days ago I asked you about the possibly of making all the hash tags within the twitter feed work as links.

    I have now developed a solution to this issue which may help other people in the same situation but if you or anyone else has a better way of doing this then please let me know.

    //Add link to all #hashtags within tweets
    data = data.replace(/#(S*)/g, function(tag) {
    return ‘‘+tag+’‘;
    });

    Whilst developing this solution I discovered an issue with the twitter feed, it seems that the JSON file that is being generated is cutting each tweet into a set numbers of characters? This isn’t a major problem until it comes to links; if the link URL is being cut down in the JSON file then the URL link within the tweet is incorrect so when you select the link it will take you to a page which doesn’t exist.

    I am not sure if anyone else has noticed this but if you could let me know of any possible solution to this I would be most grateful.

    My assumption is that twitter is restricting the number of characters that can be returned?

    • Danny says:

      Sorry i did not copy the full code

      //Add link to all #hashtags within tweets
      data = data.replace(/#(S*)/g, function(tag) {
      return ‘‘+tag+’‘;
      });

    • Tom Elliott says:

      Hi Danny, thanks for sharing your code! I’ve observed the link cut off issue and I think it happens only in retweets not using the full link. I’m actually going to release an update to the twitter feed shortly (hopefully today) which will include a few bug fixes and other improvements – I might incorporate your code as well as it’s slimmer than the solution I had for linking hashtags. πŸ™‚

  • J Smilanic says:

    Tom,

    Thanks so much for this tutorial. I had a few issues getting it to work correctly then finally got it working in Chrome. I was excited until I tested it in Firefox and Safari and got an error code.

    I checked Chrome’s developer tools but didn’t see any errors showing up. I’m not familiar with much Javascript or PHP so I’ve done all I can. I was hoping perhaps you could take a quick glance and see if you can see anything. You can find the twitter div in the footer (which I’ve yet to style properly yet)

  • Matt H says:

    Great tutorials by the way! Having successfully authenticated my twitter feed I’ve run into problems parsing the array on my wordpress staging blog: http://bettysbakes.co.uk/

    I’ve tried the trouble shooting, absolute links, making sure that the get-tweets.php is located in the root of my theme. I thought the problem was jquery based but I can’t seem to get the tweets to display at all. I’ve read through comments but have I missed something obvious? Any help would be greatly appreciated! πŸ™‚

    • Tom Elliott says:

      Hi Matt, thanks – I’m seeing a 404 not found error for the jQuery file – I think you’ve got an extra apostrophie at the beginning i.e. src=”‘

      • Matt Harris says:

        I think I have found the error but not sure why it is happening. In the output of the twitter feed there is a closing div at the end….

        • Tom Elliott says:

          Hi Matt, yes – it sounds like there is extra HTML on your get tweets php and for the JSON to parse correctly there should be no HTML or any other output other than the json encoded tweets πŸ™‚