Creating a Custom jQuery Twitter Feed (API v1.1)
15 December, 2012 by Tom Elliott
This is comment page 5 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
-
Laura says:
Hey Jason,
did you ever figure out what the issue was? I’m having the same problem. Thanks so much
Archit Verma says: Hi Tom! thank you so much for the wonderful tutorial!
I am getting Uncaught ReferenceError: exception is not defined on twitterfeed.js line 115. How do I fix this?
Hi Tom
In the last few days this has stopped working, the feed is pulled correctly but as far as i can tell, the following if statement is never true and therefore the feedHTML variable is not concatenated with the correct data
if (((showretweets == true) || ((isaretweet == false) && (showretweets == false))) && ((showdirecttweets == true) || ((showdirecttweets == false) && (isdirect == false)))) {
Thank you very much for this tutorial!
I just have one small issue.
I can not seem to get the json data to go away. It shows up above my header and the widget shows where it should.
I tried to comment out the line that echos the json data, but that breaks the widget. Thanks for your help.
-
Hi Greg, hmmm, it sounds like you the json from the PHP is being echoed on the same page as you have the twitter feed HTML div – do you have a separate PHP file that the JavaScript requests?
-
I figured out what my issue was there.
Now the getJSON is throwing a 404 error even though I’m using an exact path.-
Hey Greg, what was your issue ? i’m experiencing the same and can’t figure what to do !
-
-
Hi Tom, thanks for the great tutorial. I think I have followed all your steps, but am having trouble in seeing any tweets in my feed. I get this error message:
error: Connection problem. Check file path and www vs non-www in getJSON request
I’ve tried some of the suggestions that you gave to others with the similar problem, but none of the solutions seem to work. Here is a link to my site:
I’d really appreciate any help and advice on how to get this working.
Thanks very much!
mohamed awad says: YOU ARE THE BEST
THANKS SO MUCH ^_^
Bart says: A beautiful script work very well. I had a question:
I wanted a sort of loop so if the last message was that when he immediately starts again but I could not find it in these descriptions, or I do not look good.
Sincerely,
Bart
gabriel says: thanks this is an awesome stuff, i try to implement it in joomla but the noconflict function in j 2.5 seems not function with this can you help me?
Hi,
The tutorial is working perfectly, except that the JSON is still displaying on my page, on top of the styled timeline !
It might be because there is still the “echo json_encode($tweets)” in get-tweets.php, but how to avoid that to still get de JS file working ?
Aline says: Hi, can someone help me?
* I’d like that the images can be visible togheter text, and not only the link.
Is it possible?
Vaibhav says: Hi Tom, Thanks for this great tutorial
Twitter feed is coming ok but there is a problem
I want to add twitter follow button at header area of twitter feed
I added twitter follow button through javascript
Before twitter feed loads, follow button displays
but as the tweets display, follow button disappears
Can you please help
-
Hi Vaibhav, you haven’t put the follow button inside the #twitter-feed div have you? When the tweets are loaded, the html() command used will replace everything in this div. 🙂
Vaibhav says: Hi Tom
Is it possible to show tweets of a particular user account filtered by one or more hashtags ?
$tweets = $connection->get(“https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=”.$twitteruser.”&q=#batley”.”&count=”.$notweets);
I have tried to add a particular hashtag “#batley”
But it only displays the tweets of that user account without any filteration by that hastag
Can you help ?
-
Hey Vaibhav, to filter by hashtags AND user accounts, you’ll have to use the search API instead 🙂
https://tomelliott.com/jquery/twitter-feed-authentication-search/
Ian says: Hi Tom, first of all thanks for this. I have a query regarding the live twitter feed. I’d like to know if there is a function call, so that it updates the twitter automatically within the page on a certain time without reloading the page. Many thanks.
-
Hi Ian, yeah you can wrap the twitter feed call within a function. I’ve done this on the Twitter Feed for Search post, with gettwitterjson() function call 🙂
Ernesto says: Hi Tom!!! Great tutorial…
1st of all sorry for my english… xDD im doing my best.
About this twitter feeder… its really awesome.. it works on my local but when a put it online dont load anything….. keeps loading. My website is antonellasevents.com.
My host provider is godaddy.. Do i need to configure something in goddady to get feeder working out?
Thanks for your help!!! 🙂
-
Hey Ernesto, your English is great! Hmm, yes your Twitter Feed PHP file is coming out blank… this can be for a number of reasons and might just be that your host is setup not to report errors. First of all I’d try and turn error reporting on (or check your logs for errors), it might be a case that there’s a path issue for example to your OAuth files. It could also be a PHP version thing, so phpinfo() will tell you this. PHP 5.3+ never seems to have any issues! Hope that helps 🙂
Jan says: Hello Tom,
Firstly, thank you for the code! Unfortunately, I have a problem showing tweets when the path of the website is one level down. The twitter feed is at the footer of the page, so it should be there on alle subpages.
I expiremented with the “$.getJSON(‘get-tweets.php’,” path at line 20 of twitterfeed.js. For example by adding the absolute adress, with or without www. But that didn’t work out
Is there a way to fix this.
-
Hi Jan, an interesting one… I would have thought it would work if you add an absolute path to the JSON e.g. $.getJSON(‘/get-tweets.php’ but if you want to send me a link I can take a look?
Daniel says: Thank you sooo much! I searched quite a while to figure out exactly this and this post seems heaven-sent. Just a quick question, how would I display my number of followers if I wanted to? The shortcode in the twitter api is “data-show-count” … but maybe I am not sure where I can find these attributes. Let me know at your convenience, and thanks so much again 🙂
-
Hi Daniel, thanks for your comment! It looks like the user’s follower count is available through the user_timeline JSON we’re already parsing. Hopefully you should be able to get this in the same way as other details in the JavaScript using something like feeds[i].user.followers_count 🙂
Tom says: This is a great plugin, thanks!
Can you tell me what i need to use to get the media url from the feed? I’ve tried similar things to the below with no luck yet…
var imageurl = feeds[i].media_url_https;
or
var imageurl = feeds[i].media_url;
Kris says: Hey Tom, love the script but for some reason, my get-tweets is loading perfectly, but when i got to view it on the main site, it doesnt show!
check it out:
http://www.kristhecaptain.com/test/test2/register.php
any ideas?
For some reason the tweets on my client’s website are now blank (this did work previously) .
Any clues?
Hi
I’m getting the “error: Connection problem. Check file path and www vs non-www in getJSON request” issue recently. It didn’t do this when I first installed the script which was working fine.
It tends to happen when I click a menu item before full load has completed.
Very frustrating.
Can you tell me how to resolve it, please.
Great script solution by the way.
-
Hi Rob, yeah if you just remove the line
alert("error: " + error);. This was just left in mainly for debugging purposes but can also trigger if the page is refreshed before the feed has had chance to load.
Mike says: Hey Tom,
Great work on this and I have a slight issue with it using Internet Explorer only.
I get this error code only in IE
Connection problem. Check file path and www vs non-www in getJSON request
I have tried absolute paths, urls and just the directorie names and nothing.
I type in example.com/tweets.php and it shows the same in IE, Firefox and Chrome only problem is when I go to display using javascript.
any ideas or do you think it could be a browser issue on my end
-
Hi Mike, strange for this to happen in IE only… have you got a link you can send and I’ll try and take a look
A K says: Hey, Thanks for the great tutorial. I have an issue that I could not solve. When I run get-twitter-search.php I could see the tweets in a format like this: “RT @aaroncarter: #throwbackthursday n#internationaldayofhappiness http://t.co/nKTwqclPvB“,”source”:”web”,”truncated”:false,”in_reply_to_status_id”:null,”in_reply_to_status_id_str”” but nothing shows up on my index.html. Do you have any suggestions? Thanks in advance.
-
Hi AK, that’s normal JSON output for the PHP tweets file – it’s the JavaScript that then parses this output. If you’re using the PHP from the search tutorial, I’d try the JavaScript from that post as there’s a couple of key differences.
Talal Rafi says: Thanks a lot for these great guides and ready to use code Tom, Bless you!
I was wondering if you could help me with auto-loading new tweets every 20 seconds or so?
Everything is setup exactly as u have guided and working. Do i need to set an interval function for jquery? Would really appreciate it!
Thanks again and have a gr8 day!
-
Hey Talal, thanks for your comment. I have loading tweets based on a timer working on my Twitter search authentication tutorial – there should only be a few changes required to the JS code which are hopefully easy enough to see.
Sean says: What would I need to add/change to get the tweet pics to expand automatically instead of displaying a hyperlink?
-
Also, I want to change it from displaying a timeline to displaying search results. Any help would be appreciated. Thanks.
-
Hey Sean, you can checkout my Twitter authentication for search tutorial which is similar but changes needed in both the PHP and JS files 🙂
-
Wesley says: Hi Tom,
Quick question. I’ve been able to style the Twitter feed fine and get it to work how I want it. However, I am finding that the “source” link from the json output is showing up in different sections of my site.
So there are random links to “source”:”Twitter for iPhone” showing up when I hover over seemingly random sections of my site.
I understand that the source is the utility used to post the tweet, but I just don’t understand how to get this to go away so that no links actually show on my site. If you go to [removed] and hover over the footer or email newsletter signup you will see what I mean.
Any advice for how to solve this? I really appreciate the help!!!
Santosh says: hi Tom,
your articles are very helping.. I’m glad that I came across this page.
here’s my problem..
I actually need to fetch around 150-200 user tweets in a single request to Twitter.
is it possible to do so? if so, how can I?
dubbs says: Hi, Great code and working well for me on a few sites – but noticed on one site I am getting an error in Chrome which I can see in the Inspect Element Console:
XMLHttpRequest cannot load [removed]. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://example.com’ is therefore not allowed access.
Any ideas why and what the fix is?
-
Hey Dubbs, yeah you normally get this error when accessing your site through the ‘www’ but have an absolute path to the tweets PHP without using the ‘www’ (or vice-versa). The ‘www’ is seen as a sub-domain and browser security prevents cross-domain requests. You probably need to add ‘www’ in the JSON path.
Hi Silan, yeah you JSON request is pointing to the PHP file on my site rather than the twitter PHP file generated on your site (around line 22 in the JavaScript).
I am still having issues with the twitter feed not showing on my end now. It was at least showing me the actual name but then now it not even doing that much for me.
-
Hi Brian, there’s a number of reasons why the name and/or feed isn’t showing. If you want to send me a link I’ll try and take a look.. also check the dev console for JavaScript errors. Chances are, there’s a comment or tip here with someone who has had the same issue.
Nathaniel says: Hi Tom,
Thanks for the post, I’ve got the feed up and running, but have a question: Is there an easy way to pull/display tweets from multiple users using this setup? For example, a company that wants to display all employee tweets.
-
Hi Nathaniel, there’s a few ways you could do this (you could loop through multiple user timelines) but depending on the size of the company but I think the best method would be to create a Twitter list of all employees and use the GET lists endpoint
zia says: great work.
how to increase or display more tweets instead of one.
Like i want to show 3 tweets at a time and scroll on..
i checked the js but couldnt workout
Sean says: Hi Tom,
I’m trying to organize the tweets in a different manner, specifically to fit into my current site structure. I want to organize the tweets in ul li format but the js reformats the structure when it gets to the twitter text, specifically. Any ideas as to how I can restructure to fit my needs?
Mark says: This is great. How can I change it from a feed of user tweets to a search term – would love to display a hashtag via same method.
-
Hi Mark, you can modify the PHP scrip to search for a hashtag, handle or anything else – check out my twitter search guide. Also note minor update required to the JS (right after the JSON call).
Carlos says: Hi Tom, I have the following error: ‘Connection problem. Check file path and www vs non-www in getJSON request’;
But change using absolute paths to try, your same web addresses:
”
” …
What can it be?. The only relative path is my html that calls the js jajaja…Help me! thanks!…
Neeraj Singh says: Hi Tom, Thanks for this beautiful js script.. It helps me allot Thanks :). One thing I wanna share with you that I have updated this script as jQuery plugin and I wanna share with you my updated code with great pleasure. you and other needy people can find this code on my Github page because here is no way to send you… so let me know if you allow me to update your code and distribute among all the needy people.. it would be great pleasure to hear you.. Thanks once again.. 😀 Here is path/link https://github.com/neerajsinghsonu/TwitterHashTagGallery
-
Hi Neeraj, thanks for posting your modifications. I’m always happy for people to use my code and share their updates like you have done 🙂
James says: Hi Tom
Sorry to reply to an old thread, but I was wondering if there’s a way to get the Tweet media to display inline in the feed rather than as a link? I know this isn’t practical display-wise, but a client wants to show pictures on the page.
Thanks for the excellent tutorial by the way.
James says: Oops didn’t see the subsequent comment pages – I guess it’s not such an old thread! 🙂
Rick says: Hi,
My question focuses solely on the following code within the twitter-fade.js file.
– var refreshinterval = 60000; // Time to autorefresh tweets in ms. 60000ms = 1 min.
-var refreshtimer;
Regardless of the time I choose to set as the autorefresh rate the tweets never seem to actually auto refresh and pick up new tweets. Everything else I seem to have gotten to work correctly. Is there anything I should be modifying to the above variables?
Thanks in advance.
Hey Tom, will this work in a ASP.Net site or CMS like DotNetNuke with the latest twitter api version? I have made php feeds using the following and I saw one .aspx page referenced above but it was outdated and had no twitter feed implemented.
-
Hi Kevin, the demo here uses PHP authentication script so you would need a .NET authentication script that can echo JSON formatted tweets for this to work. Check out https://developer.twitter.com/en/docs/developer-utilities/twitter-libraries
Hey there Andy… Maybe you can help. I am getting the following error:
Uncaught ReferenceError: exception is not defined twitterfeed.js:115
(anonymous function) twitterfeed.js:115
l jquery-2.0.3.min.js:4
c.fireWith jquery-2.0.3.min.js:4
k jquery-2.0.3.min.js:6
(anonymous function)
I removed the “echo” as mentioned above, but still getting the error..
thanks in advance.