Translating...

Cancel

Jason Mayes
1 year agoEditedPublic
How to get your tweets displaying on your website using JavaScript, without using new Twitter 1.1 API Check out code here: http://jasonmayes.com/projects/twitterApi/  - tested in IE 7, 8, 9 and 10, Firefox, Chrome, Safari and Opera :-)

Today I was quite frustrated to find out that the old API on #Twitter was depreciated and the overhead in setting up a system to perform #OAUTH just to get my already publicly available tweets was too damn high (see https://dev.twitter.com/discussions/11564 ). Even worse I couldn't find any simple solutions for #JavaScript . All code examples were server side. So after much thinking I invented the following workaround solution. It makes use of the over bloated widgets Twitter gives us to put on our sites, cuts out all the nonsense, and returns to you your raw tweet text so you can do with it as you please on your website. Instructions on how to get it working with your tweets are in the code comments, just do what it says!  Check out my JS fiddle here: http://jasonmayes.com/projects/twitterApi/  Enjoy!

UPDATE: Due to popular demand, you can now specify how many tweets you want returned which can be any number between 1 and 20, as the third parameter to the function call :-) Let me know if you have any other requests.

UPDATE 2: Due to even more requests, my solution now gets recent tweets for user, favourite tweets, list tweets, or hashtag search!

UPDATE 3: My script now handles writing HTML to an element with an ID of your choice making it even simpler to use and allows you to queue up many requests so you can have many items on the same page doing different things eg one shows recent posts with a specific hashtag, whilst the other shows your latest 5 tweets. 

UPDATE 4: Script now supports grabbing who posted the tweet, their profile photo, and link to profile. Also adds the time they posted at the end. All customizable with CSS to look how you want.

UPDATE 5: You can now specify a custom date formatting function to format the twitter post date however you wish! See comments for how to use.

For further updates please see the project website: http://jasonmayes.com/projects/twitterApi/  all new updates etc will be pushed live here in the future. Questions? Ask below.

#Solution #API #TwitterAPI  
39
+100 THX!!+2
Sam Downie1 year ago
good work Jason you #google genius !+2
Ryan Gledhill1 year ago
Hero!+1
absolutely great ...+1
Adam R Murray1 year ago
This is a great contribution, nice work!+1
Francesco Merlo1 year ago
Thanks a lot!!!+1
Zafer Zent1 year ago
good work thanks Jason.+1
Zafer Zent1 year ago
Jason, How do I adjust the number of tweets ?
Jason Mayes1 year ago
I have been asked this by a number of people, I am editing it now so it supports this. Give me a few mins. :-)+1
Jason Mayes1 year ago
+Zafer Zent Please go to my JS fiddle and refresh and read the comments. see there is now a 3rd parameter which allows you to specify any number between 1 and 20.+1
Zafer Zent1 year ago
successful thanks +Jason Mayes :)+1
Edwin Martin1 year ago
Nice. One minor thing: there is no difference between a tweet and a retweet from someone else.+1
Jason Mayes1 year ago
Nice mod +Edwin Martin 
Jason Mayes1 year ago
Due to requests, solution now gets recent tweets for user, favourite tweets, list tweets, or hashtag search!+1
Jason Mayes1 year ago
UPDATE3: My script now handles writing HTML to an element with an ID of your choice making it even simpler to use and allows you to queue up many requests so you can have many items on the same page doing different things eg one shows recent posts with a specific hashtag, whilst the other shows your latest 5 tweets. +1
Zafer Zent1 year ago
The only thing missing time to tweet :) example : 1 min ago+1
Jason Mayes1 year ago
+Zafer Zent will look in to this, along with name of person. Have had a few requests for this. Shall see if possible. Stay tuned.
Jason Mayes1 year ago
UPDATE 4: Script now supports grabbing who posted the tweet, their profile photo, and link to profile. Also adds the time they posted at the end. All customizable with CSS to look how you want.+2
Ines Opifanti1 year ago
Super awesome, thanks man!+1
Blake Ferm1 year ago
Thank you!+1
Jeremiah Lewis1 year ago
It seems awesome, but I can't get it to work on my page. I get the following error: Uncaught ReferenceError: twitterFetcher is not defined 

Which doesn't make sense. I've tested with the ID I've generated on your jsfiddle and it works fine. I also copied your code verbatim onto my site and it returns the same error above. What am I missing?

EDIT: I figured it out. It has to be placed outside the document.ready
+1
Jason Mayes1 year ago
+Jeremiah Lewis Yes it must be in the global scope as it makes use of JSONP+1
Šime Vidas1 year ago
Wait, you're updating the jsFiddle? How are we supposed to know which revision represents the latest code? You provide a link to the original fiddle, but not to any of your subsequent revisions. Anyways, consider putting the code gist.github.com.
Nathan Mazars1 year ago
Thanks a lot! I've one question, how do you do to change user's color and i would like delete the certificate logo ? Thanks
Jason Mayes1 year ago
+Šime Vidas the latest version is always available at the link above. As I make the latest code the base version! 
Jason Mayes1 year ago
+Nathan Mazars I dont quite understand? The colour of the text can be changed using CSS. I am not sure what you mean by certificate logo...
joris heijne1 year ago
Since the update of twitter it has become much harder to get the tweets that you want. I was searching to get a good example of how it now works with api 1.1. But with this script it's become so much easier. I want to thank you for this. Best Code Since.+1
Jason Mayes1 year ago
Thank you so much +joris heijne please spread the word so people find the link :-)+1
Pontus Dreij1 year ago
Trying to fix time / date of each tweet into Swedish. Tried to change "lang" (before the callback) to sv and se. Also added sv in html lang. But no luck. Any thought of how I can solve this? And thanks for a awesome code!+1
Jason Mayes1 year ago
Good question +Pontus Dreij maybe I can expose the raw date to you as an attribute and you can customize the format to suit your needs and overwrite content? Would that help you?
Jason Mayes1 year ago
PS what should it look like in Swedish?
Pontus Dreij1 year ago
+Jason Mayes if its possible I would like hh:mm dd/mm+1
Jason Mayes1 year ago
+Pontus Dreij I shall look in to this when I get home tonight.
Šime Vidas1 year ago
+Jason Mayes hm, from my experience with jsfiddle, whenever i edit the code and click the Update button, the revision number increments and this is reflected in the Url. I'll look into this when I get in front of a computer
Jason Mayes1 year ago
+Šime Vidas I am not using JS fiddle like this as I am forcing latest to become the default.+1
Gavin Taylor1 year ago
any chance you could swap the prefix on the twitter url to // in your next revision? http:// causes insecure content errors on https sites and I keep forgetting to remove it. Plus it will save you a few more chars too :)

