I am creating a widget in js that will be implemented across many websites,
Facebook requires me to give them "my domain" so they will know that I am verified.
The problem is that the widget will be used from many websites, and I am not going to manuly list all of those domains to Facebook.
How can I enable my app to work from those different websites using js only? (for the widget)
Thanks in advance.
Your widget will probably need to load its FB code within an iFrame that is hosted on your own domain. Then you'll need to use some cross-domain / cross-iframe JS hacks to get your system to communicate with the page that uses it. (Here's a good resource on doing that... http://softwareas.com/cross-domain-communication-with-iframes) This is definitely a pain, but it's the only way I can think of to do what you're trying to do. There may be some good JS libraries out there at this point to make this easier, but I'm not immediately aware of any.
The other option is to create a bunch of Facebook applications that each belong to a different domain. This would also bring some pain in terms of maintenance, but it would simplify the JS code you'd need to write quite a bit. This approach has some upside in terms of robustness -- if one of the sites using your widget goes rogue and gets the application banned for whatever reason, you other client sites won't be affected.
Facebook used to provide a "clone application" tool but just now I couldn't find it.
i use ajax for something similar. i ajax to a php page, and use the php sdk for all the requests. cross domain just fine.
EXAMPLE: should request most recent albums updated on facebook and display cover photo linked to the album on facebook.
<div id="pagealbums"></div>
<script>
function showAlbums(){
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttpA=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttpA=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttpA.onreadystatechange=function()
{
if (xmlhttpA.readyState==4 && xmlhttpA.status==200)
{
document.getElementById("pagealbums").innerHTML=xmlhttpA.responseText;
}
};
xmlhttpA.open("GET","http://anotherfeed.com/feed.albums.php?pageid=facebook&type=list",true);
xmlhttpA.send();
}
showAlbums();
</script>
Related
I have created my app page on facebook. I have added the required setting like Google Play Package Name, Class name and key hashes but still when try to access that app page it is showing below given error instead of taking us to play store. I have search a lot in web but did not get the relevant post. But I assume this issue can be fixed by facebook settings. I would really appreciate any suggestion.
I've gotten the same error, and as far as I understand, the field "Mobile Site URL" no longer works, as of July 2017. (Apparently there was some abuse of this system.)
In order to redirect to your website, an offical Facebook support encouraged to redirect to the mobile website from within the game itself.
Be advised that according to the Platform Policy, redirecting away from Facebook must be done through a user interaction such as a button click. It should not be done automatically.
A simple solution may be something like this:
if (window.innerWidth < 992 && window !== window.top) {
if (confirm("To get the full mobile experience, we recommend playing the game directly on our website. Would you like to play there?")) {
window.top.location.href = 'https://www.example.com';
}
}
Source:
https://developers.facebook.com/support/bugs/1051463851558493/?disable_redirect=0
I'm developing website with a lot of HTML5 and CSS3 features. I'm also using iframe to embed several content on my website. It works fine if I open it using Chrome/Firefox/Safari mobile browser. However, if I share on facebook (post/page) and I opened it up with Facebook application with Facebook Internal Browser, my website is messed up.
Is there any tools or way to debug on Facebook Browser? Thanks.
This is how you can do the debugging yourself. It's painful, but the only way I've come across so far.
tl;dr Get the Facebook App loading a page on your local server so you can iterate quickly. Then print debug statements directly to the page until you figure out what is going on.
Get a link to a page on your local server that you can access on your mobile device (test in mobile safari that it works). See this to find out your local IP address How do you access a website running on localhost from iPhone browser. It will look something like this
http://192.xxx.1.127:3000/facebook-test
Post that link on your Facebook page (you can make it private so your friends aren't all like WTF?)
Click the posted link in the Facebook mobile App and it will open up in Facebook's mobile browser
Since you don't have a console, you basically need to print debug statements directly to the page so it is visible. Put debug statements all over your code. If your problems are primarily related to CSS, then you can iteratively comment out stuff until you've found the issue(s) or print the relevant CSS attributes using JavaScript. Eg something like (using JQuery)
function debug(str){$('body').append("<br>"+str);}
Quite possibly the most painful part. The Facebook browser caches very aggressively. If you are making changes and nothing has happened, it's because the content is cached. You can sometimes resolve this by updating the URLs, eg /facebook-test-1, /facebook-test-2, or adding dummy parameters eg /facebook-test?dummy=1. But if the changes are in external css or js sheets it sometimes will still cache. To 100% clear the cache, delete the Facebook App from your mobile device and reinstall.
The internal browser the Facebook app uses is essentially a uiWebView. Paul Irish has made a simple iOS app that lets you load any URL into a uiWebView which you then can debug using Safari's Developer Tools.
https://github.com/paulirish/iOS-WebView-App
I found a way how to debug it easier. You will need to install the Ghostlab app (You have a 7-day free trial there, however it's totally worth paying for).
In Ghostlab, add the website address (or a localhost address) you want to debug and start the session.
Ghostlab will generate a link for access.
Copy that link and post it on Facebook (as a private post)
Open the link on mobile and that's it! Ghostlab will identify you once you open that link, and will allow you to debug the page.
For debugging, you will have all the same tools as in the Chrome devtools (how cool is that!). For example, you can tweak CSS and see the changes applied live.
If you want to debug a possible error, you can try to catch it and display it.
Put this at the very top of your code:
window.onerror = function (msg, url, lineNo, columnNo, error) {
var string = msg.toLowerCase();
var substring = "script error";
if (string.indexOf(substring) > -1){
alert('Script Error: See Browser Console for Detail');
} else {
var message = [
'Message: ' + msg,
'URL: ' + url,
'Line: ' + lineNo,
'Column: ' + columnNo,
'Error object: ' + JSON.stringify(error)
].join(' - ');
alert(message);
}
}
(Source: MDN)
This will catch and alert your errors.
Share a link on Facebook (privately), or send yourself a message on Facebook Messenger (easier). To break the cache, create a new URL every time, e.g. by appending a random string to the URL.
Follow the link and see if you can find any errors.
With help of ngrok create temporary http & https adress instead of your ordinary localhost:3000(or other port) and you could run your app on any devices. It is super easy to use.
and as it was written above all other useful information you should write somewhere inside div element (in case of React I recommend to put onClick on that div with force update or other function for getting info, sometimes it helps because JS in FB could be executed erlier than your information appears). Keep in mind that alerts are not reliable, sometimes they are blocked
bonus from ngrok that in console you will see which files was
requested and response code (it will replace lack of network tab)
and about iFrame.If you use it on other domain and you rely on cookies - you should know that facebook in-app browser blocks 3rd party cookies
test on Android and iOS separately because technicaly they use different browsers
I'm created a website in JSF 2 (primefaces 3.3) and now I want to create a mobile version. I have diferents views for desktop/mobile.
I already create a custom viewhandler to detect mobile browsers.
It seens to work fine. But what a don't understand is how to redirect the user to the mobile pages. I've searched a lot and nobody says where this step occurs.
In what step should i do that? Redirect the user, and how to?
Do the browser detection job in a Filter mapped on FacesServlet instead of in a ViewHandler.
It's then as easy as
if (needsRedirectToMobileURL) {
response.sendRedirect(mobileURL);
}
else {
chain.doFilter(request, response);
}
A ViewHandler isn't intented to manipulate the request/response. It's intented to handle the JSF view for the given request.
Generally you do not want to redirect to a mobile site but instead use css media queries to determine what the browser size is and use different css for that. Here is a quick example
http://css-tricks.com/resolution-specific-stylesheets/
I am trying to get an App to redirect to an external website. I have found a company who has done it (See image). If you type in their name "Safarinow" the first result comes up which is an App. When you click the app you get redirected to "http://www.safarinow.com".
Would anyone know how to achieve this?
p.s. I am not actually a developer but rather a Social media manager so I have a limited understanding of coding etc. I have just been asked to find out how to do this for the lazy dev team.
Thanks in advance
That could be done by using Javascript in your application iframe. That javascript can change the top-url like that:
window.top.location = 'http://www.my-website.com/';
You just have to run this code when your website is loaded. For example by using jQuery:
jQuery(window).load(function() { window.top.location = 'http://www.my-website.com/'; });
I have a facebook Iframe application with multiple PHP pages in it.
I have some links that point relatively to the files inside my "iframe folder".
Having some issues with session variables inside the iframe. I set some session variables but they do not persist from one page to another.
This does work on other browsers.
I've been reading that Safari does not support Cross-Domain cookies and this might be the problem , but im not sure how to fix this.
Any help?
I believe this solution has become obsolete with the latest (6.0 and later) versions of Safari.
Safari by default does not allow cookies to be set from third parties. This affects Facebook iframe applications because the user is accessing a page served from apps.facebook.com but the iframe is being served from yourdomain.com, the "third party" in this case.
There are several several solutions mentioned around the web. The best I've found and one recommended by Facebook in its list of miscellaneous issues is to fake a POST request to yourdomain.com using JQuery. This solution detailed by Anant Garg works in general for different host/iframe domains and needs to be adapted for Facebook apps. The key parts are:
$("body").append('
<iframe id="sessionframe" name="sessionframe" onload="submitSessionForm()" src="http://www.yourdomain.com/blank.php" style="display:none;"></iframe>
<form id="sessionform" enctype="application/x-www-form-urlencoded"
action="http://www.yourdomain.com/startsession.php"
target="sessionframe" method="post"></form>');
var firstTimeSession = 0;
function submitSessionForm() {
if (firstTimeSession == 0) {
firstTimeSession = 1;
$("#sessionform").submit();
}
}
Another solution by Will Henderson is to instrument each link on your page with session information using a Javascript function. Then modify your server code to capture this session information by reading it from GET parameters.
I wrote the blog post Dominic refers to in his answer.
The problem is that the default behavior of Safari is to only accept cookies from sites that you visit. This excludes "third party" cookies. Safari treats the page inside an IFRAME as a third-party site, and until you interact with that content (by clicking a link, for example), it will refuse those cookies.
Your PHP code needs to set a cookie on the first page that uses the session in order for that session to persist from one page to another, but if the session variables are in the very first page in the IFRAME, you have a chicken-and-egg problem.
My solution is to retain all of the special Facebook parameters through to the second page loaded into the IFRAME. Because you've interacted with it, cookies set on the second page will persist, and this allows your PHP code to keep whatever state it needs to communicate back to Facebook.
This won't likely help your PHP session, though, so I suggest adding another parameter to links on the first page that allows the second page to look the session up, or otherwise recreate it.
I think the best solution is to manually keep track of the session ID i.e. by using session_id($_GET['session]); Just make sure you do this before calling session_start(); and everything works.
Safari accepts cookies only from the page the user navigates to. The easiest and most effective way to fix this is to redirect the request from landing page of your canvas app to a different page on your domain using top.location.href and redirect the user back to the canvas app from that page.
For example, if abc.php is your landing page and the canvas URL is facebook.com/abc. First redirect the request from abc.php to a different page like xyz.php then redirect again from xyz.php to facebook.com/abc. Don't forget to start the session in xyz.php.
This is the simple fix...
and thanks for all the input. I ended up solving the problem by appending the "signed_request" paramter on every page. I just put it in as a hidden field and set it in the code behind. That way I managed to get it to work in Safari. Hope it works for you too.
With the release of Safari 7, not only 3rd Party cookie is being blocked. Local Storage as well as WebDB, any kind of website data are being blocked. When you go to Safari Preferences (CMD+comma), Under privacy tab, on Safari 7, it now says : "Block cookies and other website", originally was "Block cookies". That confirms the changes.
Other browsers might follow through in the future. Most probably Firefox. Chrome, cough *cough* probably not.
You probably have to employ some workaround using redirection technique or popup similar to what disqus did.
If you using .NET then there is a much simpler solution to this problem.
Just set cookieless to false in your web.config. Ex:
sessionState mode="InProc" cookieless="true" timeout="60"
Its a lot easier than posting an iframe, or opening a popup window with the url of the iframe.
kind regards,
David
I used this header with PHP, that fix my problems
if ( strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') ) header('P3P:CP="IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT"');