I am using Facebook connect and JS client library to retrieve my photos in my Facebook account.
Below is my code:
<div id="photos_pics"></div>
<script type="text/javascript">
var widget_div = document.getElementById("photos_pics");
FB.ensureInit(function () {
FB.Facebook.get_sessionState().waitUntilReady(function() {
FB.Facebook.apiClient.photos_get('12345678', null, null, function(photos,e) {
var markup = "";
for (var i = 0; i < photos.length; i++) {
var photo = photos[i];
var photo_pid = photo.pid;
markup += '<fb:photo size="small" pid="'+photo_pid+'"></fb:photo>';
}
widget_div.innerHTML = markup;
FB.XFBML.Host.parseDomElement(widget_div);
});
});
});
</script>
The below method retrieves the photos:
FB.Facebook.apiClient.photos_get(uid, aid, null, result)
When I only specify uid which is my Facebook id, it works and photos (not in any albums) are returned. But when I specify one of my photo albums in aid, no results returned.
Anyone know what is the error I made? Thanks in advance.
I have recently been having a significant number of problems with retrieving photos from facebook lately as well. Almost always it is revolving around a recent change they have made to pid's. When viewing a photo in facebook you will see two query variables in your url pid and aid.
http://www.facebook.com/home.php#/photo.php?pid=9513212&id=672915455
although this is deceiving because the recent change that facebook made to pid's is that they are actually in the form id_pid so if I were to include the above photo in an fb photo tag it would look like the following
<fb:photo size="small" pid="672915455_9513212"></fb:photo>
Although I am having lots of problem with this because in more than one place facebook is being inconsistent with which form of pid it will return or is looking for.
So my first suggestion is to see which style pid you are receiving and which ones you are trying to use. This is most likely your current problem.
Your next problem is going to be the fact that there is a current bug in the xfbml version of the fb:photo tag. Currently the tag errors out when parsing the new style tags that have an "_" in them. To get around this we simply made a query for the direct url that facebook uses for the image, and display it using a simple html img tag
Related
I search a solution for the problem highlighted in this question.
Unfortunately, the accepted solution (which dates back to 21/11/2012) doesn't work anymore, as you can this in this demo.
Does someone know why?
Body
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : '179378788777832',
status : true,
cookie : true,
xfbml : true
});
</script>
<div id="login">
You are not logged in to FB, Please click here to login.
</div>
<div id="container_notlike">
YOU DONT LIKE
</div>
<div id="container_like">
YOU LIKE
</div>
JS
var hideLogin = function(){
$("#login").hide();
}
var showLogin = function(){
$("#login").show();
}
var doLogin = function(){
FB.login(function(response) {
if (response.session) {
hideLogin();
checkLike(response.session.uid)
} else {
// user is not logged in
}
});
}
var checkLike = function(user_id){
var page_id = "40796308305"; //coca cola
var fql_query = "SELECT uid FROM page_fan WHERE page_id = "+page_id+"and uid="+user_id;
var the_query = FB.Data.query(fql_query);
the_query.wait(function(rows) {
if (rows.length == 1 && rows[0].uid == user_id) {
$("#container_like").show();
//here you could also do some ajax and get the content for a "liker" instead of simply showing a hidden div in the page.
} else {
$("#container_notlike").show();
//and here you could get the content for a non liker in ajax...
}
});
}
$(document).ready(function(){
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
hideLogin();
checkLike(response.authResponse.userID)
} else {
showLogin();
}
});
$("#login a").click(doLogin);
});
CSS
body {
width:520px;
margin:0; padding:0; border:0;
font-family: verdana;
background:url(repeat.png) repeat;
margin-bottom:10px;
}
p, h1 {width:450px; margin-left:50px; color:#FFF;}
p {font-size:11px;}
#container_notlike, #container_like, #login {
display:none
}
I search solution for hours but I didn't find anything what works.
Thank you for help.
Like Gating is not allowed anymore, that´s why it is not possible. The only reliable way to get that information is by authorizing a user with the user_likes permission and using /me/likes/[page-id]. But you will not get that permission approved for like gating in the Login Review.
People need to like something because they really want to, not because they get something for it:
Only incentivize a person to log into your app, enter a promotion on your app’s Page, or check-in at a place. Don’t incentivize other actions
Source: https://developers.facebook.com/policy/
Btw, you can also subscribe to the edge.create event to find out if a user just clicked your like button, but you can´t find out if the user liked it before: https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/
The problem on that code is that FQL is deprecated .
You can't do what you want to, and thats why changes are necessary .
Your code would work if your app is old, created before changes that turns like gating not allowed, but anyway, you cannot use that for show content. You can use that kind of implementation for creating an interactive experience, where you can for example changing the content, saying "Thanks for liking".. Or "Connect with us, liking our page.." ..
You can also think about interfaces, where you show up the page plugin, and just after user likes, you say Thank you ... and hide the page plugin ... But user must always be able to close without liking .
For checking if user likes a page, you need use :
FB.api get on '/me/likes', and with the response ...
if (response.data[likes].name == "Coca-Cola")
or... better
if (response.data[likes].id == "40796308305") {
}
I repeat, One thing has nothing to do with another ..
You can check if user likes a page, but you cannot restrict content, based on this kind of resource .
There are other ways to check it, for exaple :
Get api call to userid/likes/pageid returns page info if user likes the page, and returns nothing if user does not like the page .
You will waste time trying do that for controlling content consumption .
Your app must be aprooved for asking user_likes permission, and its better you think about creating another experience for users, instead of submitting something like that .
I also think that content with good open graph for sharing, commenting and optional liking is very much more efetive, because i noticed that many people used to like and dislike the page after getting the content .
If you just... Prompt a FB.UI for sharing after 1 minute, for example, you will have much more results .. Aways positioning the page plugin in strategic places, people will naturally like your page ..
Than you can say change the page plugin element :
Thank you for liking, please share with your friends ....
Who would also like ...
Or use a callback for triggering the share dialog ..
OLD SCHOOL API CALL
The method FB.Event.subscribe() allowed apps to subscribe to a range of events, and define callback functions for when they fire, is deprecated .
Also FQL Query is deprecated .
For checking if user likes a page, you need user.likes permission, so you can try :
FB.api get on '/me/likes', and with the response ...
if (response.data[likes].name == "Coca-Cola")
or... better
if (response.data[likes].id == "40796308305") { }
There are other ways to check it, for exaple :
Get api call to userid/likes/pageid returns page info if user likes the page, and returns nothing if user does not like the page .
You can check if user likes a page using this call, but you cannot restrict content, based on this kind of resource .
2018 UPDATED SOLUTION
But nowadays, in 2018 the best method for is setting Webhooks .
Webhooks are a subscription based system between Facebook and your server. Your app subscribes to receive updates from Facebook via a specified HTTPS endpoint .
This allows your to app to receive notifications whenever there are updates to a chosen set of topics and their fields, so, you can track changes to most sections of the user's profile, such as About, Photos, Posts, Friends, and Likes.
Webhooks update notifications are sent as POST requests to a callback URL that you supply. Notifications can be lightweight, indicating only that a field has been updated, or can include the newly updated value .
webhooks user reference
Full list of user profile fields that you can subscribe to, such as About, Photos, Posts, Friends, and Likes.
webhooks page reference
The easiest way to set up your app to receive Webhooks updates is to use the App Dashboard's, check out Facebook Platform documentation for more info .
Webhooks documentation
I use ajax to render a content page with a Facebook Like Button plugin in it.
The problem is that when the user clics Like, Facebook will extract meta info but I don't know how to assign the meta with ajax.
I tried using append to head int FB.init but it seems to not work and the update isn't reflected when users like the page on Facebook
$('head').append("<meta property="og:title" content="The Rock"/>');
The problem is that facebook like will extract meta info but I don't know how to assign the meta with ajax.
I tried use append to head int FB.init but it seems not work.
Of course this does not work, because Facebook’s scraper requests your URLs from your server – and does not care about what the DOM might currently look like in any user’s browser.
You can not add Open Graph meta data client-side.
Actually you can use such script:
/// Append Meta tags
function setMT(metaName, name, value) {
var t = 'meta['+metaName+'='+name+']';
var mt = $(t);
if (mt.length === 0) {
t = '<meta '+metaName+'="'+name+'" />';
mt = $(t).appendTo('head');
}
mt.attr('content', value);
}
and call this function from body:
setMT('property', 'og:title', 'Title for Facebook');
I have similar on the News Site at http://www.livepage.info
be careful with using '.append()'.
According to the JQuery Docs, this method has a move effect (reads from source, copies to destination and removes the source).
A theoretical way is something like this:
headObj = $("head");
keywordObj = $(headObj).find("meta[name='keywords']");
newKeywords = $(keywordObj).attr("content");
newKeywords += myKeywords;
$(keywordObj).attr("content", newKeywords);
Download and install the plugin FireBug for browser FireFox, so you can check the changes at runtime.
Is there a way to get the public link of a Facebook Album through the Facebook API (graph/fql) that can be shared with those who are not on Facebook?
This Album is not publicly accessible. It is restricted by the share permissions on the album set by the user. But I am looking for a way to generate the public link of this restricted album so whoever is sent this link can view the album unconditionally.
I know this is possible through the Share Album feature on the Facebook website through the Share Dialog: You can send this album to friends or relatives by giving them a link.
I couldn't find a way to to this in the Graph API.
EDIT: I'm talking about the public link that is available through this feature on facebook: facebook.com/help/124590517619792
You didn't provide an example or test case, nor any API code to work with. I'll use the following links for Facebook User Name Hostess as an example (long live Twinkies!).:
Main: https://www.facebook.com/Hostess
Photo Album: https://www.facebook.com/Hostess/photos_albums
First, we will need the Facebook User Number.
You can perform a GET request or type this into the browser:
Facebook User Info: http://graph.facebook.com/Hostess
To continue with this example, we will use the Facebook Number provided by the previous step:
Facebook ID: 145369525544570
Is there a way to get the public link of a Facebook Album through the
Facebook API (graph/fql) that can be shared with those who are not on
Facebook?
Yes there's a way! This link will provide you with json results for all albums, in this case 6:
Facebook Albums via json: http://graph.facebook.com/145369525544570/albums
To limit the returned results, you can use ?limit=1 (where 1 is the amount of albums returned):
Facebook Album (1) via json: http://graph.facebook.com/145369525544570/albums?limit=1
This Album is not publicly accessible. It is restricted by the share
permissions on the album set by the user. But I am looking for a way
to generate the public link of this restricted album so whoever is
sent this link can view the album unconditionally.
Your out of luck and there isn't a way. However, you don't have to be a Facebook Member to view the images in the Album. Using the json data from the previous step works when the Album is made public. Just use a simple GET request:
jsFiddle DEMO: Facebook Albums Links from Facebook ID
// Console log messages are provided, activate your browsers console.
$.ajax({
url: 'http://graph.facebook.com/145369525544570/albums',
dataType: "json",
success: function(yourVar) {
// Make sure the request, 1 json object, was returned.
if (yourVar) {
console.log('This is the jQuery Object received. Click on it to explore contents');
console.log(yourVar);
// This will parse the Objects received in 'data' variable.
// Having said that, it's coincidental the data the wrapped in a 'data' name.
$(yourVar.data).each(function(index) {
// Only process Objects that have valid Album links.
// Having said that, only Photo Albums are returned in initial data, not Video Albums.
if(this.link){
// Display in console the jQuery zero indexed number
console.info('Album Index object: ' + index);
//
// Display in HTML via append, the same information.
$('body').append('<b>Album Index Object: </b>' + index + '<br />');
// Display in console the Album Names available
console.info('Name: ' + this.name);
//
// Display in HTML via append, the same information.
$('body').append('<b>Name: </b>' + this.name + '<br />');
// Display in console the Album Name Url;
console.log('Url: ' + this.link);
//
// Display in HTML via append, the same information.
$('body').append('<b>Url: </b>' + this.link + '<br />');
// Display in console dashed lines before next item is shown.
console.log('-------');
//
// Display in HTML via append, the same information.
$('body').append('<hr><br /><br />');
}
});
} else {
console.log('Was data expected? Check your jQuery or JavaScript for errors.');
}
}
});
// Power-Tip!
// You can also use .ajax() with a YQL Rest Query url.
// See YQL Console with Rest Statement at:
// http://developer.yahoo.com/yql/console/?q=SELECT%20data.link%20FROM%20json%20WHERE%20url%3D%22https%3A%2F%2Fgraph.facebook.com%2F145369525544570%2Falbums%22&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys
// As seen there, the data.link is providing just the links.
// Change data.link to * to see all data nodes available in json tree.
// That being said, your .ajax() url for above is at the bottom: The Rest Query.
In Detail: Why it can't be done. (otherwise it's a security issue!!!)
Facebook Settings for Photos and Albums:
When I share something, how do I choose who can see it?
The above Facebook documentation states that if a Album is set to Private via Only Me, then it will only be available to you, even though you may have a shareable link for it.
To demonstrate that the Album/Photos is indeed locked and not shareable, here is an actual live test using Yahoo! Query Language to perform a request on a locked photo album:
Feel free to click the image to visit the above YQL Statement.
To be sure, the above example in itself shows that the link is not the issue, it's the content that is really the subject, as that's the item locked for which a Facebook Token key is required.
I'm creating a Facebook Flash app and I'm having trouble uploading a photo to Facebook with myself or friends tagged. I am stuck at this for a whole time now and couldn't find the solution
First of all here are the permissons I want the app to have.
ExternalInterface.call("redirect","appId","user_birthday,read_stream,publish_stream,user_photos,friends_photos","http://apps.facebook.com/appName");
Here is what I do to upload the photo to Facebook without tags (this works):
var params:Object = {name: 'My Card', image:card, message: 'Greetings from Barcelona' , fileName:'Card'};
Facebook.api('me/photos', onSaveToPhotoAlbumComplete, params);
But when I want to add tags of friends or myself it doesn't work, Here is what I did (In this case I only want to tag myself in the picture):
var params:Object = {name: 'Rosada Face-It', image:card, message:message, fileName:'Face It!', tags:[{"id":myId,"x":50,"y":50}]};
Facebook.api('me/photos', onSaveToPhotoAlbumComplete, params);
I also tried it with quotes and "tag_uid" instead of "id" but that is not the problem I think:
tags:'[{"tag_uid":"'+ editorModel.tag1 +'","x":"50","y":"50"}]'
If somebody could help?
Looking at the API I think a seperate call may be needed to add tags
http://developers.facebook.com/docs/reference/api/photo/
I think to create a tag you need to have the PHOTO_ID and then do a POST to PHOTO_ID/tags
var params:Object = {{"to":myId, "x":50, "y":50}]};
Facebook.api(photoId +"/tags", onPhotoTagged, params);
I've gotten the FB JS client library to work on my iframe-based application (cool stuff, I must say), but now I'd like to retrieve a list of friends from Facebook, in order to populate an AutoComplete field (similar to the friend-selector), but without the additional iframe that would be generated if I used the serverfbml tag.
Anyone know how to retrieve that friend list?
<script src="http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript">
FB_RequireFeatures(['Api'], OnFBFeaturesLoaded);
function OnFBFeaturesLoaded()
{
FB.Facebook.init('<YOUR_API_KEY>', '<XD_RECEIVER_URL>');
FB.Facebook.apiClient.requireLogin(OnRequireLoginComplete);
}
function OnRequireLoginComplete(p_exception)
{
var FQL = "SELECT uid FROM user WHERE " +
"uid IN (SELECT uid2 FROM friend WHERE uid1='<USER_ID_OF_CURRENT_USER>')";
FB.Facebook.apiClient.fql_query(FQL, function(result, exception)
{
if (exception != null)
{
// We had some error, do your error handling stuff
}
else
{
// result is an array containing the friends' user IDs.
// Have fun.
}
});
}
</script>
SELECT uid
FROM user
WHERE uid IN (SELECT uid2
FROM friend
WHERE uid1 = *USER_ID_HERE*)
Is the iFrame piece your talking about the Facebook-provided 'share with friends' facility? If so, you'll probably find that a lot easier to use than writing your own. If you write your own, here's what you'll need to do:
If you're strictly on the client side (i.e. JS, not PHP, Java, etc.), make JavaScript calls to the Friends API to get an XML list of friends back. Use JavaScript to parse through the XML and generate a list. You'll have to either write or 'borrow' some code to make that list usable with one or more 'autocomplete' fields. You then need to post that form + fields back to a share API -- many ways to do that, depending on what you're trying to accomplish.
There may already be well-written JS code / plugins that you could use. Do a quicks search and see if you can find something.