eg. b.src="//cdn.syndication.twimg.com/widgets/timelines/"
Jason Mayes1 year ago
Good spot +Gavin Taylor will do! This was actually on my todo list :-)
Jason Mayes1 year ago
+Gavin Taylor Done :-)
Gavin Taylor1 year ago
ta :)+1
Šime Vidas1 year ago
+Jason Mayes Ah you're doing "Set as base". Didn't know about that. Sorry for the confusion :-)
David Beaumont1 year ago
Not sure why the original comment got removed.. but i modified it a bit last Friday. Whilst the CSS is a bit more complex, the JS is a lot simpler and should continue working if Twitter alter the widget totally http://jsfiddle.net/DJB31st/uuWEh/3/+1
Jason Mayes1 year ago
+David Beaumont This certainly is lighter on the JS and more robust if twitter changes everything, but has a few potential things to consider - which is why I didnt just take the twitter html directly as you have done in the example:

1) You can not specify not to render certain parts eg time posted, user name / photo - a request I got from many people. You could use CSS to hide, but this is a little messy, if it isnt wanted/needed, it shouldnt be in the DOM.

2) Check the markup it produces on your beautiful semantic standards compliant website. It made me cry. They use the <b> tag to make text bold and that is just for starters.

Start editing for the above two points, and a few other tweaks requested, and you end up with my code above :-) If you do not need / care about the above two points, then this is fine of course. :-) Personally I refuse to have <b> tags on my site - mixing style as part of markup makes me not sleep at night. CSS FTW!
+2
David Beaumont1 year ago
Fair points about the <b> tags! TBH i am very much back end and didn't really take the time to consider everything in as much detail as your solution. I've just been shouted at by the frontend guy who took my solution when there was nothing bold in the tweet! The whole needing to auth for each request is just such a headache its a shame we have to even look at these solutions really!+1
Sherin Rafeer1 year ago
hi, i am trying to creat a mobile app using jquery mobile to display a person's home twitter feed. will you be able to direct me where to look into for it? since this doesnt work anymore :"http://search.twitter.com/search.json?callback=?&rpp=";
Jason Mayes1 year ago
Link to my code is in my post - click expand and then click the link +Sherin Rafeer  then read the comments for how to use.
Thomas Greve1 year ago
Thank you for your good work. ;-)+1
Jason Mayes1 year ago
UPDATE 5: You can now specify a custom date formatting function to format the twitter post date however you wish! See comments for how to use. +Pontus Dreij  :-)+2
Matt Thomas1 year ago
Any chance that this could be made to scroll the tweets, like a sports ticker?
Jason Mayes1 year ago
+Matt Thomas That can be done using CSS. I have left "style" to the user so it can be customised to any site. You just need to make CSS styles for it.+1
Blake Ferm1 year ago
Hi Jason. How can I open an "_blank" window from a click on my Twitter handle? the bit.ly works perfect opening a new tab/window. Since the 4th param of the twitterFetcher.fetch() method takes into account both hyperlinks with one boolean, I'm kind of stuck here.

Thanks in advance!
Jason Mayes1 year ago
Update: I am creating an official project page for this. http://jasonmayes.com/projects/twitterApi/ Updates will be posted to this page to have it all in once central place to reference. Feel free to post on G+ for bugs/feature requests etc. Yes I will make it look prettier when I have a moment.+3
Ken Blakey1 year ago
Thanks for this, hopefully twitter doesn't see this as an exploit and close it off.+1
Jason Mayes1 year ago
Most welcome +Ken Blakey :-) Please spread the word!
Lia Insidelia1 year ago
Any idea how to use it on Blogger? Thanks.
Jason Mayes1 year ago
+Lia Insidelia Briefly, you will want to navigate to the Layout tab and click the "Add a Page Element" option and select the "HTML/Javascript" sub-option. One example:
http://www.google.com/support/blogger/bin/answer.py?hl=en&answer=43708
+1
Matthew Overton1 year ago
Very useful piece of code. I did notice that it does not work in older browsers (<IE8) due to an error from getElementsByClassName. Any plans to create a pure jquery version that would be universally accepted?
Jason Mayes1 year ago
I am fixing the ie issue tonight when I get home. I am not using jquery as I want this to be as lightweight as possible and have no dependencies +Mathew overton
Blake Ferm1 year ago
Hi Jason,

When I refresh my page the feed disappears. Any ideas?

Link to the example:
http://int.pushpointmobile.com/blake/marketing_site_040113/index.html

