How should I retrieve original pictures included with the Facebook posts? - facebook

My application uses the Facebook Javascript SDK to add wall posts to the feed of a community's page, and to retrieve them again. Pictures included with the posts are processed and placed somewhere on the Facebook servers.
When these posts are retrieved the links to the pictures turn out to be links pointing to the fbcdn.net server.
Is there a way to access the original links?
Update:
Here is my code posting a post:
// The "params" variable contains a field called "picture"
// (which is a link pointing to my picture)
FB.addWallPost = function (params, pageId, token, complete) {
var fbApiParams = {
access_token: token
};
$.extend(fbApiParams, params);
FB.api(pageId + '/feed', 'post', fbApiParams, function (response) {
// FB.apiCallDone is a function checking if there's any positive response
if (FB.apiCallDone(response)) {
complete(response.id);
}
else {
complete(null);
}
});
}
And these lines retrieve the posts:
FB.getWallPosts = function (wallPostsIds, token, complete) {
if (wallPostsIds && wallPostsIds != null && wallPostsIds.length) {
var wallPostsIdsStr = wallPostsIds.join(',');
var fbApiParams = {
ids: wallPostsIdsStr,
access_token: token
};
FB.api('/', fbApiParams, function (response) {
if (FB.apiCallDone(response)) {
var wallPosts = dictElemsToArr(response);
complete(wallPosts);
}
else {
complete([]);
}
});
}
else {
complete([]);
}
}

If you're posting pictures to Facebook, they will be stored locally by Facebook.
It is up to your application to store the path of the original images if your application requires this information.

Related

Facebook Profile Picture Link Changes?

Does a link to a facebook profile picture stay up to date or should I store images in storage?
I am using firebase and facebook authentication and grabbing a users profile picture link like this when they FIRST create an account:
const photoLarge = await getFacebookUserInfo().then((userResponse) => {
return userResponse.picture.data.url.toString()
}).catch((error) => {
return error
});
const userId = await firebaseService.auth().currentUser.uid;
writeUserData(
userId,
photoLarge,
);
}
For some reason I noticed in dev vs prod I have 2 different links with the dev not working.
Dev doesn't work:
https://platform-lookaside.fbsbx.com/platform/profilepic/?asid=10161383578450224&height=200&width=200&ext=1558132998&hash=AeTUIkafEn5zw5PF
Prod Does:
https://platform-lookaside.fbsbx.com/platform/profilepic/?asid=10161383578450224&height=200&width=200&ext=1558673410&hash=AeQGA8guHyxIK9du
I am trying to figure out if the facebook picture should be downloaded and stored in storage and then referenced instead and if so how to go about doing that? (/ is there a expiration date on a link)
I haven't seen if this is happening or not for Google Sign-in.
Here is my graph request:
//graph QL request to get larger facebook profile
export const getFacebookUserInfo = () => {
return new Promise((resolve, reject) => {
const infoRequest = new GraphRequest(
'/me',
{
parameters: {
fields: {
string: 'email,about,name,picture.type(large)'
}
}
},
(error, data) => {
if (error) {
reject(error);
} else {
resolve(data);
}
}
);
new GraphRequestManager().addRequest(infoRequest).start();
})
}
So somehow I finally figured this out today. Essentially the graphAPI spits back several pieces with one being a picture piece. This looks like the links I posted above https://platform-lookaside.fbsbx.com/platform/profilepic
THIS CHANGES!!! Not sure how often, but do NOT use this as eventually it will be a dead link.
However, what I missed was that you can use the ID that the graphAPI spits back instead and use the following link:
http://graph.facebook.com/{your_id_goes_here}/picture?type=large&redirect=true&width=500&height=500
More information can be found in this other post:
Get user profile picture by Id

show blog Author , title , label and time in a specific div blogger

