In sample, have two avatar URLs, one of them doesn't show up in ionic app and just do download in browser, instead to open in tab.
So if put this url that doesn't work(1) into [src] attribute, image is not loaded in ionic emulator and in real device, but everything is OK in Chrome.
https://graph.facebook.com/105656846898488/picture?width=200&height=200&redirect=false&type=normal
https://graph.facebook.com/67563683055/picture?width=200&height=200&redirect=false&type=normal
ex. of usage:
<img [src]="user.avatar">
Parse method:
let x = new XMLHttpRequest();
x.open("GET", `https://graph.facebook.com/${facebookUserId}/picture?width=200&height=200&redirect=false`, false);
x.send(null);
return JSON.parse(x.responseText).data.url;
I guess something with facebook server setting, because both images pulled from different server domains.
Image with facebook userid: 67563683055 - work's good.
Related
I am trying to change the start_url of my PWA app from one page to another but need to understand the working. Can anyone please tell me what will happen to users of my PWA app user (with old start_url). Is there any some kind of update happen after which old user can get the updated start_url.
For example:
PWA with old start_url: www.testweb.com/oldurl
PWA with new start_url: www.testweb.com/newurl
will users of PWA with old URL will get any URL after I change the start_url.
With Chrome, it depends on whether you're on desktop or mobile. On desktop, changing the start_url will have no effect, but on Android, it should be updated within a day or two. See How Chrome handles updates to the web app manifest for details about how manifest changes affect an installed PWA.
My recommendation would be don't change the start_url but instead, use the service worker to redirect the browser to the new page. For example, you could use something like:
self.addEventListener('fetch', (event) => {
// Check if URL is old start_url, if so redirect to new URL
if (event.request.url.endsWith('/previous/start_url.html')) {
const resp = Response.redirect('/new/start_url.html', 301);
event.respondWith(resp);
}
});
I am using InAppBrowser plugin to open a specific website URL which uses current geo-location to give results. On normal mobile browser like chrome or FireFox, website asks to enable location but on InAppBrowser plugin it won't and therefore, I think, I can't get results according to user location. Is there are any other ways to open a website URL and get results according to current user location.
webiste example like: https://www.foodpanda.pk/
I've also tried to make an iframe and open URL like in this post
Webview In Ionic 3
let url = "https://www.foodpanda.pk/";
let target = "_self";
let options = "location=yes,zoom=no";
alert("starting in-app-browser");
const browser = this.iab.create(url, target, options);
browser.on('exit').subscribe(event => {
alert("Browser exiting");
this.platform.exitApp();
});
Turns out, my application don't have location permissions, so in order to ask user to grant my application permission, I used this plugin Location Accuracy. After that websites on in-app-browsers are able to get results according to user current location.
I use the url https://graph.facebook.com/{app_user_id}/picture?width=120&height=120 to show the user picture on my app, but since this morning, it has stopped working on mobile devices.
Now, the same url redirects to https://lookaside.facebook.com/platform/profilepic/?asid={app_user_id}&height=120&width=120. This url works on desktop web, but on mobile it redirects again to https://m.facebook.com/platform/profilepic/?asid={app_user_id}&height=120&width=120 and the mobile web refuses to output the image. If I try to load it in the address bar, it is downloaded instead of showed.
I have searched for any change on the Facebook graph api about this but didn't find anything. Any hint to solve this? Thanks.
This seems to be a bug. Started happening to my app earlier on this morning. Still no fix as of yet.
A few bug reports that have been submitted on Facebook for Developers:
Profile Pictures Can't Load
Graph API Profile picture doesn`t work on mobile
Cross site policy error while accessing graph pictures
I faced the same issue today and I'v found a solution for that and it worked for me.
After login we get below Profile pic URL
http://graph.facebook.com/11111111111/picture?type=large&height=320&width=420
11111111111 is your social id/facebook id
now we need to change this URL in order to display image,
here is the code.
try {
profile_pic = new URL("https://graph.facebook.com/" + id + "/picture?type=large");
Log.i("profile_pic", profile_pic + "");
Picasso.with(getContext()).
load(profile_pic.toString())
.placeholder(R.drawable.img)
.into(imageviewId);
}
catch (MalformedURLException e) {
e.printStackTrace();
}
id is your socialid/facebook id
in short we just need to remove &height=320&width=420 from url.
you can compare both the url:
http://graph.facebook.com/11111111111/picture?type=large&height=320&width=420
https://graph.facebook.com/11111111111/picture?type=large
and yes you need to change http to https as well
Though I didn't find any official announcements, Facebook during last few days changed their api's, now when you request user's public profile the picture url has extra parameters, ext and hash
Calling the url without these params returns 404 error.
Not sure if the change is affecting Page Scope ID's only.
Currently, when you request user's public profile data the url looks like this
https://lookaside.facebook.com/platform/profilepic/?psid=PAGE_SCOPED_ID&height=1024&ext=1522585606&hash=AeThc8c7EQDFgShs
before it was just
https://lookaside.facebook.com/platform/profilepic/?psid=PAGE_SCOPED_ID&height=1024
It seems to me the only known solution currently would be requesting new public profile data and updating your database.
Hope that helps.
I'm developing a facebook page tab app. When I set page tab URL in app settings to something like localhost/fbapp, it doesn't work since the page tab is not simply iframe. Is there any workaround to resolve this?
EDIT
I'm building facebook page tab with ASP.NET MVC-3.0 with fb C# SDK.
What I've tried so far is to modify hosts file to point the URL I have on app settings to localhost(127.0.0.1). I've been testing facebook app in this way always but it doesn't work in facebook page tab.
In Application setting in page tab url set
http://localhost/yourpagetabdir/
I am using this setting for my page application test frmlocalhost its works fine from my ASP.Net Development server if you are using IIS server make sure your IIS server allow page in iframe.
after this if u want to get page-signed request
Facebook.FacebookConfigurationSection s = new FacebookConfigurationSection();
s.AppId = "AppID";
s.AppSecret = "Secret";
FacebookWebContext wc = new FacebookWebContext(s);
dynamic da = wc.SignedRequest.Data;
dynamic page = da.page;
string curpageid = page.id;
bool isLiked = page.liked;
bool isAdmin = page.admin;
Try editing your hosts file so that when you go to http://example.com it links to your http://localhost/yourapp
Here's how to do it:
Windows: http://www.trailheadinteractive.com/creating_multiple_virtual_sites_a_single_apache_install_windows_xp (your localhost URL should have a valid website format: 127.0.0.1 dummydomainname.tld)
MacOS: http://danilo.ariadoss.com/how-to-setup-virtual-hosts-mamp-environment/ (again, make sure you have a valid website format)
Linux: You probably know how to do this already :)
This should work as then the iframe would point to a valid URL, which on your local machine would point to your content. Note that this won't work if you access the tab from other computers since for them the URL would point to something else (or nothing, depending on what domain name you choose).
Using FB PHP SDK for example, you can post the signed_request and parse it with a few lines:-
require_once ("facebook.php"); // this file comes from the SDK
$config = array();
$config['appId'] = 'get_appID_from_app_menu';
$config['secret'] = 'get_secret_below_appID';
$facebook = new Facebook($config);
$signed_request = $facebook->getSignedRequest();
print_r($signed_request);
Avoid that lenghty example given in FB's blog. Good luck coding :)
I figured out the issue with facebook page tab. It seems that they don't accept http on page tab even I have sandbox mode enabled. All I have to do is set up IIS to work with https and run the app over the ssl. It is now working perfectly. Thank you guys for all help
I have developed a Facebook app using the C# SDK and it is working fine. Now I want to also enable it on mobiles, so I tried to set the "mobile url" to the same one as my canvas url (which is a cloudapp.net address). However, when I try to access it from a mobile, it seems to go into a redirect loop involving my canvas url, the apps.facebook url and the m.facebook/apps url. Sometimes it goes out of the loop and I get the facebook error message saying : "the mobile version of the app is unavailable because it is misconfigured. It appears to be caught in a redirect loop."
I think it may have to do with the fact that the facebooksettings in the webconfig file specify that my cloudapp page should redirect to the apps.facebook.com page, which then redirects to the mobile url and so on. Can someone tell me how to solve this problem - I just want my mobile url to be the same as my canvas url.
Thanks.
If the request is from mobile add extra logic
For v6,
var fb = new FacebookClient();
var desktopLoginUrl = fb.GetLoginUrl(new { .... });
var mobileLoginUrl = fb.GetLoginUrl(new { ...., mobile = true });
For v5,
var urlBuilder = new UrlBuilder(oauthClient.GetLoginUrl(...));
urlBuilder.Host = "m.facebook.com";
var loginUrl = urlBuilder.Uri;