I'm trying to show the cover photos of a Facebook user's albums, but I am not having any luck.
What I have so far is this:
FB.api('/me/albums', function(response) {
for(var i = 0; i < response.data.length; i++)
{
if(response.data[i].cover_photo != undefined)
{
var alb = $('<div class="album" id="album-' + response.data[i].cover_photo + '"></div>').appendTo(view_scroll);
alb.css('background', 'url(https://graph.facebook.com/' + response.data[i].cover_photo + '/picture)');
}
}
});
All I am getting is a question mark image. Any suggestions on how get the actual cover image into the background of the div?
Found it... Needed to add the access token to the end of the url:
background-image: url(https://graph.facebook.com/' + response.data[i].cover_photo + '/picture?access_token=' + [ACCESSTOKEN]
Hi i had the same problem, and i already got the cover_photo from every album of the user. Im using javascript sdk. After checking the login status, just call the function albumes():
function albumes() {
FB.api('/me/albums?fields=name,link,cover_photo,id',
function(response) {
for(var c = 0 ; c < response.data.length ; c++) {
coverPhoto(response.data[c].cover_photo, response.data[c].name);
}
}
);
}
function coverPhoto(id, nombre){
FB.api('/'+id+'?fields=picture',
function(responseIn) {
$('#javascriptData').append(
"<br>"+ nombre +"<img src='"+ responseIn['picture'] +"'>");
}
);
}
Related
I am making an application based on ionic-1 where I need to take access camera as well as gallery. I used Cordova Camera plugins. It is working properly. Using this plugin we can access not only our device gallery but also our drive, documents etc. But main problem is, I cant select multiple image from gallery. I need to select it one by one.
How may I solve this issue..? I do not want to use cordova image picker plugins.
You can solve this issue by using cordova-imagePicker plugin. you can access it from github.
The plugin creates the object window.imagePicker with the method
getPictures(success, fail, options).
with this plugin you can select multiple photos
window.imagePicker.getPictures(
function(results) {
for (var i = 0; i < results.length; i++) {
console.log('Image URI: ' + results[i]);
}
}, function (error) {
console.log('Error: ' + error);
} ); Example - Get at most 10 images scaled to width of 800:
window.imagePicker.getPictures(
function(results) {
for (var i = 0; i < results.length; i++) {
console.log('Image URI: ' + results[i]);
}
}, function (error) {
console.log('Error: ' + error);
}, {
maximumImagesCount: 10,
width: 800
} );
Starting to pull by hair here, running out of things to try.
I'm taking a photo, and it's not showing. If i use a URL, then it works.
I'm using the API example, so not sure what i'm doing wrong?
The only thing i see on the Facebook page is the message, not the photo.
photoButton.addEventListener('click',function(e){
var image = e.media;
var f = Titanium.Filesystem.getFile(Titanium.Filesystem.applicationDataDirectory,'camera_photo.png');
f.write(image);
var blob = f.read();
Titanium.Media.showCamera({
success:function(event) {
Ti.API.debug('Our type was: '+event.mediaType);
if(event.mediaType == Ti.Media.MEDIA_TYPE_PHOTO) {
// send XHR req to post image on Facebook
fb.permissions = ['publish_actions', 'status_update', 'publish_stream', 'read_stream','manage_pages']; // Permissions your app needs
fb.authorize();
var data = {
name : "This is my name",
message : 'This is my message',
caption : "This is the caption",
picture : blob
};
fb.requestWithGraphPath('1234567890/feed', data, 'POST', function(e) {
if (e.success) {
alert(e.result);
} else if (e.error) {
alert(e.error);
} else {
alert('Unknown response');
}
});
} else {
alert("got the wrong type back ="+event.mediaType);
}
},
cancel:function() {
// called when user cancels taking a picture
},
error:function(error) {
// called when there's an error
var a = Titanium.UI.createAlertDialog({title:'Camera'});
if (error.code == Titanium.Media.NO_CAMERA) {
a.setMessage('Овој уред нема камера');
} else {
a.setMessage('Unexpected error: ' + error.code);
}
a.show();
},
saveToPhotoGallery:true,
// allowEditing and mediaTypes are iOS-only settings
allowEditing:true,
mediaTypes:[Ti.Media.MEDIA_TYPE_VIDEO,Ti.Media.MEDIA_TYPE_PHOTO]
});
Ok, this post hold the key: Appcelerator Titanium: Facebook Image Upload fail
The issue is for some reason feeds dont work with the FB module, so you have to use an XHR request:
var endPoint = 'https://graph.facebook.com/v2.1/' + pid + '/photos?access_token='+ acc;
xhr.open('POST',endPoint);
xhr.send({
message: data,
picture: image
});
I want a to display my facebook feed in my site that show only specific #hashtag, for example "#StarComm". This is my code.
var page_id = 'MY APP ID';
var pageaccessToken='MY Token';
FB.api('/' + page_id + '/feed?q=%23StarComm&access_token='+ pageaccessToken, {limit:5} , function(response){
if (response && response.data && response.data.length){
var ul = document.getElementById('pagefeed');
for (var j=0; j<response.data.length; j++){
var feed = response.data[j],
li = document.createElement('li'),
a = document.createElement('a');
a.innerHTML = feed.message;
a.href = feed.link;
li.appendChild(a);
ul.appendChild(li);
}
}
});
My out put is like this.
Follow us on twitter at https://twitter.com/StarcommOnline #StarComm
And i want my output is like the standard fb:like-box. Thanks in Advance!
I need all the profile pictures of square size. Presently I am able to loop through all the profile pictures but I am unable to get each of those pictures of same size. Since I have a unique id for each picture is there anyway to get that picture with a definite size?
Here is the code
FB.api('/me/albums', {access_token: token},function(resp) {
for (var i=0, l=resp.data.length; i<l; i++){
var album = resp.data[i];
if(album.name=="Profile Pictures"){
FB.api(album.id + "/photos", function(response) {
for(var j=0;j<response.data.length;j++){
$("#container").append("<li><input type='radio' class='fbimg'><img src='" + response.data[j].picture + "' /></input></li>");
}
});
}
}
});
So far I can alert the "scrollTop"-value of "FB.Canvas.getPageInfo":
FB.Canvas.getPageInfo(
function(info) {
alert('scrollTop: ' + info.scrollTop);
}
);
Now I would like to use this value in one of my functions, but I don't know how.
The following is not working:
function test() {
var fbScrollTop = FB.Canvas.getPageInfo();
alert(fbScrollTop);
}
How can I access the the value?
I don't know if it's useful yet.
But now I can center my divs in my facebook app.
Here is the function:
jQuery.fn.center = function () {
var temp = this;
FB.Canvas.getPageInfo(
function(info) {
$(temp).css("position","absolute");
$(temp).css("top", Math.max(0, ((info.clientHeight - $(temp).outerHeight()) / 2) + info.scrollTop) + "px");
$(temp).css("left", Math.max(0, ((info.clientWidth - $(temp).outerWidth()) / 2) + info.scrollLeft) + "px");
}
);
return this;
}
And I use like that:
var loading = $("#loading");
loading.center();
Just combine both
function test() {
var fbScrollTop;
FB.Canvas.getPageInfo(function(info) {
fbScrollTop = info.scrollTop;
alert(fbScrollTop);
});
}
Most of the methods available in the SDK are asynchronous - this means that the response will not be available until the provided callback is invoked (with the response).