For SEO purposes I wanted to copy this blog post design this website
the specific part I want to copy is the div with id="enter-posts" which has the title, the author, date, labels of the post
I tried to put tags like:
<div class='author-profile' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
<b:if cond='data:post.authorPhoto.url'><a expr:href='data:post.authorProfileUrl' itemprop='url'>
<div class='auhtor-image'><img expr:src='data:post.authorPhoto.url' itemprop='image'/></div></a></b:if>
<div><span class='author-about'>About </span><a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'><span itemprop='name'><data:post.author/></span></a></div><p class='description' itemprop='description'><data:post.authorAboutMe/></p></div>
for author and so on for the other elements I want to add but the problem is:
Nothing is displayed, BUT when I put these tags inside the post body before the title or at the end of the post they appear normally. what should I do?
Though this is an old post, may I post some clarification for those looking for an answer. Fact is, there is no data:post.authorPhoto.url provided by blogger.
Most template writers take the data from /feeds/posts/default and parse the JSON and update the HTML after page load. Then they obfuscate the js code, making new comers think it was all fetched from blogger. Along with that fetch, who knows what else was fetched.
For example, for the above blog, you can fetch the JSON from http://www.th3professional.com/feeds/posts/default?alt=json-in-script
My implementation
Image is fetched directly from the feed
Author description is fetched from 'Introduction' part of user profile. Since that's CORS, I'm using a CORS proxy (https://github.com/Rob--W/cors-anywhere/) for that purpose.
-
var HttpClient = function() {
this.get = function(aUrl, aCallback) {
var anHttpRequest = new XMLHttpRequest();
anHttpRequest.onreadystatechange = function() {
if (anHttpRequest.readyState == 4 && anHttpRequest.status == 200)
aCallback(anHttpRequest.responseText);
}
anHttpRequest.open("GET", "https://cors-anywhere.herokuapp.com/"+aUrl, true);
anHttpRequest.send(null);
}
}
$(document).ready(function($){
// This is one way to get post id, other ways are possible too
var post_id = $("div[itemprop='articleBody']").attr('id');
post_id = post_id.match(/.*post-body-(\d+).*/);
post_id = ((post_id!==null && post_id.length>0) ? post_id[1] : null);
if(post_id!==null) {
$.ajax({
url: "/feeds/posts/default/"+post_id+"?alt=json-in-script",
type: 'get',
dataType: "jsonp",
success: function(data) {
var image = ((data.entry.author[0]["gd$image"].src!==null) ? data.entry.author[0]["gd$image"].src : false);
if(image!=false) { //site correct class here
$('.author-image').attr('src', image);
}
var description = false;
var client = new HttpClient();
client.get((data.entry.author[0].uri["$t"]).replace("http", "https"), function(response) {
var doc = document.documentElement.cloneNode();
doc.innerHTML = response;
$content = $(doc.querySelectorAll('tr'));
for(var lk=0; lk<$content.find('th.item-key').length; lk++) {
if($content.find('th.item-key')[lk].innerText=="Introduction" && $content[lk].querySelectorAll('td')[0]!==null) {
description = $content[lk].querySelectorAll('td')[0].textContent;
break;
}
}
if(description!=false) { //site correct class here
$('.description').text(description);
}
});
}
}); } });

Facebook api multiple request

I am creating a facebook application generator. And I need to check if the user has currently added the application on this facebook page or not.
In order to do that, i first request facebook api to give a list of his pages. Then i loop through all the pages. And request for apps on each of these pages.
Lastly i compare the appId with the one user just created and displays the display the warning accordingly.
The problem is , when i loop through each of the pageId and request FbApi for subpages, the request response is delayed and the for each loop completes its cycle before the results are fetched from facebook.
Here is my code, which is quite complex... Any ideas to fix the issue is highly appreciated.
FB.login(function (response) {
FB.api('/me/accounts', function (apiresponse) {
var totalPages = apiresponse.data.length;
var pageIndex = 0;
$.each(apiresponse.data, function (pageNumber, pageData) {
var pageAccessToken = pageData.access_token;
var tabPageName = pageData.name;
var tabPageId = pageData.id;
FB.api("/" + tabPageId + "/tabs", function (response) {
var foundApp = false
$.each(response.data, function (index, value) {
var exsistingAppId = (value.id).split("app_").pop();
if (exsistingAppId == fbAppId) {
foundApp = true;
}
});
if (foundApp === true) {
var data = {
PageId: tabPageId,
Url: window.location.href.split("/").pop()
}
$.ajax({
type: "POST",
url: '/facebook/Match',
contentType: "application/json",
data: JSON.stringify(data),
success: function (data) {
if (data == "True") {
$("#addToFacebookModal ul").append("<li><span class='pageTab'><a class='pageTabName' target='_blank' href='https://facebook.com/profile.php?id=" +tabPageId + "'>" +tabPageName + "</a></span><a class='deleteAppFromPageTab' data-id='" +tabPageId + "' data-accessToken='" +pageAccessToken + "'>[x]</a></li>");
alreadyAdded.push(true);
} else {
alreadyAdded.push(false);
}
pageIndex++;
if (pageIndex == totalPages) {
console.log("Total Pages = " + totalPages + ", Looped through = " + alreadyAdded.length);
if (alreadyAdded.indexOf(true) >= 0) {
$("#addToFacebookModal").modal();
} else {
addToFacebook();
}
}
}
});
}
else {
pageIndex++;
}
});
});
});
}, { scope: 'manage_pages' });
Here is pseudocode of what i am doing
var myVariable
-Fb.Api Callback function returns response array
-Loop through the response array
-Get new Response array based on the previous response in that array
-Loop through each item of the new response array and compare it with myVariable.
The problem is that responses are delayed while the loop finishes up before the responses arrive. As i result i cant compare the nested Item with myVariable.
If by "facebook page" you mean a business page / organization page (not a profile), you can get the same information more easily by checking the endpoint '/{{page_id}}/tabs/{{app_id}}.
Replace page_id with the ID of the page you want to check and app_id similarly with your app ID. I don't have working code at the moment, but something like this:
FB.api(
'/' + checkPageID + '/tabs/{{app_id}}',
function (response) {
// Do console.log(response) to figure out how to see if installed or not
}
)
YOu can use fields expansion:
https://developers.facebook.com/docs/graph-api/using-graph-api/v2.3#fieldexpansion
FB.api('/me/accounts', {fields: 'name, address{city}'},function (response)
{
//do something here.
}

Getting Facebook Interests graph api call

I am trying to get the users liked Facebook pages, here is my code:
exports.checkUserInterests = function (fbaccountID,fbModule) {
var facebookModule = fbModule;
;
//code to get the list of facebook likes for any given user
facebookModule.requestWithGraphPath('me/interests', {}, 'GET', function(e) {
if (e.success) {
alert(e.result);
} else if (e.error) {
alert(e.error);
} else {
alert('Unknown response');
}
});
};
My Permissions is set as following:
//set permissions for graph api
var permissions = ['user_friends', 'user_interests', 'user_birthday', 'user_photos', 'basic_info'];
I an returning an empty json array, is my request correct?
Thanks
I use a different call to get the Facebook Likes of a user, maybe thats the problem.
For example, if I want to know if the user likes a page with id: xxxxx, I do a GET call to "me/likes/xxxxxx" and see if the result is true.
For this to work, you should have the permissions to user_likes.

FaceBook API: Get the Request Object for a request Id - logged into the account that sent the request. Using the "Requests Dialog" API

I am using the "Requests Dialog" to create Facebook requests. Inorder to get the user that the requests were sent to I need to access the Request object using the graph API. I have tried most of the permissions settings that seemed appropriate (read_requests and user_about_me) to get the request object, but instead I get a false in the response. Am I using the wrong permissions?
I am able to access the request object using the graph API from the account that the request was sent to.
http://developers.facebook.com/docs/reference/dialogs/requests/
Return Data - A comma-separated list
of the request_ids that were created.
To learn who the requests were sent
to, you should loop through the
information for each request object
identified by a request id.
I've been asking myself this question a while ago:
How to retrieve all the requests sent by me?
The answer: you can't!
You have two options:
Store the request_id returned when the user sent the request, so you can later access them and get the data you need
Knowing the receiver!
Proof of the above, you can check the friend_request table. The indexable field is the uid_to field!
This is if you want it in know Iframe mode as you don't need Iframe mode any more
function sendRequest() {
FB.ui({
method: 'apprequests',
title: 'Invite friends to join you',
message: 'Come play with me.'
},
function (res) {
if (res && res.request_ids) {
var requests = res.request_ids.join(',');
$.post('FBRequest.ashx',
{ request_ids: requests },
function (resp) { });
}
});
return false;
}
If you want to find out the user ids of the people you just sent a request to. Then this code is what you need:
var request = {
message: msg,
method: 'apprequests',
title: 'Select some of your friends'
};
FB.ui(request, function (data) {
if (data && data.request_ids) {
// Get the uid of the person(s) who was/were invited
var uids = new Array();
FB.api("/?ids=" + data.request_ids.join(), function(data2) {
for (i = 0; i<data.request_ids.length; i++) {
uids[i] = data2[data.request_ids[i]]['to']['id'];
}
# do something with uids here
});
}
});
Don't know if this helps, but here's how I handle it.
Javascript:
function sendRequest() {
FB.ui({
display: 'iframe',
method: 'apprequests',
title: 'Invite friends to join you',
message: 'Come play with me.'
},
function (res) {
if (res && res.request_ids) {
var requests = res.request_ids.join(',');
$.post('FBRequest.ashx',
{ request_ids: requests },
function (resp) { });
}
});
return false;
}
Server side (FBRequest.ashx):
// get operation and data
var ids = HttpContext.Current.Request["request_ids"];
// if we have data
if(ids != null) {
// make batch graph request for request details
var requestIds = ids.Split(',').Select(i => long.Parse(i)).ToList();
var fbApp = new FacebookWebClient([AppId],[AppSecret]);
dynamic parameters = new ExpandoObject();
parameters.ids = ids;
dynamic requests = fbApp.Get(parameters);
// cycle through graph results and do stuff
dynamic req = null;
for(int i=0;i<requestIds.Count;i++) {
try {
req = requests[requestIds[i].ToString()];
// do stuff with request, save to DB, etc.
} catch (Exception ex) {
// error in finding request, continue...
}
}
}
You can access the list of user id's as part of the return data
FB.ui({
method: 'apprequest',
message: 'Use this thing',
}, function(result){
//a list of ids are in here
result.to;
});