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.
[olist type=’green’]
- Download a copy of Twitter fetch JavaScript here or on author site.
- Add Google Hosted Libraries jquery.js into your website header
[php]<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>[/php] - Add this to your website footer before the </body> close
[php]<script type=’text/javascript’ src=’http://yourdomain.tld/scripts/twitterfetch.js’></script>[/php] - Add this your website header after the jquery.js before the </head> close
[php]<script> jQuery(document).ready(function() {twitterFetcher.fetch( ‘XXXXXXXXXX’, ‘twitter-news’, 3, true);});</script>[/php] - 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!
- Insert this code anywhere you want the Twitter feeds to show
[php]<div id="twitter-news"></div>[/php] - For better styling, you can add this css into your stylesheet
[css]#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;}[/css] - Final Result will be like this
View live demo of the twitterfetch in action
[/olist]
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.
