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!

+3


source to share


1 answer


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



0


source







All Articles