Thanks!
Matthew Overton1 year ago
+Jason Mayes
Thanks!
+1
Lia Insidelia1 year ago
Okay, thanks. :-)+1
Jason Mayes1 year ago
+Blake Ferm works fine for me...
Blake Ferm1 year ago
Thanks for looking in to it, Jason! Much appreciated.+1
Lia Insidelia1 year ago
Is there a way I can make a link out of date posted? It only shows with picture and I removed it, it takes too much space for me.
Jason Mayes1 year ago
+Matthew Overton It now works in IE 7 and 8. Please refresh the site or the JS Fiddle to get latest code.
Jason Mayes1 year ago
+Lia Insidelia I am not sure I quite understand? You want to only display the dates?
Matthew Overton1 year ago
+Jason Mayes
Nice work. You may want to look into the tweet count in IE 7 & 8 as well. It is defaulting to 20.
+1
Jason Mayes1 year ago
+Matthew Overton Fixed. See v7
Matthew Overton1 year ago
+Jason Mayes
Looks good. Thanks again.
+1
Jason Mayes1 year ago
+Blake Ferm You need to ensure the javascript you write is executed AFTER the DOM has been constructed. You need to wait for document.ready event and then use my function. Otherwise it wont be able to find the HTML element you are trying to inject content to as it doesnt exist yet! This should fix your issue. One way to do this is simply move my js function call to bottom of page right before the closing </body> tag and import it there.
Blake Ferm1 year ago
+Jason Mayes You are a Jedi. Thank you.+1
Jonathan Le1 year ago
Thank you soooo much for this! Awesome work! Btw is there a way to distinguish between Tweets and Retweets?
Jason Mayes1 year ago
Not yet. I'm working on it. Doing this is my free time (which there is not much of!) So stay tuned on the official project website as it will be there when it is available. +Jonathan Le +1
Lia Insidelia1 year ago
I have last tweet showing with a date "Posted x hours ago". I would like that date to be a hyperlink to my Twitter account - like it used to be in an older version. In your version the only available link shows up with an image (avatar) I don't want.
Jason Mayes1 year ago
+Trevor Wilcox you would have to overwrite link behavior using JavaScript eg prevent default and then do your own thing.+1
Jason Mayes1 year ago
+Lia Insidelia yes you can do this - see the advanced example which allows you to customize date output. You could set this to return link instead of date+1
Richard Shea1 year ago
Great work mate, hopefully you can add an option to exclude re-tweets (exclude_rts=false) as it works on the official widget, that would be perfect.+1
Jason Mayes1 year ago
Working on it +Richard Shea +1
Jason Mayes1 year ago
Oh I see. I shall have to check tonight :-) thanks for clarifying.
Lia Insidelia1 year ago
But I want date to be showed, I would like it to be also a hyperlink. And I'm not that advanced in PHP or JS. :-( Well, thanks for replying.
Jason Mayes1 year ago
+Lia Insidelia Your code would be something like this. Change "your_id_here" to your widget id, and then change the url at the bottom to your site

twitterFetcher.fetch('YOUR_ID_HERE', 'tweets', 5, true, true, true, dateFormatter);

// For advanced example which allows you to customize how tweet time is
// formatted you simply define a function which takes a JavaScript date as a
// parameter and returns a string!
// See http://www.w3schools.com/jsref/jsref_obj_date.asp for properties
// of a Date object.
function dateFormatter(date) {
return '<a href="http://www.yourwebsite.com/">' + date.toTimeString() + '</a>';
}
Lia Insidelia1 year ago
Ohhh, thank you!!! :-)+1
HI Jason - really good job, but you might like to note it doesn't work in IE7 or IE8 (I know, I know!) due to those browsers not understanding getElementsByClassName.  It can be made to work in IE8 by substituting querySelectorAll(".e-entry-title") for getElementsByClassName("e-entry-title") - and the other two instances - but that seems to break the "number of tweets" parameter.  (IE7 doesn't support querySelectorAll either).

Thought you might like the feedback!

Cheers,

R.
Jason Mayes1 year ago
+Richard Lockwood It does support all of these browsers - I am guessing you are not using the latest version of my code (v7 at time of writing this) see http://www.jasonmayes.com/projects/twitterApi/ I patched this yesterday. Also querySelectorAll is not supported by IE7. My new code supports 7+. Thanks for the feedback though :-)+2
Ah - you're right.  I only downloaded it yesterday, but I've got v.6.0 - let me grab the new version.  Thanks!+1
You sir, are a star.  :-)+1
Yong Hee Lee1 year ago
thank you!!!! it's really great!!!+1
James Leonard1 year ago
Brilliant - thank you Jason - I was starting to pull my hair out!
I am looking to recreate a rotating feed that scrolled through my x most recent tweets. Any chance you will be adding something like that into this?Alternatively how would I specify say the 3rd most recent tweet and display it by itself?
Thanks again!
+1
Jason Mayes1 year ago
+James Leonard This is probably not something I will add to this component as it a style thing mainly. I want this to be as flexible as possible so left style / behaviour to the user meaning it can be anything you want it to be. It would be quite simple to do with say some CSS and JavaScript you just need to hide the nth tweet and then cycle through. If you use CSS transitions it would look real sweet. :-) if there is enough demand for it i can make an example that does this 
Daniel Lieske1 year ago
I'm quite a noob when it comes to coding. I've got this question: The tweet data seems to be rendered into a list item so that a bulletin point shows up before the tweet when I create a DIV element called "tweet". I was able to get rid of the bulletin point via the global list element style. But how do I get rid of the indenting? Is is possible for me to change the script so that the tweet data gets not rendered into a list element? I only want to display one tweet at a time and don't need list functionality anyway... 
Jason Mayes1 year ago
+Daniel Lieske No problems! Indeed for semantic reasons I used a list as it is a list of tweets. All you need to do in CSS is set the padding and margin to something different. eg

#tweet ul, #tweet ul li {
  margin:0;
  padding:0;
  list-style:none;
}

My component will always render in to a list for semantic reasons described above, but with simple styling you can make it look however you want.
+1
Daniel Lieske1 year ago
Ok, I found the <li> Tags in the Script and deleted them. However, the indenting did not disappear (the bulletin does though...). Maybe the indenting is caused somewhere in my website code that wrapped around the div. Anyway, if you've got an idae about this issue please let me know. Great script by the way! Was happy to donate to someone who saved my a lot of headache with all the Oauth crap!
Daniel Lieske1 year ago
Oh, didn't see your reply. Thanks a ton!+1
Jason Mayes1 year ago
+Daniel Lieske No problems and thank you for contributing to its development :-) It is most appreciated.
Jason Mayes1 year ago
+Daniel Lieske Can you link me to your page?
Daniel Lieske1 year ago
Just have to upload my temporary index file. One second! (BTW, your realtime support kicks ass!)+1
Daniel Lieske1 year ago
Ok, here's the link:

http://wormworldsaga.com/index_temp.php

