I have an application built with CodeIgniter that I have deployed as an app on Facebook.
I did this by adding it as a Canvas Page, so that it can be accessed at apps.facebook.com/myapp.
It loads up fine in the canvas, but none of my app's css is loaded. The page is without styling. Also none of my links seem to work.
Is this because of the base_url(); that I used throughout by app to link styelsheets and navigation?
Not sure what to do.
When I go directly to the app via the web address, which is the canvas url, it loads up and looks fine and as it should.
It might be your base_url(); set in Codeigniter since as you said it is used through the app to link everything.
When setting up the canvas in the dashboard you should have entered, and would have been required to enter a secure canvas url. This is the same as the canvas url except with https.
Change your base_url() in you config.php file to https and reload the canvas. This would have to change to the secure canvas url because you use the app as a logged in Facebook user. This si why the secure canvas url is required when setting up.
Let me know.
Related
Google crawl-bot is triyng to access https://my-website.com/.../index.231e3e.css
But, because my app is a react-router app, I have this redirect rule configured:
[[redirects]]
from = "/*"
to = "/"
status = 200
force = false
which redirects the css path to the main home page (loading the website, rather than a css file).
I'm not sure how the CSS gets loaded in the background when you do visit the normal website - because the styles load in fine - but when I directly access this css link, it redirects to the home page.
I'm wondering how I can fix this redirect issue allowing google indexer to properly style my page (currently the page looks broken in the rendered screenshots, due to the missing css files which failed to download).
It seems now the css loads (maybe 1 time error) but the web page is still rendered incorrectly with no css
I'm using Vue Router history mode for my Vue.js app. My problem is that, when I try to refresh a page that is not the root page, or enter its URL in the browser address bar, "page not found" 404 is displayed.
Now, in the Vue Router guide they warn about this (see https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations), and suggest the solution to "add a simple catch-all fallback route to your server. If the URL doesn't match any static assets, it should serve the same index.html page that your app lives in".
With this solution, if I try to access one of my non-root pages (with corresponding URL) through the browser address bar, the root page will be displayed. Is this interpretation correct?
My question: is there a way to achieve the behaviour such that I can access my different pages directly from the browser address bar, and upon refresh stay on the same page?
If you use the aforementioned configuration. Your backend will route all requests to index.html. Then when the Vue-Router is mounted, it will check the URL and provide the corresponding component. The implementation above will work.
While using FlowRouter if I load my page any locally served images (images/myImage.png) works fine. But if I navigate to a page and then navigate back (home page -> about page -> home page) the image is broken. However in the developer console, if I hover over the image source, the image appears fine.
This is not an issue with images served from another server.
Update
I never solved this issue, but because this still seems to be an issue with many people. I'm posting my work around. Based on the Meteor communities advice, I switched to cloud based image hosting like Cloudinary or AWS
It sounds like you are sometimes accessing images using their file paths. With Meteor, to serve static files properly, they need to be in the /public folder of your project. So you should put them in /public/images, and then reference them according to the following example:
The file
/public/images/foo.png
is displayed by
<img src="/images/foo.png>
See here: https://guide.meteor.com/structure.html#special-directories
I realized that although my images worked with the following:
Image is in /public/images/name.png
<img src="images/name.png">
But then I changed the url to:
<img src="/images/name.png">
Now it works and doesn't break.
Problem — when opening a Firebase Dynamic Link on Facebook Mobile, the Facebook Browser consumes the deep link and does not open the intended mobile app
Question — is there a good workaround in Firebase to help Facebook deliver on the promise of presenting my Dynamic Link as intended?
We are aware of http://applinks.org, and that Facebook is a contributor. Does Firebase have a way to configure their server using the AppLinks spec so that Facebook will pass through the Deep Link to our app instead of consuming it?
Background — I have created a Firebase Dynamic Link for an iOS and Android app.
The Dynamic link delivers everything I expect and is a fantastic experience.
When opened on iOS, it navigates to the App. If not installed, it goes
App Store
When opened on Android, it navigates to the App. If not installed, goes to Play Store
When opened on non-mobile, it navigates to our Website
On Facebook mobile, neither 1 nor 2 happens. The result is that it goes straight to the mobile web experience, thereby eliminating the promise of the Firebase Dynamic Link
To avoid this cases we made a webpage which redirects to firebase dynamic link.
With this solution we can:
Use our domain, not the firebase url.
Ensure that firebase links works in every cases, for example when it opens from a custom browser (fb, samsung).
The disadvantage of doing this is that you'll always need to pass through a web page with an redirect.
I recently had to integrate dynamic links to one of my clients apps, and I got lots of trouble because of deeplinks not working on facebook+android_app.
As I couldn't move to branch.io because of princing reasons, I had to work it out on a different way so followed #Rahul Shukla advise.
I ended with a very simple nodejs+express setup where I receive the dynamic link ID and return a HTML with all the meta-tags required by facebook applinks (android + iOS) and a redirect script (window.location = 'your_dynamic_link') for other clients to be used.
The best part is that now on facebook the app opens directly without the preview page in both platforms and the link works on all browsers via the script redirect.
Here is the gist
the solution I found was to redirect to the dynamic link from a webpage like this
window.location.href = "intent:https://example.page.link/2wertygf456#Intent;end";
this will open the link in your system default external browser and the deeplinks works perfectly.
to trigger this only on facebook in-app browser
if (ua.indexOf("FBAN") != -1 || ua.indexOf("FBAV") != -1) {window.location.href = "intent:https://example.page.link/2wertygf456#Intent;end";}
We were struggling with the similar issue and here's how we finally solved it:
Say this is the final firebase url you are going to share
https://xxxx.app.goo.gl/?apn=com.your.package&link=http://www.yourwebsite.com
Now in the index.html page of your website, add the following meta tags
<meta property="fb:app_id" content="your_fb_app_id" />
<meta property="al:android:package" content="com.your.package" />
<meta property="al:android:app_name" content="YourAwesomeApp" />
<meta property="al:android:url" content="somescheme://XYZ" /> <!-- identifiable by your app, your app must handle this data scheme inside your manifest's intent-filter tag --!>
<meta property="al:web:should_fallback" content="true" />
<meta property="al:web:url" content="http://www.yourwebsite.com/" />
Now the app launches on clicking on the facebook post shared using this link.
I've tried some ways but totally fail. When I use the dynamic link in Facebook post, it shows a dialog to ask me if I wanna open application (I did not install my application yet). Although I accept to open app, nothing happens, it does not open Apple Store as expected
I have to use link like below to force it open apple store app
https://myapp.app.goo.gl/?link=http://mylink.com&ifl=https://itunes.apple.com/us/app/apple-store/idxxxxxxxx%3Fmt%3D8%26ct%3Dutm_source
Deep link with facebook app not work in android because facebook uses InAppBrowser, If you want to make your deep link url workable in facebook. You can change facebook settings like:
In Facebook App: Goto Profile -> App Setting -> check Links open externally.
After changing the setting you will be open deeplinks from facebook app android
I have a test web page in Azure cloud where I have login page in https. My problem is that if I get to the login page via redirect, neither the CSS or images get loaded in WP7 default browser - IE. Certificate is a self signed one - so I get the warning from browser before getting to the actual page.
The strange thing is that if I just click on refresh button after the initial loading - CSS and images gets loaded OK. Also, if I go to the https login page directly without going through redirect - everything works OK again.
Server side is done with MVC3 and https redirect is done by adding [RequireHttps] attribute before the controller.
Fiddler logs do not show anything that would help me. In the redirect case I can see that after the html page has been loaded there is handshaking for getting the https tunnel up, but no requests for css or images. When I click refresh, Fiddler log seems to start the same way, but this time also CSS and image is loaded.
I have done quite a bit googling on this and none of the answers that I have found seem to help. CSS and image are loaded with relative links, so that should not be the issue. Directory access rights should be OK as well, because it works without redirect. It also works OK in Desktop IE and other mobile browsers that I have tried on.
Any help would be greatly appreciated.