Creating a Custom jQuery Twitter Feed (API v1.1)
15 December, 2012 by Tom Elliott
This is comment page 4 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
viset says: I followed the steps you gave, but on Part 2, Step 2(copy and paste js) where do I upload it after I copied and paste the javascript?
-
Hi Viset, in the HTML code in step 1, I’ve named the JavaScript ‘twitterfeed.js’ so if you save the code/file to a file called twitterfeed.js within a folder named ‘js’ and upload it along with your feed you should be good to go 🙂
Nick says: Hey!
Thanks for the great plugin!
I’m getting the Requested page not found. [404] error and i’m not sure why.
I’ve followed all the troubleshooting tips!
Thanks!
-
Btw, this error is only thrown on my website. I’ve gotten it to run using the simplistic demo I downloaded from your website…
-
Sorry sorry, I figured it out.. absolute path!! Thanks :))
-
PL says: Nice job! However the solution is complex.
Is there no easy way to populate the Twitter widget “shell” with tweets?
When you call the Twitter 1.1 API you get tweets as JSON data. I would like to just stuff that JSON data into the widget.
Are there really no standard methods provided by Twitter for doing this?!
-
Hi PL, yeah – if you want to have a custom styled feed you need to jump through a few hoops. There might be other ‘widgets’ out there that require less steps than these tutorials, but this method runs through the code for anyone who needs the flexibility to be able to style and configure their own unique feed. You could of course checkout Twitter’s standard embedded timelines – see my post on Twitter feed options for some more detail 🙂
Hi,
Love this Twiter feed work you have done… I am having problems with getting “error -” when it runs… I get the loading gif and then the pop-up error.. not sure what to check.. the get-tweets1.php file does grab the feed… site is http://www.bertbertbert.com
Any help is appreciated.
Thanks,
Steve
Matt says: Hiya. Thanks for all your advice on here. I am new to using twitter and not very good with scripts etc. I am trying to insert a twitter feed into my school website so that I can tweet updates to it – so that it acts a bit like an instant news update. The built in twitter widget has the “Retweet” button which I don’t want as I don’t want hundreds of parents replying to the tweets – the idea is that it supplies them with updates about school etc. Is there anyway you could help me write a script to make this work please? Ideally this would be a small box that I can put on front page of website. Any help you can offer would be very much appreciated. Thanks
-
Hi Matt, thanks. To turn off retweet and reply buttons can be done by setting the showtweetactions variable at the beginning of the JavaScript to false. Other options can also be configured such as showing retweets and the retweet indicator. 🙂
Matt says: Thanks for your quick reply. I cant seem to see the show tweet actions line in the code that the twitter website gave me. Please could you advise.
-
Hi Matt, the showtweetactions variable is around line 10 on the twitter feed JS code
Hi Tom! Thank you so much for this tutorial, this was the first time i’ve messed around with the twitter api and i found the tutorial really helpful and my twitter feed looks lovely!
However I keep getting this problem when i visit the page on Chrome, an error message pops up saying “error: Connection problem. Check file path and www vs non-www in getJSON request”. Is it an error on my behalf? If so where is the error located?
Any help is greatly appreciated!
-
Hi Kai, thanks for your comment 🙂
Your twitter feed loads fine for me in Chrome and nothing seems wrong with the connection. The only way I could make the pop-up appear is if I refresh the page too quickly before the tweets have loaded. In which case, it will be safe to remove the alert(“error: ” + error); line in the error handling function-
kiai says:
The problem with this workaround is if there is a connection problem, there will be no error message. Is there a way to have the error function pause to allow time for the php to load?
Thanks.
-
-
Hold it! I managed to answer this myself by doing a thorough re-read of your tutorial! I was searching for the getJSON function in the wrong files which is why i couldn’t locate it. I had of course saved the twitterfeed.js files in a seperate js folder. and changed the url from “http://www.website.com/twitter/get-tweets.php” to just “../twitter/get-tweets.php”, seems to have worked for some reason! 🙂
-
Oh no! you managed to answer before i replied to it myself! You’re quick! Anyway, thanks again! Very much appreciated! 🙂
-
Nora says:
Thank you so much Kai!!! This solved my problem 😀
-
merry says: Hi Tom,
Thanks a lot for the code and tutorial. I had implemented on my client site and works well but got this error message occasionally “Connection problem. Check file path and www vs non-www in getJSON request”.
May i know what caused this and how to solve this issue?
-
Hold it! I found the solution from the post above. Thanks. It works by rmoving the alert(“error: ” + error);
I have getUserTweets.php getting my tweets In JSON format without issue.
I edited line 23 of twitterfeed.js accordingly:
$.getJSON(‘http://uniteordie.org/getUserTweets.php’
Jquery via tweets.html >>
Connection problem. Check file path and www vs non-www in getJSON request
I have read all the comments and tried the fixes , I’m not having success at correcting. Re-installed jquery. etc. Verified path to json.
Any ideas?
-
Hi Paul, When I checked your jQuery path was missing but I think your problem is actually with the PHP file – you seem to have some extra HTML “string(130571)” at the beginning and end of the PHP
i am getting this error
Connection problem. Check file path and www vs non-www in getJSON request
-
Hi Abdullah, can you send a link so I can take a look? One of the most common issues is if you are trying to access the twitter feed from the ‘www’ but have referenced the ‘non-www’ in the getJSON path.
Adam says: Tom,
Great tutorial! I’ve got everything set up on my site but I’m having an issue where the tweets ‘twitch’ when you hover over them. Very strange! Any thoughts?
-
Hi Adam, yeah I see what you mean. As you don’t have the tweet actions showing, I’d set the variables showtweetactions and showretweetindicator to false in the JS – I think the fact that the JS is trying to display the actions but the images aren’t in there is causing the twitch
-
Hi Tom,
That’s fixed it, thanks for your help!
-
Ryan says: Thanks for the awesome tutorial. This is a new area for me so I appreciate the breakdowns. However, I am getting a strange error. jquery-1.8.2.min.js is throwing a 500 error. Any ideas?
-
Hi Ryan, thanks for the link. There’s a server error on the PHP file php/twitterfeed.php that’s causing your issues. Checkout troubleshooting tip 1 on the authentication post which might help
-
Thanks Tom, I fixed the require path, it needed a “../” to get back to the root folder since I put the php file in its own folder. Also for some reason I had a foreach ($tweets as $item) {
echo $item->text;} statement in the php that i guess didn’t need to be there. Commented it out and I get my feed. Much appreciated!
-
This works a treat but the formatting of the tweets is coming out odd and the links are not clickable. Is there a way to strip out characters that are appearing like:
John Lewis at home and Waitrose plan unveiled http://www.thisishampshire.net/news/10653751.John_Lewis_at_home_and_Waitrose_plan_unveiled/ â¦
And get the link to be clickable and not plain text?
Thanks
-
Hi Simon, sounds like an odd bug – the links should automatically get highlighted.. can you send me a URL so I can take a look?
Hi There,
May of sent this a few times, but basically I have the twitter feed working from the twitter user I’ve set up, however all @tweets i.e. tweets to the user are not showing – is this even possible, if so, where am I going wrong?
Thanks
Stephen
-
Hi Stephen, yeah – these tutorials are for the user_timeline which don’t include mentions. What you’ll want to do is modify the PHP so that it gets mentions from the mention_timeline instead.
patrick says: Hi Tom,
I followed your instruction manual. The get-tweets1.php works fine. Downloaded also the latest version of jQeury. But nothing is changed.
It will not load the borders anything. The background is loading. Sometimes the seaching twitter is showing and sometimes it isnot.
The page is: http://leeuwenberg.info/twitter/heijstekevents/index.html
If you want my files please let me know and i will send them to you.
Hope you want te help me find out what i did wrong, it takes me almost 10 hours to figer it out.
Kind regards,
Patrick
Sonali Dave says: Hi.
This is a nice script, but i am keep getting “error: Connection problem. Check file path and www vs non-www in getJSON request” error.
I tried thousands of combinations and still nothing positive.
When i run my twitterfeed.php file – it gives me result of tweets in JSON but the index page is pushing the error.
I cannot post the URL in public, is there any other way to send you the link?
Thanks.
Dan Williams says: Hi Tom,
Thanks for this it works great, I have used it on several projects. Especially the ones that needed to just be upgraded to 1.1. I do have a question however…
Say the twitter feed is in the footer loaded into every page, If you click any link off a page before the feed has loaded, I get a popup error “error: Connection problem. Check file path and www vs non-www in getJSON request”.
Have you experienced this before and if so is there a work around?
Cheers mate
Dan
-
Hi Dan, thanks. Ah yes, if the feed is not fully loaded, it still triggers and pops up with error. Easiest way would be to remove the
alert("error: " + error);line in the .error function-
Ah Tom, thats brilliant. I should have just looked properly in the js file 🙂
Cheers
-
Hello,
Great Job. Everything’s working in under 15 minutes!
One Question…
I’m noticing the t.co aren’t opening in a new window. Can you please let us know if there’s something we’re missing or maybe a quick fix?
Please and thank you 🙂
-
Hi, thanks for pointing this out. I’ve updated the code so these links open in a new window. You need to add target=”_blank” to line ~132 in the addlinks function
Rob says: Hi,
Great tut! really helpful. I have everything working great. Was just wondering if you could point me in the right direction to updated new tweets via ajax. So it checks if there is any new tweets no currently displayed, if there is then load them in with ajax without a page refresh?? this would be awesome. thanks again
-
Hi Rob, thanks. Yeah, you can checkout the tutorial for a twitter search feed – this puts the getJSON request in a function which is then called based on an interval. Hopefully you can modify the code to suit your feed. 🙂
-
Hi again,
Awesome thanks for the response, I managed to follow your search tutorial and have it working well.
Another thing I’m trying to work out how to just add the new tweets to the existing ones. So say I have count set to 100. how can i make it so when it check for new tweets it pulls them in and adds it to the current tweets. so it would be 100 + any new tweets? thanks again Tom. 🙂-
Hi Rob, thanks! Ah – this could be a bit more tricky 😉 I’d start by moving the lines
var feedHTML = '';andvar displayCounter = 1;outside of the main get tweets function, so they don’t get reset each time the function is called
-
-
cameron says: Hi Tom, Thanks so much for this tutorial. I really appreciate it.
Your code works on my machine but when my clients view the website, they cannot see the twitter feed. Would it be possible to check the code for me? Thanks!
-
Hi Cameron, thanks – I can see your tweets fine on that link but not if I enter ‘www’ in the URL. If this is what’s happening, it’s because of a cross-domain security issue with your tweets PHP file on the non-www domain being requested from the ‘www’.
-
Thanks so much for the reply Tom. That makes sense. How can I have the tweets load using both www and non-www?
-
cameron says: Actually I think I figured it out, Tom.
I removed the “http://” and just used a local path “/twitter/gettweet.php”
Thanks for the great tutorial and code
Drew says: Awesome tutorial, thanks very much. If it’s ok I’d like to ask a couple of questions.
1. For some reason I can’t change the true/false settings in the JavaScript file to stop displaying profile pictures and dates etc – do you know why this might be happening?
2. Would it be possible to display 2 different LinkedIn feeds on the same page? I have duplicated the php/javascript sides and entered the relevant API details into each (they still share the same twitteroath and style sheets – but entered a seperate field in CSS to load the scripts). They both start loading however only the first twitter feed loads whereas the second one fails. Any help would be appreciated.
Many Thanks
Drew
-
Hey Drew, thanks! Sure no problem.
1). Not sure why the tweet profile pic flag in the JS isn’t working, I’ll check it out. In the meantime you can change the .twitter-pic class to display:none and remove the left padding from .twitter-text
2) It should be possible to display 2 feeds although I haven’t tried this yet. Are you using two separate JS files and have you changed the ID of the second twitter feed div element? If you send me a link, I’m happy to take a look 🙂-
Drew says:
Hi Tom,
Thanks for getting back to me. I forgot to check my cookies and I’ve reposted the message under “Andy” wrongly presuming that I hadn’t actually posted my question – woops!I will sort out the tweet profile pic class tonight then. As for the second question, I had created a separate JS, Stylesheet and PHP script basically using the tutorial as a guide to set it up and obviously going through each file changing the names of various classes and IDs and using a second twitter feed. When the page loads up the 2 feeds begin to load but the second one fails to do anything. I will send you the link for the test page through PM but I won’t be able to add the second feed into it until I return home this evening.
Many thanks
Drew
-
Chris says: Hello Tom. Can you help with the styling element? The Json data’s rendering fine, but no styling seems possible, or placement – the data just ploughs in at the start of the document.
-
Hi Chris, ah – you’ve got your main page echoing the tweets but you need to put this in a separate PHP which is loaded by the twitterfeed.js file.
-
Sorry Tom, I’m lost. Where is the separate php file called in the twitterfeed.js file? The only call to a php file is: $.getJSON(‘https://tomelliott.com/demos/jquery-twitter-feed/get-tweets1.1.php’. I tried altering this to call the feed file, but got nothing.
-
Hey Chris, yeah you need to head over to the Part 1 Twitter Authentication Post for this 🙂
-
Hi Tom. I’ve already got that. The messages are rendering in JSON format, but the PHP was embedded within the HTML file. I’ve split the files, but I can’t see where the call is to import it via the JS file (or the reason to split them in the first place if I’m honest).
-
-
Hi Chris, sorry – that $getJSON call is the only part in the JS that requests the PHP script so there must be another reason you’re getting nothing. Are you getting any JS errors? The reason I like to keep the PHP in a separate file is because the authentication request can take 1-2 seconds which you wouldn’t want adding to your main page load time. 🙂
-
No, no errors, and no posts when the code is split. The JS file has no call to the tweetcheck.php file. I’m presuming this is the problem, but (shame on me) I can’t figure out how to get it to do that.
-
Hey Chris, I’m seeing a JavaScript error $ is not defined because your jQuery file is missing
-
JQuery file’s included now, but still no joy. Not quite sure how the posts were coming through before I split the files without it being there :o)
-
-
-
saranraj says: I’m developing SharePoint Hosted APP in that i need to use java script only. In previous version 1.0 i can get the data using client side scripting but now in the twitter search API version 1.1 they using some authentication.So that we need register in the twitter site and then get consumer key. using this we need to code in server side script and consume the data from the API.
Is it possible to get the data for twitter search API version 1.1 using Client Side Scripting?
-
Hi Saranraj, yes it is possible to implement Twitter authentication using JavaScript – checkout the twitter libraries – however Twitter advise against this as your private keys/tokens can be seen by anyone.
keval says: Hi Tom,
Thanks for a great tutorial. I am using MAMP to have all my files in htdocs folder, I believe I have the path setup right according to the instructions but am not able to load display tweets from the get-tweets php file which authenticates fine. Is there a email I can send the files to ?
Any help would be much appreciated.
Thanks,
Keval
ira says: Hi. I noticed that Follow @’+tweetusername+’ is the user of a retweet or direct tweet IF those options are set to true. I think that’s not ideal in some cases and was wondering if ‘tweetusername’ could always be THE user of the feed we’re working with.
Thank you.
-
Hi. Just wondering if you knew about this. Please let me know… thanks! I mean, if there’s no simple way around it I want to know so I can think differently about it. Thanks.
-
Hi ira, sorry I didn’t get round to replying to you. I think I understand what you mean – I got the @tweetusername to work based on the user of the tweet – whether retweet or direct – so it adheres to the Twitter display requirements: https://dev.twitter.com/terms/display-requirements
-
Xiaoxiao Yu says: Hey Tom,
Thank you so much for your tutorial. I have done the things step by step as the page said. However, it seems I cannot get the tweets. The php file works well and gets the feeds by json as well. But when I run the html file in local server-localhost. No error report and no tweets I can get, only one blank on page. Hope you can help me, thanks.
-
Hi Xiaoxiao, so the PHP looks fine but when you run the HTML you get a blank page? Have you checked the JavaScript console for errors? It’s hard to troubleshoot but if you can upload somewhere and send me a link I should be able to see what’s wrong with your twitter feed.
Xiaoxiao Yu says: Thanks for your reply Tom. I have checked the JavaScript， it said “Uncaught TypeError: Cannot read property ‘length’ of null”. The error happened in line 28. The function(feeds) want to get the feeds.length.
And I have upload the script to a free web server, the url is :
http://unnugi.comxa.com/twitter/twitter.html
-
Hi Xiaoxiao, looking at your link, you’re getting a ‘null’ response in your tweets PHP file. A null response can be for a number of reasons and I’ve tried to cover them in troubleshooting tip #4 or the authentication post. If you’re still having issues, feel free to send me the php code.
Adam says: Hi Tom, great bunch of tutorials, nicely written code. Everything appeared to be going fine, following the tutorial (while testing on localhost), but once I tried displaying it on the page I’d get the screenname, the name, and the loading div, and nothing else, and no errors. I tried uploading it and the same problem occurs. If you could have a look I’d greatly appreciate it.
Xiaoxiao Yu says: Thanks for your reply Tom. I don’t know Why I cannot have a reply before. SO please forgive me post some same comment here.
I have checked the JavaScript， it said “Uncaught TypeError: Cannot read property ‘length’ of null”. The error happened in line 28. The function(feeds) want to get the feeds.length.
And I have upload the script to a free web server, the url is :
[removed]
-
Hi Xiaoxiao, umm I’m afraid I got a security warning when I tried to access the site from my virus program so I removed the link in your comment. Hope you haven’t got any nasty malware or anything like that!
-
Oh, I am sorry for that. And after examine my php file, I found a mistake in it, after change it, the webpage works well now. Thank you so much. And next step, I will try to the search tutorial.
-
Greetings Tom:
I just came across your great Twitter feed scirpts. I have successfully implemented you gettweets1-1.php script
and it shows the JSON output.
However when I implement your scripts to show the html output. I get a Page Not Found 404 error
And when I view the page source, I see the JSON output. What file is the script looking for???
Thanks for all your help!
Jack
-
Hi Jack, looks like you’re getting a file not found error because of incorrect path in the twitter feed JS – it’s requesting gettweets1.1.php instead of gettweets1-1.php also you have an error in your get tweets file
Michael Griffith says: Hi Tom. Thank you very much for the tutorial. I am struggling with getting the Tweets to load. The loading circle just keeps spinning. I am using XAMPP and the authentication works fine because I do get the tweet information but attempting to generate the tweets into the feed is where I am struggling. If i could send you the files, would you be willing to take a look? Any insight would be great. Thank you again for the tutorial.
Michael
-
Hi Michael, feel free to send the files and I’ll try and take a look. You can get in touch though my contact page 🙂
-
Ryan says:
I am having this same problem. Did anyone find a fix for this? Please do share!
-
Corry says: Thanks Tom,
I couldn’t have done it without your excellent tutorial and code!
ami says: Hi Tom,
Thanks so much for posting this. Even with extremely limited JavaScript skills, I was able to get it to work.
I do have one issue which confounds me. The code works in Opera, IE, Firefox and Safari. But in Chrome, I just have a blank box with no tweets. It seems to only get as far as the loading container.
I’m sure this is something idiotic on my part, but can’t seem to figure it out. Any help you can provide would be most appreciated.
Thanks again…
-
Hi Ami, I would guess that a different JavaScript issue on your page might be interfering with the Twitter JS, or maybe it’s a Chrome caching issue. Feel free to send me a link and I’ll try and take a look 🙂
Peeyush says: Hi,
I wanted to display the tweets at the bottom of the webpage as a ticker. So the tweets will move from left to write and one after the other.
I modified your CSS as below. I am able to see the animation, but the tweets are not displayed one after the other. Rather they are displayed one below the other and they all move from left to write at the same time.
Are there any properties from rest of the CSS which are causing the behavior.
CSS :
#twitter-feed {
position:fixed;
bottom:0;
left:0;
width:100%;
font-size:50px;
Background-color:#CD5C5C;
white-space: nowrap;
}
#twitter-feed div {
display: inline;
position:relative;
color:yellow;
animation:mymove 50s infinite linear;
-webkit-animation:mymove 50s infinite linear;
}
@keyframes mymove {
from {
left:0px;
}
to {
left:100%;
}
}
@-webkit-keyframes mymove
/*Safari and Chrome*/
{
from {
left:0px;
}
to {
left:100%;
}
}
John says: Awesome tutorial! This was a life saver!
I have one question though and I have a feeling that there is nothing I can do about it, I’m just double checking.
The feed only shows tweets from within the past two weeks or so. I used this on a website for a friend and he doesn’t update it too frequently at the moment, because it’s his off season. Is there a way to also display older tweets? I think this is a Twitter thing, because even the json file only has the more recent ones.
Thanks!
Manu says: Hi Tom and congratulations for your great job.
I can’t do work the jQuery Twitter Feed, i follow your howto but don’t work.
I working with wordpress, I explain a little bit:
1º I put the links in head of header.php before
2º I put the in html of the page
3º I do the file twitterfeed.js and i put it in the folder js/twitterfeed.js
4º I do the file twitter-styles.css and put it in the folder: css/twitter-styles.css
5º I download the twitteroauth and upload to my server
6º I do the file get-tweets1.1.php and replace the 4 keys with the info of my twitter app
I’m very lost I tried everything, what work wrong?
The page don¡t show nothing.
Thanks very much
-
Ups!!! the html code don’t show 🙁
Hi tom, thanks for this, got everything working but ever time I load the page I get an error message alert box that I have to suppress, can’t work out the problem console log does say 403 (Forbidden) for the tweets php file, path I’m using is with http www could i send you the link to have a quick look at?
many thanks