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) »

Related posts

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

« Older Comments

Newer Comments »

  • Sascha says:
    June 13, 2013 at 8:03 pm

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

    Reply
  • Richard Pickles says:
    June 13, 2013 at 11:51 pm

    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

    Reply
    • Tom Elliott says:
      June 14, 2013 at 10:00 am

      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.

      Reply
  • James says:
    June 14, 2013 at 11:24 am

    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

    Reply
  • Letitia says:
    June 14, 2013 at 3:47 pm

    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!

    Reply
    • Tom Elliott says:
      June 14, 2013 at 4:30 pm

      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

      Reply
      • Letitia says:
        June 20, 2013 at 1:00 pm

        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

        Reply
        • Tom Elliott says:
          June 20, 2013 at 7:25 pm

          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.

          Reply
  • Jose Torres says:
    June 14, 2013 at 6:10 pm

    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.

    Reply
  • graz says:
    June 16, 2013 at 5:34 pm

    Thank you 🙂

    Reply
  • Tom Nolan says:
    June 17, 2013 at 10:54 am

    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?

    Reply
    • Tom Elliott says:
      June 17, 2013 at 5:34 pm

      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

      Reply
  • Simon says:
    June 17, 2013 at 11:12 am

    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?

    Reply
    • Tom Elliott says:
      June 17, 2013 at 5:15 pm

      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

      Reply
      • Simon says:
        June 18, 2013 at 10:07 am

        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

        Reply
        • Tom Elliott says:
          June 18, 2013 at 12:11 pm

          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

          Reply
  • Simon Seddon says:
    June 17, 2013 at 4:14 pm

    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 🙂

    Reply
    • Simon Seddon says:
      June 17, 2013 at 4:52 pm

      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!

      Reply
  • Tom Elliott says:
    June 17, 2013 at 5:17 pm

    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

    Reply
  • RK says:
    June 17, 2013 at 5:53 pm

    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.

    Reply
  • Duane says:
    June 18, 2013 at 5:41 am

    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

    Reply
  • Mary says:
    June 18, 2013 at 7:23 pm

    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.

    Reply
    • Daniel says:
      June 19, 2013 at 4:47 am

      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.

      Reply
  • Danny H says:
    June 19, 2013 at 7:41 am

    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

    Reply
  • Jeric says:
    June 19, 2013 at 10:09 am

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

    Reply
  • Mary says:
    June 19, 2013 at 3:57 pm

    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

    Reply
  • Lahiru says:
    June 20, 2013 at 12:43 pm

    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!

    Reply
  • edk says:
    June 20, 2013 at 5:50 pm

    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.

    Reply
  • Vishakha says:
    June 20, 2013 at 9:54 pm

    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!

    Reply
  • Katherine says:
    June 21, 2013 at 1:29 am

    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!

    Reply
  • Michael says:
    June 23, 2013 at 4:37 pm

    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

    Reply
    • Tom Elliott says:
      June 24, 2013 at 6:51 am

      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

      Reply
  • Martin says:
    June 23, 2013 at 5:31 pm

    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

    Reply
  • Laura says:
    June 24, 2013 at 4:43 pm

    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 🙂

    Reply
  • Irfan Ali says:
    June 25, 2013 at 5:49 pm

    Hi Tom,

    Thanks for this awesome work. It really helped me a lot 🙂

    Reply
  • Ed says:
    June 26, 2013 at 2:27 pm

    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

    Reply
  • Kevin says:
    June 26, 2013 at 6:20 pm

    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

    Reply
  • Eric says:
    June 27, 2013 at 3:37 am

    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?

    Reply
  • Danny says:
    June 28, 2013 at 2:10 pm

    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?

    Reply
  • Shameera says:
    June 29, 2013 at 11:08 pm

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

    Reply
  • Sam Green says:
    July 1, 2013 at 3:23 pm

    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?

    Reply
  • Sam Green says:
    July 1, 2013 at 4:14 pm

    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?

    Reply
  • Jon Ewing says:
    July 1, 2013 at 4:14 pm

    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.

    Reply
  • Sam Green says:
    July 1, 2013 at 4:29 pm

    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?

    Reply
    • Tom Elliott says:
      July 1, 2013 at 4:34 pm

      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?

      Reply
  • Major says:
    July 1, 2013 at 6:41 pm

    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?

    Reply
    • Tom Elliott says:
      July 1, 2013 at 7:00 pm

      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

      Reply
  • Kevin Tuskey says:
    July 1, 2013 at 10:17 pm

    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!

    Reply
  • Tom Elliott says:
    July 2, 2013 at 7:27 am

    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).

    Reply
    • Wolvey says:
      July 2, 2013 at 8:10 pm

      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.

      Reply
  • Alex Johnson says:
    July 3, 2013 at 12:41 pm

    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.

    Reply
    • Tom Elliott says:
      July 4, 2013 at 1:55 pm

      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?

      Reply
  • Danny says:
    July 3, 2013 at 3:51 pm

    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?

    Reply
    • Danny says:
      July 3, 2013 at 3:53 pm

      Sorry i did not copy the full code

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

      Reply
    • Tom Elliott says:
      July 3, 2013 at 4:40 pm

      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. 🙂

      Reply
  • J Smilanic says:
    July 4, 2013 at 8:30 pm

    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)

    Reply
  • Matt H says:
    July 5, 2013 at 2:03 pm

    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! 🙂

    Reply
    • Tom Elliott says:
      July 5, 2013 at 3:59 pm

      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=”‘

      Reply
      • Matt Harris says:
        July 5, 2013 at 10:32 pm

        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….

        Reply
        • Tom Elliott says:
          July 6, 2013 at 10:37 am

          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 🙂

          Reply

    • « Older Comments

    Newer Comments »

    Next Post:
    Last post:

    Site Search

    Categories

    Recent Posts

    Popular Posts