Pasted the style snippet into the global css file. Bulletin is gone through that but indenting not.
+1
Jason Mayes1 year ago
You applied my styles to your li but not the ul. Please see my code snippet above. You need to apply new margin/padding to UL element too +Daniel Lieske  it then looks as expected
Daniel Lieske1 year ago
You are referring to the code I added to the global li element at the top of the Stylesheet document, don't you? If you scroll down in the css file you'll find your original code snippet there, too. Sorry, I'm a total loser when it comes to CSS. Maybe I'm making a silly mistake here. 
Jason Mayes1 year ago
Oh found the problem. Your div is called #tweets not #tweet change my code snippet to say #tweets +Daniel Lieske 
Daniel Lieske1 year ago
Haha, that's it! Works like a charm. Thanks SO much! Another donation inbound! :)+1
Jason Mayes1 year ago
+Daniel Lieske Thank you so much! :-)
Jason Mayes1 year ago
+Daniel Lieske Just looked at your site - you should comment out the following lines as you dont use them - they will just make errors as just example code:

twitterFetcher.fetch('347099293930377217', 'talk', 5, true, true, false);

twitterFetcher.fetch('345690956013633536', 'tweets2', 5, true, false, true, dateFormatter);

Notice how they are looking for ids of talk and tweets2 - which wont exist on your site!  You just need the first one which you edited correctly. :-)
Jason Mayes1 year ago
PS your artwork for the site is mindblowingly awesome +Daniel Lieske :-)
James Leonard1 year ago
Got it - Ill give it a go - thanks again for putting this out into the wild ! :-)+1
M. Głowacki1 year ago
Works perfectly, thanks! It's good to have full css support back.
We should make a script file name contest, I've given much thought to mine and it turned out to be twitterdecrapinator.js
+1
Jason Mayes1 year ago
Update 8:  v8 is now available with support for not returning retweets! Also improved efficiency of code a bit too :-)+1
Jason Mayes1 year ago
V9 of my #JavaScript #Twitter #API solution  is now available! Get it whilst its hot (supports custom functions!) http://jasonmayes.com/projects/twitterApi/+1
Mike McLoughlin1 year ago
+Jason Mayes This has seriously saved me oodles of time - many thanks for that. The only thing I can see that is needed is a cache facility - so the twitter query quota is not busted. This is especially an issue when used on landing pages of large Colleges like mine.+1
Jason Mayes1 year ago
+Mike McLoughlin Thanks for the feedback! Feel free to cache the result if you wish - latest version allows you to specify a function to call when data is ready, so you can take that and cache it using your backend if you wish and only invoke the JS after a certain time period.+1
Jason Mayes1 year ago
Update: 3D CSS Twitter Cube Using JavaScript API demo
An extension to my original post (http://www.jasonmayes.com/projects/twitterApi) to show how flexible the component is. You can make it look however you want just using CSS. Same component, different style. Here we render tweets in a 3d Cube. The only limit is your imagination. See it in action here: http://codepen.io/jasonmayes/pen/rDyqj
Working like a charm!
Ouch! Talked too early, IE8 is giving me a unknown error at this point:
f.innerHTML=d+"</ul>"

Line 17 Character 202

Happened when retrieving only 1 tweet and trying to write the result into a div called tweet. This is my call:
twitterFetcher.fetch(widgetID, 'tweet', 1, true, false, false,'',false);

Any idea?

PD: It's a joomla 3 site. Using V9.
Jason Mayes1 year ago
+Ángel Manuel Marqués Ruiz Will look in to this tonight. Can you link me to your test page where this is occurring so I can see.
Pasquale Errico1 year ago
I have used your solution and it works perfectly!
But how can i do for limit the number of letters of the tweet?
Thanks a lot!
Jason Mayes1 year ago
You would have to use the advanced example number 2 and in your custom function, trim the tweet HTML yourself +Pasquale Errico
Jason Mayes1 year ago
+Ángel Manuel Marqués Ruiz I can not replicate your issue, I think it is something to do with your code, not mine.+1
Karen Castillo1 year ago
thanks Jason! Will try on one of our sites!+1
Jason Mayes1 year ago
+Karen Castillo no problems! Good luck!
+Jason Mayes yeah, I'm sure the problem is with my code. I'm just trying to figure out what's the problem, apparently if I disable urls and hashes it works. I wonder if mootools may be the problem. Gonna try disabling some things.

Anyway your code is awesome. Thanks! :)
+1
Pasquale Errico1 year ago
+Jason Mayes i have tried to use a function but the string passed by javascript contain all the html necessary to visualize the tweets correctly...
if i use substr with a character limit, it also cuts any html content in the string and not good ...
You can not see the posts as seen on twitter?
thank you very much
Jason Mayes1 year ago
Yes you will need to deal with HTML boundaries so not to create mal formed HTML. I might do this myself at some point but will take time to write +Pasquale Errico
Pasquale Errico1 year ago
+Jason Mayes Unfortunately, at this time I do not have too much time to devote to this problem :(
Jason Mayes1 year ago
Same here I am doing this outside of my day job.
Bill Phelps1 year ago
Many, many thanks Jason. Beer money on its way... 

Any chance of a parameter corresponding to "data-screen-name" ? That would save having to create a widget ID for each of my clients.

(And if you're really bored, it would good to be able to pass some of those other parameters across, too - but I'm probably pushing my luck there!)

But you've earned hero status already, without any of that...
+1
Jason Mayes1 year ago
+Bill Phelps Thanks so much :-) I am not sure I quite follow with regards the data-screen-name request? Can you elaborate. Twitter widgets only allow you to set up a widget per hashtag or user_name so it has to be done twitter side. Not via component for that setup part.
Bill Phelps1 year ago
At  https://dev.twitter.com/docs/embedded-timelines it says "you may override specific options on the client side by customising the embed code" - and it then goes on to document all the override parameters.

So, once I've set up a widget ID on my own Twitter account, I can use that to embed timelines for any username. This works a treat using their embed codes.

I was just wondering if your code could do the same trick if we were able to feed it the same parameters? Or have I failed to grasp something here? (It has been known to happen!)
Jason Mayes1 year ago
+Bill Phelps You can use any of the widgets they provide with my component. The problem with the twitter widgets is that you can not theme them as they are in an iframe. With my component I strip all the style and leave style to the user so you only have to worry about the CSS. the JS and HTML are taken care of for you automatically.
Bill Phelps1 year ago
+Jason Mayes
 And it's that styling flexibility that I appreciate.

I'll resign myself to having to create a widget ID for each client. Simplest solution is to get them to do it for me, following your instructions.

