Creating a Custom jQuery Twitter Feed (API v1.1)
15 December, 2012 by Tom Elliott
This is comment page 6 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
Diego says: solved.. the problem was with the var twitterprofile. sorry.. thanks.. :$
Hi,
I am using the Twitter feed on this page within our website: https://www.creat3dprinters.com/news/
The code has been working fine for months but is now not showing our tweets.
I have checked the network console and it appears to be returning the JSON response as normal via the get-tweets.php script. Also the ‘#loading-container’ div shows and then disappears as normal.
However, the tweets do not replace the ‘#loading-container’ as they should.
Any suggestions?
Let me know if you need additional code, but was not sure what to send.
Thanks.
Jon
-
Hi Jon, after taking a quick look – first thing I would suggest that can cause issues is that your get-tweets.php file is echoing out a blank line when you view the source on line 1. No HTML output should exist either side of the JSON output. Hope that helps 🙂
-
Jon says:
Thanks Tom.
I did not amend this before I checked the page again and it is bringing up 1 tweet, but the code is set to show 2.
I have not changed any other settings but have removed the blank line as suggested and this has not made a difference. I am just getting 1 still.
Thanks again.
-
Hi Jon, have you checked the number of tweets being returned within the PHP? Sometimes if a load of recent tweets have been direct replies, these can get filtered out by the JS but still count towards the tweets returned by the user_timeline API.
-
Ah, looks like that is the case. I am receiving 2 responses but the oldest one is part of a conversation we had with users off the back of a normal tweet.
Is there a way to stop this from happening?
Thanks very much for your help so far.
FYI we have changed the URL. Have reflected this in the comment form.
-
-
-
p.s. I have created a test page which only has the Twitter feed as a script to test whether I had other scripts causing an issue, but this does not appear to work either
However, the json is being returned as normal.
Very confused!
Love this script and really want to keep using it.
Thanks.
Grace says: Hi there Tom, I have used this twitter feed quite a few times recently and it’s a god send, so first of all, thank you for that! However I seem to be getting a regular alert popping up these last few days which I’ve never seen before. The alert is:
“error: Connection problem. Check file path and www vs non-www in getJSON request”
Any idea what might be causing that?
-
Hi Grace, has your website changed from using http://www.website.com to http://website.com recently? If you are using absolute paths to the tweets php file, you need to make sure it has the right path with or without the ‘www’.
-
Thanks Tom, that seems to have sorted it. I guess the clue was in the error :p
-
Tom, after this issue was sorted I recently had some changes made on my server, after which I amended the path to reflect the new IP address (the site is still in development). The Twitter feed is no longer loading in, and I saw an error when I viewed the gettweets file in the browser, under which the Tweets do load in. They just don’t show in the feed itself. The error is shown below:
Warning: session_start(): open(/tmp/sess_0a1b1cafe1f59a54bf20d5f2a1b24f05, O_RDWR) failed: Permission denied (13) in /home/artsdevelopment/public_html/themes/theme_artsdev/get-tweets1.1.php on line 1
Warning: session_start(): Cannot send session cache limiter – headers already sent (output started at /home/artsdevelopment/public_html/themes/theme_artsdev/get-tweets1.1.php:1) in /home/artsdevelopment/public_html/themes/theme_artsdev/get-tweets1.1.php on line 1
-
In reference to my last comment, had to take out the session_start() at the very top of get-tweets in order to get the feed to work again. I’m assuming that’s probably a bad thing but I didn’t know how else to get it to work again…
-
Gal Appelbaum says: Hi Tom!
Brilliant solution! I’m curious if there’s a way to get this done with JavaScript only… I’m building a cross platform mobile app and unfortunately I can’t use PHP = You have any solution for this pickle?
-
Hi Gal, thanks. There are JavaScript authentication libraries – check out https://developer.twitter.com/en/docs/developer-utilities/twitter-libraries – but Twitter recommend against using them as it means the app tokens/keys can be seen as they are not processed server-side.
-
Yea, I read that… However the app I’m building doesn’t really have a back end (yet) to satisfy twitters needs…. You’d think they would be a bit more flexible.
-
Reza says: Hi,
Thank you for your great work.
I have a static html page running on FatCow.com hosting. Would this work in my html?
-
Hi Reza, you will need PHP enabled on your hosting in order for the authentication with the Twitter to work.
Carlo Guzman says: Hi Tom!
Thank you for this wonderful work.
I just wanna ask. I keep getting this error. error: Connection problem. Check file path and www vs non-www in getJSON request.
Here’s the link:
http://dadoguzman-portofino.net76.net/w3/tcdap/pagasa.php
What am i missing?
-
Hi Carlo, it looks like the twitter feed can’t see the full path to the tweets PHP file. Perhaps one too many ‘../’ in there or you could try using the absolute path.
Mike S says: Hi!
I got this to work! Thank you so much!
I’m new at this though, and this is probably a super basic newbie thing I should know, but…
I can’t figure out why this is centered on my screen, and why I can’t position it anywhere else. I’ve figured out other things like size, spacing between tweets, fonts, vertical placement, etc… but the horizontal position of the entire twitter feed will only display in the center of the screen.
What should I be changing to do this?
Thanks!!
-
nevermind, I just figured it out… it was a totally beginner thing I should know. Margins set to auto center it.
Frances says: Hi Tom,
I used the twitter feed authentication for search tutorial and got the php file to work. However, after trying the troubleshooting tips on the custom jquery twitter feed post, I can still only get a white bar to display. What could possibly be causing that?
Mia Krone says: Hi! Tom, excellent piece of work. However, I am not able to get the tweets display on HTML, but the get.JSON works like a piece of cake 🙂 Can u please look into this and tell me about the fix
[links removed]
Also what if I want to fetch latest tweets…only for example…if at first 10 tweets come in results…and after that 2 tweets are made…so when the program again hits twitter..it should only fetch the recent 2 tweets.. can u help.
Thanks
Mia Krone
Mia Krone says: Hi! Tom..
First things first… awesome work. 🙂 Best on whole internet 🙂 Can u please tell what if I want to acess media_url..I am using this code but not getting any results…
foreach($response->statuses as $tweet) {
the below code is working…
————————————–
$tweet_text = $tweet->text;
$tweet_date = $tweet->created_at;
$tweet_profilepic = $tweet->user->profile_image_url;
$tweet_screenname = $tweet->user->screen_name;
$tweet_username = $tweet->user->name;
the below code is not working…
——————————————
$tweet_mediapic = $tweet->media->indices->media_url;
?>
thanks in advance
-
Hi Mia, It looks like pictures or videos are embedded in the ‘entities’ node. i.e. tweet->entities->media. Also with pictures, Twitter only recognizes those uploaded direct and not Instagram images etc.
Leo Myers says: Hey Tom! Thanks for such an awesome collection of tutorials on the Twitter API. I have a couple of questions regarding your code, I’ve managed it myself and I’ve got my Twitter Feed working wonderfully.
Would it not be better, or more secure, to write the server-side code in a class?
Would you also be able to show us how to make a “share”, “reply” and “favourite” feature on the tweet list?
Nate says: Hi! I’ve been using your plugin for a while now and I absolutely love it! It’s so easy to customise! Well, except for one thing that I hope you can help with. How do I get the Twitter icon at large or original size, not the normal size? As in https://dev.twitter.com/overview/general/user-profile-images-and-banners, under “Alternative image sizes for user profile images”?
Thanks!
-
Hi! Sorry, found it out quite quickly (thank you Google and Stackoverflow). Where you’ve got
var tweetscreenname = feeds[i].user.name;
var tweetusername = feeds[i].user.screen_name;
var profileimage = feeds[i].user.profile_image_url_https;
var status = feeds[i].text;
var isaretweet = false;
var isdirect = false;
var tweetid = feeds[i].id_str;//If the tweet has been retweeted, get the profile pic of the tweeter
if(typeof feeds[i].retweeted_status != ‘undefined’){
profileimage = feeds[i].retweeted_status.user.profile_image_url_https;
tweetscreenname = feeds[i].retweeted_status.user.name;
tweetusername = feeds[i].retweeted_status.user.screen_name;
tweetid = feeds[i].retweeted_status.id_str
isaretweet = true;
};I added
var profileimage = profileimage.replace(/_normal/g,”);
underneath. That seems to work. Just thought I’d post it here in case anyone else wants to know.
Thanks again, I still love this plugin.
turan says: is it possible to add a pagination to tweets or load more button??
crist says: hi tom
first nice for the tutorial
i’am using opencart 1.5.6.4 with your twitter feed tutorial but in subdomain
with firebug, i found path for /twitter/ is wrong
can u help me?
thank you
Abu says: Great twitter tuts tom, thanks.
carousel and fade look amazing after integration.
you mentioned in the troubleshooting to use absolute path for the php file in $.getJSON. it was working fine until i installed an ssl on my domain and subdomain.
(have a free ssl certificate and which omits www.).
I tried putting https:// without www in $.getJSON but the feed is not loading and firebug shows 500 internal server error
abu khan says: all the twitter examples, like carousel and fade were working on my website until i add ssl to my domain.
now none of the twitter feeds work .
Even changed the absolute path in jason fom
$.getJSON(‘http://www.mysite.com/twitter_api/get-tweets1.1.php’
To $.getJSON(‘https://mysite.com/twitter_api/get-tweets1.1.php’ still the feed are not working, (ssl is only for domain name without www)
keep getting a “NetworkError: 500 Internal Server Error
Matti says: Hi!
My twitter feed is stuck in loading loop. I can’t figure out what is the problem here.
If I try it locally with files on my computer it says this: “Connection problem. Check file path and www vs non-www in getJSON request” and after uploading it to my website host it says no errors, then it is just “loading”.
Also, when I try launching the get-tweets file, it says something like this:
“Fatal error: Call to undefined function curl_init() in /mbnet/m/mathays/twitteroauth/twitteroauth/twitteroauth.php on line 199”
Admir Ireiz says: Excellent tutorial, thank you Tom, I was wondering how I can edit the CSS to look like as in the picture, and how to lift a dotted line on the header and footer.
https://db.tt/3582o4qS
Great tutorial – I’ve got the twitter feed pulling in beautifully and can style everything at will – however I can’t figure out how to pull in images into the feed. Using the default twitter widget, I can place the feed which has option to display/expand the images within the newsfeed. Of course there’s no option to auto-scroll in the default widget which is why I’m here.
any help greatly appreciated!
Grace says: Hi there, I’m using this on a couple of sites in my work, and it has randomly stopped working for no reason I can see. (Both sites are built using concrete5 so there might be something in that.) When viewing the get-tweets file the only thing that shows up now is NULL. Can you think of any reason why that might be happening?
See here for an example: http://artsdevelopment.org/themes/theme_artsdev/get-tweets1.1.php
-
Hi Grace, I would guess a setting has changed on your server somewhere and I’ve seen null issues before on older PHP versions. You may also want to check Troubleshooting tip 4 if you haven’t done so already at:
https://tomelliott.com/php/authenticating-twitter-feed-timeline-oauth/Tom
Mark Wiltshire says: Love it, thank you so much.
I am just re-writting the CSS to get the output I want but fantastic 🙂
Thanks love the script
1 key addition I made was to make the script portable
change the getJSON line to be:
————————–
//Mark Wiltshire Addition for moving this script to different domains
var port = location.port;
port = (port.length>0) ? “:”+port : port;
var url = location.protocol+”//”+location.host+port;
$.getJSON(url+’/assets/php/get-tweets1.1.php’,
————————–
Now I can happily move from dev to live no problem.
-
Hi Mark, Ah that’s great – good solution. I’ll try and update when I get the chance 🙂
Hi, I don’t get any errors but the tweets box briefly flashes and then go blank. Nothing seems to load. Any idea?
http://thewoodenfloor.org/twitterfeed/index.php
Thanks!
Jason
Sean Perry says: Hi Tom, Starting pretty recently tweets with pictures are no longer displaying the twitter text with the picture only the picture displays. Regular tweets display as normal. Any ideas?
Riddhi says: Thanks Tom! This tutorial was very helpful. I’m trying to make it dynamic instead of hard coding the twitter handles, I have used a database in which I store the twitter handles and I am able to get the tweets using those twitter handles in JSON format but they do not appear like they are shown in your demo or like how they appear when we hard code the twitter handle. Can you please help me fix that?
Hi Tom
Great tutorial, it has been running beautifully on
http://www.multisolgroup.com/home for a while but in the last week or two I am getting a popup server error 500 dialog box popup and the tweets don’t appear just the loading screen.
-
Hi Simon, it looks like there’s an issue with the source PHP file – get-tweets1.1.php, rather than the JS script. An internal server error can mean a number of things and you’d need to take a look at your log files to help determine the cause of this.
mtm says: hey – thanks for this. i’m looking for a way to add target=”_blank” to the links in pulled tweets (or something that will create similar behaviour). is this possible?
mtm says: hey tom – thanks so much for this plugin.
i’ve used it on a few sites and it has been working fine but here – http://wpa.matmartin.co.uk/ – i am at a loss as to why it’s pulling nothing. if i put in my own twitter handle, or almost any other, it works fine, but the one that’s needed yields nothing.
are there any twitter settings or other conditions which would cause a specific user to be “immune” to your script?
thanks!
Tom
My site is in Django and I use a python binding to the twitter API – but I would never ever have got my feed up and running on the site without your html and css to provide a strong foundation. Many many thanks.
hi tom, great work but i have a question, how i can remove the retweets or direct tweets but in a separated function, like the links function that use the data outside of ajax
tanks and grate work
neha says: This worked perfectly with my django website too…thanks so much!!
Hi Tom
Have been using your twitter feed utility for some years now on my golfclub website, it’s perfect for our needs (Thank you!). I’m not a developer, so not sure what, if anything, this latest twitter-API tweet means (see below). So my question is: Does this affect your Jquery twitter feed utility? If so, what do I need to do please?
“Beginning July 15th 2019, all connections to the Twitter API (and all other Twitter domains) will require TLS 1.2. This change will affect all formats and tiers of the API (REST, streaming, and webhooks; standard, premium, enterprise, and Ads and Media APIs), as well as the wider Twitter platform.”
https://twittercommunity.com/t/removing-support-for-legacy-tls-versions-1-0-1-1-on-twitter/126648
hi. I have a problem. with the feeds.length in the array of statuses. When I see the .json its show all data but not into a statuses array. then .js (twitter feed-fade-search.js) return error at line 37