How to display Twitter timeline in Ionic app?
SITUATION:
I need to display Twitter timeline in my Ionic app. Only that. No further action is required (login, retweet, etc.)
ATTEMPT 1 - SIMPLE EMBED (same as normal website)
In view:
<a class="twitter-timeline" href="https://twitter.com/MY_TWITTER" data-widget-id="TWITTER_WIDGET_ID">Tweets by @MY_TWITTER</a>
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>
Does not work. Testing the actual app on the phone is not showing. Testing the application in the browser only appears after refreshing the page.
Bu if I put these same lines of code in a simple angular web app (not an Ionic app) than it works fine. Why is this strange behavior? Is ionic related?
ATTEMPT 2 - NGTWITTER
This is the code as described in this tutorial: http://devdactic.com/twitter-rest-api-angularjs/
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));
};
});
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>
This way I can properly view the requested Twitter feed and the ability to tweet. Not exactly what I want, because it requires the user to log into Twitter and allow the app to access their Twitter account, while I just want to display Twitter and nothing else.
In addition, after opening a tweet part of an application, the application no longer works as released, some links in the menu stop working.
QUESTION:
How can I just display the twitter timeline in the Ionic app?
Thank!
source to share
I have uploaded a sample project to git hub for Twitter Login in Ionic framework, if you have any questions please let me know
Before cloning a project, do the following:
1) Create a developer project in Twitter developer console
2) Replace APPID and APPSECRET in the project with your values ββgenerated in the developer's twitter console
3) Please write the reverse url in the twitter developer app http://tinyurl.com/krmpchb
4) Look at the README.md file in github
source to share