Thanks
+1
Great work man, am going to give it a go. Wish you all the best in the future. Cheers :D+1
looks awesome - will give it a try later. cheers+1
Adnan Huda1 year ago
Hi there, just wondering how would I be able to display only the latest  tweet. I tried refreshing the website but it showing previous tweets , along with current tweet even when I limited the script to show 1
Jason Mayes1 year ago
Have you got a copy of my latest script? version 9? This definately works see http://www.jasonmayes.com/projects/twitterApi/
Adnan Huda1 year ago
Definitely using your latest script. This is happening when I set the page to automatic refresh. 
Jason Mayes1 year ago
I can not replicate your problem, I can only assume it is something incorrectly typed as I have not had anyone else report this issue either. Can you link me to your page with the script on?
Adnan Huda1 year ago
I haven't uploaded this page yet but this is on local machine. 
Adnan Huda1 year ago
If you can try set your page to automatic refresh in html. This work when manual reloading. 
Adnan Huda1 year ago
Thank you for your script. Awesome engineering. +1
Marc Remblance1 year ago
Awesome work Jason. Will be making a donation. Quick question - Is is possible to format/remove the text 'Posted' from the tweet output? So the date for example, is just shown as eg; 4 days ago?

Many thanks buddy
+1
Jason Mayes1 year ago
+Marc Remblance Yes see my advanced example using a custom date function - you can have it formatted in any way you want if you write your own function. It will pass you a JavaScript date, and you can just output it in your own format.
 Thanks for donation in advance :-) Appreciated!
Marc Remblance1 year ago
Ok, that's great. Many thanks.+1
Hi Jason, really nice script! New twitter api 1.1 is anoying with JS auth problems. Just 1 question: Is possible get how many followers have this account?

Thanks for sharing that pluggin :)
+1
Jason Mayes1 year ago
+Marc Masoliver Vial Not via the data exposed by the widget, so no. You would have to use a proxy server to grab the raw HTML from your public profile and parse the data returned to extract your follower count if you didnt want to use OAUTH.
Thanks for the info. You are so fast!+1
Thank you! 
Evgeny Sinitsyn1 year ago
Thank you for this great script.
Are there sources (not minified) available?
+Evgeny Sinitsyn i think you can run jstidy or a beautifier over the minified code to unwrap it. 
Jason Mayes1 year ago
I shall be putting non minified version up shortly.
Oksana Synytska1 year ago
Hi Jason! I downloaded twitterFetcher_v9, unpack it and opened example.html in browser but no tweets showed up, just headers Query 1... Query 2... Any ideas?
Jason Mayes1 year ago
+Oksana Synytska Yes you can not run JavaScript on local computer via file:// as URL as your web browser security settings won't allow it. Put it on a webserver so you acccess the index.html via http:// and it will work eg localhost or your actual website
Evgeny Sinitsyn1 year ago
+Jason Mayes thank you. Keep us posted.
Mark Mailer1 year ago
Hi Jason, any chance of being able to include the tweet id (class="data-tweet-id") in the tweet output - hidden div or some such would be perfect! Great work BTW+1
Oksana Synytska11 months ago
Thank you Jason!+1
Tineke Timmerman11 months ago
Thanks for this great solution Jason. The new API broke a lot of my clients websites.
I was wondering in what way I could find the data-widget-id of twitter accounts other then my own? I am not looking forward to contact all my clients to ask them to create that widget in order to get the ID...
+1
Jason Mayes11 months ago
You would have to create a new widget and tell it to point to a different username for each user you wanted (under twitter widget settings when you create) +Tineke Timmerman
Tineke Timmerman11 months ago
Thanks for this great solution Jason. The new API broke a lot of my clients websites.
I was wondering in what way I could find the data-widget-id of twitter accounts other then my own? I am not looking forward to contact all my clients to ask them to create that widget in order to get the ID...
+1
Tineke Timmerman11 months ago
woops, sorry, I refreshed and posted again. I just figured that by replying to a tweet of the specific account, the ID is in the URL
Tineke Timmerman11 months ago
Jason, you are right, the reply url didn't work, i just used your solution and it totally works now. Thanks so much!+1
Jason Mayes11 months ago
+Tineke Timmerman you are most welcome! :-)
Tineke Timmerman11 months ago
Yet another question you might be able to help me out with.
It works perfectly by I am trying to connect it to a jQuery newsticker.
The ticker works when I just put plain code it (<ul id="twitter"><li>test</li><li>test2</li></ul>) but not on the twitter feed.
I had it working before with my old solution of pulling twitter in (rss), but somehow it doesn't want to work with your code. Possibly has to do with running order?
http://harmoneymusic.com/
Phil Dews11 months ago
Hi Jason am loving this script many thanks it's working like a dream on my site!
just a quick question though i want to display my last 5 tweets at timed intervals that fadein and fadeout currently I am displaying just the 1 tweet as shown with this script...
function handleTweets(tweets){
    var x = tweets.length;
    var n = 0;
    var element = document.getElementById('twitterwidget');
    var html = '<ul>';
    while(n < x) {
      html += '<li>' + tweets[n] + '</li>';
      n++;
    }
    html += '</ul>';
    element.innerHTML = html;
}
not got a clue on how to change it up though! any help would be greatly appreciated
All my Best
+1
Jason Mayes11 months ago
You can grab the last 5 tweets and output them as above and then use css to make the UL only big enough to show 1 of them (set width and height of li and the ul and then set ul to be overflow:hidden). You can then use css animation to move the li around so they animate in. Alternatively you can do this in JavaScript too if you wish. Just Google a tutorial on CSS animation or JavaScript animation (eg using requestAnimationFrame is your best option so it stays smooth).+1
Phil Dews11 months ago
+Jason Mayes Awesome cheers for that have played about with my CSS but trying to get my head round with the CSS animation have a look if you like its gekkodev.com
Jason Mayes11 months ago
I highly recommend going through a CSS animation tutorial as it will explain it far better with videos and images than I can put in a comment here. If you are more comfortable with js then maybe use this :-)+1
Phil Dews11 months ago
+Jason Mayes Cheers have asked the question on stackoverflow and adding it to jsfiddle will get an answer soon! if you like I will add the JSFiddle here once i get an answer so others can use it!+1
Phil Dews11 months ago
+Jason Mayes I got it working! here is the fiddle for people wanting this.. http://jsfiddle.net/RThdu/3/ also to see it in action here is what it looks like on my site.. https://www.gekkodev.com/
Please excuse the Blatant #Spamming  
+1
Jason Mayes11 months ago
Glad to see you got it working :-)+1
Phil Dews11 months ago
Cheers it's working like a beauty! thanks again +Jason Mayes +1
wayne hooper11 months ago
Cracking script thanks! One question though...
When I exclude the image from the feed, all the other links render as plain text rather than a link (for example the tumblr links in the tweet)
http://www.inkdrawn.com
Thanks
Kenneth Guild11 months ago
Just have to say thanks! I'm developing for sharepoint 2013 and was having no end of bother getting round the api update .. works like a charm :)+1
Hello Jason! Thanks for the API. I'm using it and  want to learn that I can get topic header of user ( favourite tweets, list tweets, or hashtag search ) of tweets I shown as a data. is it possible ? is there any way ?
Thanks.
Jason Mayes11 months ago
Not that I am aware of if I understand you correctly +mustafa kaan demirkol
wayne hooper11 months ago
Hi Jason. Did you have any suggestions for my issue a few comments up? Thanks again.
Jason Mayes11 months ago
+wayne hooper This is because in your code you have set:
twitterFetcher.fetch('357839500694654977', 'twitter_update_list', 3, false, false, true);

