简体   繁体   中英

How to get URL of the image from Facebook graph response?

I'm trying to create a Facebook wall feed for an mobile app using Ionic/AngularJS framework. I need help to retrieve the direct image link of an published photo at my fanpage. The picture object from the JSON data display an very small thumbnail of the original photo so if I increase the size using CSS it losses the quality.I am using the link value URL as img ng-src but doesnt display anything since the link is not to the image itself but the link to the post on facebook.

Below are my codes, Inside view:

<ion-content padding="true" ng-controller="FacebookCtrl" class="has-footer">
           <label class="item item-input">
                <i class="icon ion-search placeholder-icon"></i>
                <input type="text" placeholder="Search..." ng-model="query" >
            </label>
            <ion-list ng-repeat="item in news | filter:query | limitTo:20">
           <ion-item  ng-if="item.type == 'photo'">
               <h2 >{{item.caption}}</h2>
               <p>{{item.message}}</p>
               <img ng-src="{{item.link}}"/><br>
               <i class="icon ion-android-favorite"></i> {{item.likes.data.length}} Pelqime
               <p>Publikuar me: {{item.created_time | date: 'medium' }}  </p>
           </ion-item>
           <ion-item  ng-if="item.type == 'link'">
               <h2 >{{item.name}}</h2>
               <p>{{item.message}}</p>
                    <img ng-src="{{item.picture}}"/><br>
               <i class="icon ion-android-favorite"></i> {{item.likes.data.length}} Pelqime
               <p>Publikuar me: {{item.created_time | date: 'medium' }}  </p>
           </ion-item>
           <ion-item  ng-if="item.type == 'video'">
               <h2 >{{item.name}}</h2>
               <p>{{item.message}}<br>
                    {{item.source}}
               </p>
               <video width="400" controls src="{{item.source}}">Your browser does not support HTML5 video.
               </video>

               <i class="icon ion-android-favorite"></i> {{item.likes.data.length}} Pelqime
               <p>Publikuar me: {{item.created_time | date: 'medium' }}  </p>
           </ion-item>
           </ion-list>

        </ion-content>

Controller:

.controller('FacebookCtrl',function($scope,$http){
    $http.get('https://graph.facebook.com/radioopendimi/feed?access_token=APP_ID|APP_Secret').then(function(resp){
        $scope.news = resp.data.data;
        console.log('Success: ',resp);
    }, function(err){
        console.error('Error: ',err);
    });

});

Request the field full_picture , that should contain the largest version of the image that Facebook has available.

https://graph.facebook.com/radioopendimi/feed?fields=full_picture,[…]&access_token=…

Be aware that when using the fields parameter, you must specify all fields you want to get, otherwise you will only get the id by default.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM