Home » Tutorials » You are reading »

Easy Twitter Feeds with JavaScript

twitter-js-solution
Last year i’ve posted an articles on how to use new Twitter API 1.1. Although the tutorial seem easy and helpful but the implementation of the Twitter feeds involve a lot of work including the authentication of Twitter developer application for permission to use consumer and access token. Without this, you cannot fetch the Twitter feeds from your Twitter timeline. And the step to complete this is not easy for beginners.

Even though there are couple of easy to use Twitter feeds WordPress plugin such as social jet built in “Twitter” widget setting or DesignWall’s DW Twitter. But what if you want a more simpler and website html based (not WordPress) Twitter feeds? The simpler solution would be using standalone JavaScript, Twitter Fetch by Jason Mayes.

Here’s a step by step tutorial on using the JavaScript only for Twitter feeds.

  1. Download a copy of Twitter fetch JavaScript here or on author site.
  2. Add Google Hosted Libraries jquery.js into your website header
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  3. Add this to your website footer before the </body> close
    <script type='text/javascript' src='http://yourdomain.tld/scripts/twitterfetch.js'></script>
  4. Add this your website header after the jquery.js before the </head> close
    <script> jQuery(document).ready(function() {twitterFetcher.fetch( 'XXXXXXXXXX', 'twitter-news', 3, true);});</script>
  5. Go to twitter.com and sign in as normal, go to your settings page (top right with your Twitter avatar).
    • Go to “Widgets” on the left hand side.
    • Create a new widget for what you need eg “user timeline” or “search” etc.
    • Feel free to check “exclude replies” if you dont want replies in results.
    • Now go back to settings page, and then go back to widgets page, you should see the widget you just created. Click edit.
    • Now look at the URL in your web browser, you will see a long number like this: 345735908357048478. Replace the step 4 ‘XXXXXXXXXX’ with your widget ID!
  6. Insert this code anywhere you want the Twitter feeds to show
    <div id="twitter-news"></div>
  7. For better styling, you can add this css into your stylesheet
    #twitter-news {border:1px solid #1155cc;margin: 0 0 1em; padding: 15px; float: left; width: 336px;font-size: 1.25em;}
    #twitter-news a {text-decoration: none;}
    #twitter-news a:hover {text-decoration: underline !important; color: #111;}
    #twitter-news ul, #twitter-news ul li {margin: 0px 0px 1em !important; padding: 0px !important; float: left; width: 100%; list-style: none; background: url(none);}
    #twitter-news .user,#twitter-news .interact {display: none;}
    #twitter-news p {float: left; margin: 0; padding: 0;}
    #twitter-news .timePosted {margin: 0; font-size: 1em; color: #999;}
  8. Final Result will be like this
    twitter-feeds-with-javascript
       View live demo of the twitterfetch in action

Final Conclusion

With this JavaScript only solution, you do not need to go through Twitter authentication process with consumer token and access token which are not an easy implementation for beginners.

Related Topics:

Tutorials
Best Method for Taking a Screenshot on Mac
Tutorials
How to Take a Screenshot on Your PC or Laptop
Tutorials
Responding to a Hacked WordPress Website
Snippets
How to Get Facebook Page Like Count Without Access Token
Easy Twitter Feeds with JavaScripthttp://cdn.dezzain.com/1/2014/10/twitter-js-solution.jpghttp://cdn.dezzain.com/1/2014/10/twitter-js-solution-150x150.jpgRichie KS TutorialsJavaScript,twitterLearn how to show your Twitter feeds timeline with JavaScript only. Remove the hassle of using authentication of Twitter access tokens to show your own Twitter feeds. DEZZAIN.COM
Enjoy This Article?, Follow us or Share it smiley
viral and buzz WordPress theme

5 Comments Already

  1. i am getting this error how to solve this ?
    Failed to load resource: net::ERR_BLOCKED_BY_CLIENT

    Public CommentUseri am getting this error how to solve this ? Failed to load resource: net::ERR_BLOCKED_BY_CLIENT
  2. Awesome! Thanks very much!

    Public CommentUserAwesome! Thanks very much!
  3. Hi can someone tell me how to get rid of the massive tv icon when there’s a video link posted?

    Public CommentUserHi can someone tell me how to get rid of the massive tv icon when there's a video link posted?
  4. This website was… how do I say it? Relevant!!
    Finally I’ve found something that helped me. Thank you!

    Public CommentUserThis website was... how do I say it? Relevant!! Finally I've found something that helped me. Thank you!
  5. I have found a way to add a twitter feed/wall on any site that dont support javascript/jquery the site i used is feed-generator com and i think this is the best solution right now.

    Public CommentUserI have found a way to add a twitter feed/wall on any site that dont support javascript/jquery the site i used is feed-generator com and i think this is the best solution right now.

Write a Reply or Comment

Your email address will not be published. Required fields are marked *


You can wrap php, js or style css code with [PHP]..your code...[/PHP]