but you actually want:

twitterFetcher.fetch('357839500694654977', 'twitter_update_list', 3, true, false, true);

Sorry your message got lost in the replies!
wayne hooper11 months ago
+Jason Mayes Thanks for the reply Jason. I thought I'd tried that combination of trues and falses, but hadn't as now all working fine. Thanks again for the help.+1
Sorry about I couldn’t have explained clearly. I asked to fetch the USERNAME which I created widget of user timeline for fetching and publishing on my web site. For example; I want to use “@badboys” as username and to print out user timeline of this user on my website. I had created my twitter widget on my twitter account and I had a Widget ID to use in the twitterAPI. Everything ok. The API run and I can fetch twitter timeline. But also I want to use “@badboys” as a title on top of my web page and it must be fetched automaticly by a programme. Is it possible to be able to do this? Is there any chance for I can this. I would be so glad if you help me. Thanks again.
Jason Mayes11 months ago
You can only get names from the tweets in the timeline as far as I know.
Thank you for the reply.+1
Jason Mayes11 months ago
UPDATE: Version 10 is now available - supports retweeting / favs / replying to tweets. http://www.jasonmayes.com/projects/twitterApi/+1
wow! this is great, many thanks.+1
Rebecca Giddings10 months ago
Forgive me if I'm missing something obvious, but I just can't get this to work for me.  Even your example documents won't display the twitter feed for me.  No error or anything - just blank space.  I'm working on Windows 8 and have tried it on multiple browsers.  (I'm a self-taught coding newbie, so be gentle!)  Thanks!  If I can get it to work, I think it's exactly what we need for our site.
Jason Mayes10 months ago
+Rebecca Giddings Can you link me to your website with the code on so I can check what you are doing wrong?
Marc Remblance10 months ago
?? Seems to have stopped working? Even on your site??
Rebecca Giddings10 months ago
Thanks for getting back to me!  I actually found a way to make the Twitter widget work for what I need.  Thanks again!+1
Jason Mayes10 months ago
+Marc Remblance Appears it is a bigger issue see https://twitter.com/search?q=widget%20broken&mode=relevance&src=typd  No ones widgets are working - even the twitter ones. It appears twitter is down. Once it goes up again it should work again as normal.
Jason Mayes10 months ago
+Marc Remblance its all fine again now. Twitter fixed their issue.
Marc Remblance10 months ago
Cheers buddy. And, again thanks for the great work!!+1
Jason Mayes10 months ago
+Marc Remblance No problems!
Jason Mayes9 months ago
+Flavia DSouza My guess is that you are not running it on a webserver. If you run the file from your hard drive eg the browser url is file:// most browsers block javascript execution.
Bhakti Patel9 months ago
I want to get 3 latest stories of the site. I have URL of the site. But How can I get the ID mainly first parameter in the script?

Thanks in advance
Jason Mayes9 months ago
+Bhakti Patel This is for bringing in your Twitter tweets, not your website blog entries.
Bhakti Patel9 months ago
If I want to get tweets then how can I get the ID?

Thanks for quick response.
Jason Mayes9 months ago
+Bhakti Patel The instructions are in the comments of the code - you just have to go to your twitter account on twitter.com, go to settings, and then widgets, create a new widget and look at the id of the widget (which you can see in the URL when you open it to configure).
Bhakti Patel9 months ago
Thank you so much. +1
Hi Jason, i'm using your twitter api fetcher but i have a huge problem, I'm from Argentina and i need some texts in spanish :( there is a way to use a templating to change all the html without touch your js? thanks!
Jason Mayes9 months ago
+Dientuki - Juan Farias You would have to use one of the examples which allows you to define a custom function to output the raw data in whatever format you wish.
Jason, i've saw the example and don't work for me :( because the raw data is html and i can't change that.
Jason Mayes9 months ago
Yes, you can. You will have to strip it yourself eg by getting the text rather than the HTML. An exercise for yourself. Eg if you are using something like jQuery you can simply do .text() to grab just the text and it strips the html out.
Adam Turtle9 months ago
Is there an unminified version available? I'd like to make a few adjustments to it, but it's difficult to navigate all the minified function names. Would also be great to share this on Github to get other people involved. Great work so far!
Ezequiel Eñiguez9 months ago
Hi!, I have this error.  TypeError: f is null, help pleace
Jason Mayes9 months ago
+Ezequiel Eñiguez Something you have coded is wrong. My example works fine. I suggest checking your code you edited / added as I have no idea what you did without looking at it.+1
Ezequiel Eñiguez9 months ago
Forget already solved thank you very much+1
wayne hooper9 months ago
Hi Jason. Back again :) 
Is there a way to just have the twitter image and tweet (with hyperlinks), nothing else (@name, twitter name, favourite, reply, retweet etc.)?
Thanks
Wayne
Jason Mayes9 months ago
I think the minimal in my solution allows image, name and tweet. you would have to use some simple css to hide the name or use a custom function as shown in the advanced examples to print out exactly as you wish.+1
wayne hooper9 months ago
Of course. I forgot about hiding with css. changing the element to width:0% and display:none have achieved what I'm after.
Adam Austin8 months ago
Hey Jason. Awesome job and everything. The code you put up on codepen works for me, I messed around with it on codepen. Though, the example file I downloaded with the library doesn't work. It just hangs for a moment and then nothing happens. It's a little bit frustrating, but I'm assuming it's me being stupid. I just can't get it to work on my end.
Jason Mayes8 months ago
+Adam Austin Probably because you are running the file in your browser using the file:// protocol. It must be accessed over http:// - make sure its on a web server eg install apache locally and go to http://localhost/file.html and it will work
Dylan Cuffy8 months ago
I'm slightly considering using this tool on my Referata wiki, The Dixwell Dossier. I'm not on Twitter, though--and don't get me started on Facebook.

I'm only into the search results part of this thing. The question is, how do I use it without having to log in/sign up?
Jason Mayes8 months ago
+Dylan Cuffy You can not. You need a twitter account (even if you dont use it) to generate  widget id.
Dylan Cuffy8 months ago
+Jason Mayes: Thanks for the clarification. With that, guess I'm stuck with G+ widgets in the meantime. (And that's not necessarily a bad thing.)
Roelant Muller8 months ago
+Jason Mayes : Great work! However, every time a user opens a page a request is going out. This maybe fine, except I'm caching a lot of stuff on our Intranet, where are over more then 200 people make a lot of request to twitter.. So i was thinking of caching this in my usercontrol (ASP.NET), but off course this cannot be done because javascript get's executed.. So I was thinking of doing the request (the url to https://cdn.syndication.twimg.com/widgets/timelines/... ETC) in my code, which gives me a response. Is there a way to handle this reponse so I can cache the twitter results?
Jason Mayes8 months ago
Why would you not just use the Twitter Api? The only point of this component is to offer a JavaScript only alternative. If you are going to use back end code then just use the official twitter api and cache that if you so wish.
Roelant Muller8 months ago
True.. but this one was so easy to use :)
But it got it working: I just call the reponse as a javascript function! 

Once more; great work!
+1
Jason Mayes8 months ago
+Roelant Muller Haha well I cant argue with that. :-) It frustrates me so much when people make things that are crazy hard to use when they do not need to be. I am glad the simplicity of this component was of use to you :-)
Due Nguyen7 months ago
Hey Jason, I put your code over local http it does work but only for #API.  How can I search using another hastag beside #API.  I looked at the fetch function it does not have option where I can input another hastag or multiple hastag.

