How to display Twitter timeline in Ionic app? - angularjs

Question

THE SITUATION:
I need to display a Twitter timeline in my Ionic app. Just that. No further action is needed (login, retweet etc..)
ATTEMPT 1 - SIMPLE EMBED (as in a normal website)
In the view:
<a class="twitter-timeline" href="https://twitter.com/MY_TWITTER" data-widget-id="TWITTER_WIDGET_ID">Tweets by #MY_TWITTER</a>
The script in index.html:
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
Is not working. Testing the actual app in the phone, is not showing up. Testing the app in the browser it appears only after refreshing the page.
Bu if i put that same lines of code into a simple angular web app (not a Ionic app) than it works fine.
Why there is this strange behavior? Is ionic related?
ATTEMPT 2 - NGTWITTER
This is the code as explained in this tutorial: http://devdactic.com/twitter-rest-api-angularjs/
The controller:
.controller('TwitterCtrl', function($scope, $ionicPlatform, $twitterApi, $cordovaOauth) {
var twitterKey = 'STORAGE.TWITTER.KEY';
var clientId = 'MY_CLIENT_ID';
var clientSecret = 'MY_CLIENT_SECRET';
var myToken = '';
$scope.tweet = {};
$ionicPlatform.ready(function() {
myToken = JSON.parse(window.localStorage.getItem(twitterKey));
if (myToken === '' || myToken === null) {
$cordovaOauth.twitter(clientId, clientSecret).then(function (succ) {
myToken = succ;
window.localStorage.setItem(twitterKey, JSON.stringify(succ));
$twitterApi.configure(clientId, clientSecret, succ);
$scope.showHomeTimeline();
}, function(error) {
console.log(error);
});
} else {
$twitterApi.configure(clientId, clientSecret, myToken);
$scope.showHomeTimeline();
}
});
$scope.showHomeTimeline = function() {
$twitterApi.getUserTimeline({screen_name: 'MY_TWITTER_FEED'}).then(function(data) {
$scope.home_timeline = data;
});
};
$scope.submitTweet = function() {
$twitterApi.postStatusUpdate($scope.tweet.message).then(function(result) {
$scope.showHomeTimeline();
});
};
$scope.doRefresh = function() {
$scope.showHomeTimeline();
$scope.$broadcast('scroll.refreshComplete');
};
$scope.correctTimestring = function(string) {
return new Date(Date.parse(string));
};
});
The view:
<div class="list">
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text" placeholder="My tweet..." ng-model="tweet.message" ng-maxlength="140">
</label>
<button class="button button-small" ng-click="submitTweet()">
Tweet
</button>
</div>
</div>
<ion-refresher on-refresh="doRefresh()"></ion-refresher>
<div ng-show="home_timeline.length == 0">Loading tweets...</div>
<div ng-repeat="entry in home_timeline" class="list card">
<div class="item item-avatar">
<img ng-src="{{entry.user.profile_image_url}}"/>
<h2>{{entry.user.name}}</h2>
<p>{{correctTimestring(entry.created_at) | date:'medium'}}</p>
</div>
<div class="item item-body">
<p ng-bind-html="entry.text"></p>
<img ng-if="entry.extended_entities" ng-src="{{ entry.extended_entities.media[0].media_url }}" style="width: 100%;"/>
</div>
</div>
In this way i can properly see the twitter feed requested plus the possibility to write tweets.
Is not exactly what i want, because it requires the user to login into Twitter and allow the app to be granted access to his twitter account, while i just want to display a twitter feed and nothing more.
Besides, once the twitter section of the app is opened the app is not working anymore as excepted, some links in the menu stop to work.
THE QUESTION:
How can i simply display a twitter timeline inside a Ionic app?
Thank you!

Answer 1

I uploaded a sample project in git hub for Twitter Login in Ionic framework if you have any queries please let me know
Before cloning the project follow these step's :
1)Create a developer project in Twitter Developer console
2)Replace the APPID and APPSECRET in project with your values created in twitter developer console
3)Please write the call back url in twitter developer application as http://tinyurl.com/krmpchb
4)Have a look at README.md file in github