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.