Thanks for the great work!
Cheers
Jason Mayes7 months ago
You need to make a twitter widget that searches for hash tag you want and then use that widget I'd with my component. See the comments in code how to generate an id.
Dan Williams7 months ago
Really good stuff Jason, been looking for something like this for ages!
Marc Remblance7 months ago
Hey Jason,

All works great, but I get this error thrown in my dev toolbar, only just popped up - Cannot set property 'innerHTML' of null

thanks
Jason Mayes7 months ago
+Marc Remblance The DOM element doesnt exist. Ensure the script is placed right before the closing body tag. Or maybe you have the ID incorrect for the element you are rendering it in to?
Marc Remblance7 months ago
Hi Jason,

My bad. I had a stray element I was no longer using!! Quick question, with version 10, how do we hide the retweet/reply etc.. links if required?

I currently have this -

twitterFetcher.fetch('352711627528880128', 'twitter-fetcher-tweet', 1, true, false);

which is not hiding them.

many thanks
Jason Mayes7 months ago
+Marc Remblance Like this:

twitterFetcher.fetch('352711627528880128', 'twitter-fetcher-tweet', 1, true, true, true, '', false, undefined, false);
Zafer Zent7 months ago
Hi Jason my last tweets date format I can't timeago format (x min ago).  I do want to see x min ago.
Jason Mayes7 months ago
I have no idea what you have done Zafer from that comment. By default it is like this so unless you have changed something it will use the Twitter terminology.
Raghav Chandak5 months ago
How I can do integration of tweets on my site which deals with multiple dynamic keywords and not a fixed set of keywords?
Tineke Timmerman5 months ago
Yet another question Jason... I just noticed that even thoug I have set "show images" to false... they still load (they don't show, but are there which I figured out after doing some page performance tests).. Is there a way of not pulling the images in at all?
Jason Mayes5 months ago
Unfortunatey not without rewriting the component. As I wrote it pretty fast I use a DOM node that is never added to the page to store returned html (so i can use things like getElementById) but it appears browser is trying to be clever by pre fetching images! Would need to rewrite using regular expressions to fix that. +Tineke Timmerman
Tineke Timmerman5 months ago
Ah, I get it. No probs, happy to use ur code.
It's just that after finishing a website it's always such a challenge to get all the addons down so the pageload doesn't get affected by the twitter,google, facebook, instagram etc clients like to have all on one page... 
Jason Mayes5 months ago
Its the same "weight" as the original twitter widget For assets downliaded
Ed Valenti5 months ago
I'm not very good with code - novice coder (I'm a designer) and I'm trying to add my most recent tweet to my website with no luck. Can you help at all?
Jason Mayes5 months ago
Link to website with the code on would help.+1
Ed Valenti5 months ago
Here is my test page and the twitter code is at the bottom: http://www.ev2.me/test/
Jason Mayes5 months ago
I cant see anywhere on the page where you include my JavaScript code...
Ed Valenti5 months ago
I would simply add that to the head correct? I have tried that and it didn't seem to work. Perhaps I'm doing it wrong?
Ed Valenti5 months ago
Should I be using the HTML / CSS / Java in my type of site for the best results?
Jason Mayes5 months ago
You must place javascript just before </body> tag  or listen for the document ready event - your DOM must have been created before you can call my component as it injects tweets into the DOM. If it is not ready yet, it will fail of course.
Ed Valenti5 months ago
Not all too familiar with the DOM or Document Ready Event? Can the section or <div> created for twitter presently not be used?
Jason Mayes5 months ago
Basically just put my JavaScript just before the closing body tag with the correct id of the HTML element you want the tweets to be written to and it will work when run from a webserver. Make sure you are not accessing the file via file:// in the browser. It must be  http://
Ed Valenti5 months ago
Am I using the java from here: http://codepen.io/jasonmayes/pen/Ioype
Jason Mayes5 months ago
+Ed Valenti Just to clarify - it is JavaScript, not Java ;-) Yes that is the correct code to use - but when I checked your website I could not see where you included it anywhere??
Ed Valenti5 months ago
I added it here but it's showing as code at the bottom of the page not in the <div> created for the twitter data. Link: http://www.ev2.me/test/index2.html
Jason Mayes5 months ago
+Ed Valenti You need to surround the code you pasted with <script> and an </script> tag  to tell the browser that it is code and not text
Ed Valenti5 months ago
Okay so I added the <script> tags. Do I have to direct this JS to the <div> created for the Twitter post itself? If so how? Also, do I now need to place my twitter id into your JS and also change the number of posts?
Jason Mayes5 months ago
+Ed Valenti Please read the comments in my code - specifically look at example 1. Which looks like this:

