REPOSITORY OVERVIEW

Live repository statistics

★ 902Stars

⑂ 230Forks

◯ 15Open issues

◉ 902Watchers

77/100

OPENREPOHUB HEALTH SIGNAL

Healthy signals

A transparent discovery signal based on current public GitHub metadata.

Recent activity35% weight

100

Community adoption25% weight

Maintenance state20% weight

License clarity10% weight

Project information10% weight

100

This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.

README preview

Twitter-Post-Fetcher

Allows you to get your tweets displaying on your website using JavaScript, without using new Twitter 1.1 API

Further information and project page: http://jasonmayes.com/projects/twitterApi/

Latest version: 18.0.4 - ensure you are using the latest version to avoid issues!

Why does this exist?

Recently 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 solution. It makes use of the over bloated widgets Twitter gives us to put on our sites, cuts out all the nonsense (and non semantic markup), and returns to you your raw tweet text so you can do with it as you please and style it how you want on your own website - like it should be. Instructions on how to get it working with your tweets are in the code comments, just do what it says! Enjoy!

Browser support

All popular browsers supported. Chrome, Firefox, Safari, Opera, Internet Explorer 7, 8 and 9.

Examples

Please read comments in JavaScript for examples on how to use and how to generate a widget id to use with the component - it is really easy! Here are some examples on CodePen:

Regular usage: http://codepen.io/jasonmayes/pen/Ioype
3D Twitter Cube: http://codepen.io/jasonmayes/pen/rDyqj

Key changes / features

UPDATE 1: First version released!
UPDATE 2: 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 below.
UPDATE 3: Due to even more requests, solution now gets recent tweets for user, favourite tweets, list tweets, or hashtag search
UPDATE 4: 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 might show recent posts with a specific hashtag, whilst the other shows your latest 5 tweets.
UPDATE 5: 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 6: You can now specify a custom date formatting function to format the twitter post date however you wish! See comments for how to use.
UPDATE 7: Now supports IE 7, 8 and 9, Firefox, Chrome, Safari and Opera.
UPDATE 8: You can now not show retweets via a new parameter in function call. See comments in code.
UPDATE 9: Now supports a custom function callback when data is ready allowing you to have full control over its output.
UPDATE 10: Now supports Replying / Retweeting / Favouriting.
UPDATE 11: Now includes option to render a tweet's image.
UPDATE 13: CommonJS (e.g. Browserify) and AMD (e.g. Require.js) are now supported. See the new examples at the bottom of exampleUsage.js

Got suggestions? Feedback? Feature requests? Tell me!

At time of writing I have made over 132 changes, and many are the result of feature requests from people like you! I want to help all the developers out there get tweets on their sites once again - with ease, as it should be. Talk to me: Via Google+, twitter, or my website.

Disclaimer

This is by no means an official solution - it is something I created to solve a problem I had, and has now grown in to a full component. Twitter may change its system in such a way to cause this to stop working. I of course will try my best to adapt to any changes and all future versions of this code shall be posted here, on this site. I suggest you check back regularly for any updates. This is however the only solution I know of to date to get public data from Twitter without using the new 1.1 API which otherwise requires OAUTH tokens with every request and is a lot harder to set up. Lets keep it simple!

Feel free to use in your own projects. I only ask you keep any disclaimers with my code (even if code is modified / minified) so others can find the original source should they wish to get updates or support. A link back / social media shout out is always appreciated to help others discover it but not required :-)

With that out of the way, I hope you enjoy this component, and that it makes your life a bit easier. Jason Mayes

Notes

If you need IE8 support - ensure you do not set a non block level element as the target to render into. Use a DIV or similar instead. See http://msdn.microsoft.com/en-us/library/ie/ms533897(v=vs.85).aspx This is due to browser, not Twitter Fetcher.

Buy me a beer

It takes time to maintain the component and respond to all your requests. If this has saved you time, or maybe even a client, then some beer money is always appreciated :-) Hit the link on the right of this page: http://jasonmayes.com/projects/twitterApi/

ALGORITHMICALLY RELATED

Similar Open-Source Projects

Selected from shared topics, language and repository description—not editorial ratings.

jesseguitar87 /

Project-11-React-Quote-Machine

★ 1

Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/freeCodeCamp/full/qRZeGZ. Fulfill the below user stories and get all of the tests to pass. Give it your own personal style. You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! User Story #1: I can see a wrapper element with a corresponding id="quote-box". User Story #2: Within #quote-box, I can see an element with a corresponding id="text". User Story #3: Within #quote-box, I can see an element with a corresponding id="author". User Story #4: Within #quote-box, I can see a clickable element with a corresponding id="new-quote". User Story #5: Within #quote-box, I can see a clickable a element with a corresponding id="tweet-quote". User Story #6: On first load, my quote machine displays a random quote in the element with id="text". User Story #7: On first load, my quote machine displays the random quote's author in the element with id="author". User Story #8: When the #new-quote button is clicked, my quote machine should fetch a new quote and display it in the #text element. User Story #9: My quote machine should fetch the new quote's author when the #new-quote button is clicked and display it in the #author element. User Story #10: I can tweet the current quote by clicking on the #tweet-quote a element. This a element should include the "twitter.com/intent/tweet" path in its href attribute to tweet the current quote. User Story #11: The #quote-box wrapper element should be horizontally centered. Please run tests with browser's zoom level at 100% and page maximized. You can build your project by using this CodePen template and clicking Save to create your own pen. Or you can use this CDN link to run the tests in any environment you like: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js Once you're done, submit the URL to your working project with all its tests passing. Note: Twitter does not allow links to be loaded in an iframe. Try using the target="_blank" or target="_top" attribute on the #tweet-quote element if your tweet won't load. target="_top" will replace the current tab so make sure your work is saved.