twitterFetcher.fetch('345170787868762112', 'example1', 1, true);

The first parameter is the Twitter widget ID. You will get this when you create a widget on twitter. The second parameter is the id of the HTML element you want to write the tweets in to, and the third parameter is the number of tweets. In this case it is already 1 and just leave true set to true. That should be all you need to get going.
Nikola Kljaic5 months ago
HI Jason do you consider adding interval for refreshing tweets?
Jason Mayes5 months ago
+Nikola Kljaic No as many people would probably abuse it and do something silly like refreshing every minute when there is no need. Ask if you really need to  update it every minute. Probably not as most people dont spend longer than a few mins on a webpage anyway. So upon page load is just fine.+1
Nikola Kljaic5 months ago
Ok. Thanks. Great stuff :)+1
Francisco Corrales3 months ago
Great !
Request:  implement pagination !,  so we can add a button that says 'Load More' and loads the next  `x`  tweets each time. And those tweets get appended to the end of the container.
This is pretty much like the actual 'Timeline' widget from Twitter.
+1
Azher aLI2 months ago
very nice work sir can u plz tell me how to show followers name of the user
thanx
Jason Mayes1 month ago
The twitter username?
Edward Ramos1 month ago
Thank you so much for this great solution! I have one question. How do I get hyperlinked hashes and handles to open in a new window?+1
Jason Mayes1 month ago
+Edward Ramos You would need to use the advanced example and modify it to add a 'target="_blank" attribute to every hyperlink contained in the result. You could probably do this quite easily with a regular expression global replace eg search for <a href= and replace with <a target="_blank" href= or similar...
Edward Ramos1 month ago
Thank you for the quick reply!+1
Daniel Nguyen1 month ago
Hi Jason,
Thank you for your great solution. @ Work, I ve been restricted access to the API url using OAuth. And i'm now using your solution client side to customize tweet display.

I am using the parameter true to show the retweet and tweet from a given user.
Yet do you know if theres a (future) way to get info on the origin @user of a retweet, my need is :

If @user1 is retweeting @user2, the twitter API (server side code implementation)  is showing :
"RT @user2: blabla this is the foo bar tweet from user2 retwetted by user1 blabla" 

(RT <=> Retweet)
My client wants me to display this "RT @user2" coming before the tweet text.

Thanks for your help
Daniel
Jason Mayes1 month ago
+Daniel Nguyen Thanks for the kind words and glad it is has helped you. You may want to play with the advanced example which allows you to access the raw stream of data I get back so you can manipulate it directly. There may be some data in there which I ignored to help you chive what you want - print it to console and see.
Daniel Nguyen1 month ago
+Jason Mayes Great. Thanks a lot !+1
Mike Ridyard1 month ago
Hi Jason, Not sure if I'm doing something wrong but I can't seem to separate the tweet poster's name and their @username. It's all mixed into the same href. Is this intentional as it's proving impossible to style? Also, have you seen any sites that use your code in a really impressive way?
Jason Mayes1 month ago
+Mike Ridyard Twitter might have changed something. It used to be. You might need to use the advanced example to parse the data yourself if it has changed. A few people have shown it in use on their sites if you search twitter for twitterFetcher but I do not have links to hand - one was quite cool for a fantasy game site with some really breathtaking artwork.
Mike Ridyard1 month ago
Thanks for the reply. I have had to resort to a hack to split name from handle. See fiddle: http://jsfiddle.net/Cumbria/VzLSL/ the CSS is at line #44 (#twitter .user span span:before) BUT it's looking fabulous now. Thanks for all the hard work.  Oh, and btw I hardcoded FontAwesome icons into the JS. Will send you a link when it's live.+1
Shubham Kanodia3 weeks ago
Hey Jason, thanks a ton for this tool ! Was just wondering if there is a way for images to display as images rahter than "pic.twitter" links. Am i missing something?
Chris Goering2 weeks ago
Hi Jason-
I'm trying to implement this with the option to callback a function when the data is ready.  However, it doesn't seem as if the tweets array is being passed into function (tweets.length is coming back as 0).  If I use the simple implementation of the function without the callback, I am able to view the twitter data, so it seems to be something specific to calling this function.  For testing purposes, I'm using the exact code for the function that you have in your examples.  Is there something that I'm missing.  My code is here: http://jsfiddle.net/3KDQ6/

Thanks!
Jason Mayes2 weeks ago
+Chris Goering It wont work on JSFiddle due to their new policies on JSONP callbacks. It will never see the function you expose as it is not global. If you run it on your own webserver or codepen.io it will work fine.
dondi llorera2 weeks ago
Hi Jason. Works great for me.
can i request for a search button? that i can search a specific hashtag? because it seems whenever i want to search a hashtag i need to create a widget on twitter to get the id.
Thanks
dondi llorera2 weeks ago
and also how to post a tweet?? thanks a looooooooooooooooot.