Closed devinrhode2 closed 7 years ago
bugant
commented
8 years ago @devinrhode2 can you please provide a jsfiddle (or something similar) that reproduce your issue... so that it would be easier to debug your case.
Are you providing the correct parameters to initialize your Facebook app? The fact that removing the return statement makes your app to go on could signal the fact that the beforeModel (with the return statement) is returning a Promise which will be rejected.
bugant
commented
8 years ago @devinrhode2 any news on this?
devinrhode2
commented
8 years ago I should share my package json, but honestly I was just going to use globals and init in my didInsertElement hook, I'm trying to have it pickup the markup for a "Send to Messenger" button
On 28 Sep 2016 05:17, "Matteo Centenaro" notifications@github.com wrote:
@devinrhode2 https://github.com/devinrhode2 any news on this?
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/pitchtarget/ember-cli-facebook-js-sdk/issues/11#issuecomment-250150224, or mute the thread https://github.com/notifications/unsubscribe-auth/AAg8qJnrJ6a5axRe06-mlSYIlK1SfJpMks5qulq7gaJpZM4KFjIC .
devinrhode2
commented
8 years ago So I definitely am passing in the right parameters to initialize the facebook sdk, I've tried just about everything and think somewhere along the line had it working, but, the facebook's messenger button flat out won't, so don't know the exact conditions where my code was working.
Going to write the code as if I'm handing off to a professor for a grade. This has to work by end of week, I'll keep updating this thread.
Here's my bower.json
{
"name": "ember-homepage",
"dependencies": {
"ember": "~2.7.0",
"ember-cli-shims": "0.1.1",
"ember-qunit-notifications": "0.1.0",
"hammer-time": "1.0.0",
"typed.js": "1.1.1",
"foundation-sites": "^6.2.1"
}
}and package.json
{
"name": "ember-homepage",
"version": "0.0.0",
"description": "Small description for ember-homepage goes here",
"private": true,
"directories": {
"doc": "doc",
"test": "tests"
},
"scripts": {
"build": "ember build",
"start": "ember server",
"test": "ember test"
},
"repository": "",
"engines": {
"node": ">= 0.10.0"
},
"author": "",
"license": "MIT",
"devDependencies": {
"broccoli-asset-rev": "^2.4.2",
"broccoli-clean-css": "1.1.0",
"ember-ajax": "^2.0.1",
"ember-browserify": "1.1.12",
"ember-cli": "2.7.0",
"ember-cli-app-version": "^1.0.0",
"ember-cli-autoprefixer": "0.6.0",
"ember-cli-babel": "^5.1.6",
"ember-cli-dependency-checker": "^1.2.0",
"ember-cli-facebook-js-sdk": "1.0.3",
"ember-cli-foundation-6-sass": "0.0.13",
"ember-cli-htmlbars": "^1.0.3",
"ember-cli-htmlbars-inline-precompile": "^0.3.1",
"ember-cli-inject-live-reload": "^1.4.0",
"ember-cli-jshint": "^1.0.0",
"ember-cli-qunit": "^2.0.0",
"ember-cli-release": "^0.2.9",
"ember-cli-sass": "5.5.1",
"ember-cli-sri": "^2.1.0",
"ember-cli-test-loader": "^1.1.0",
"ember-cli-uglify": "^1.2.0",
"ember-data": "^2.7.0",
"ember-export-application-global": "^1.0.5",
"ember-hammertime": "1.0.3",
"ember-load-initializers": "^0.5.1",
"ember-normalize": "1.0.0",
"ember-redux": "1.5.3",
"ember-resolver": "^2.0.3",
"ember-suave": "4.0.0",
"ember-truth-helpers": "1.2.0",
"ember-typewriter": "0.0.4",
"liquid-fire": "0.25.0",
"loader.js": "^4.0.1",
"normalize.css": "4.1.1",
"redux": "3.6.0",
"redux-thunk": "2.1.0"
}
}Is there anything ember-cli-facebook-js-sdk does to prevent the FB variable from becoming global?
devinrhode2
commented
8 years ago I might also be getting trolled by ember's default security addons.. more to come
devinrhode2
commented
8 years ago Is it necessary to modify the content-security-policy? Is this a thing to be concerned about even?
devinrhode2
commented
8 years ago Ah don't have ember-cli-content-security-policy installed..
devinrhode2
commented
8 years ago So actually I think adblock was trolling me http://stackoverflow.com/a/4917320/565877 I also have some other chrome extensions that block facebook widgets. Lo-and-behold, I'm kinda trolling myself :)
devinrhode2
commented
8 years ago A general developer concern that I think needs to be specified in the documentation is "I'm using markup from facebook, how can I make sure the sdk recognizes the markup after ember has inserted it?" I'm using a didInsertElement hook on my landing-page component (can't have a damn didInsertElement hook on index! so my index template is just {{landing-page}} {{outlet}} {{yield}} )
I seem to have it working. I'm not sure what was originally wrong. I guess I'll close this once I finish testing
devinrhode2
commented
8 years ago In my 'index component' (landing page component.js) I feel compelled to include this call to init in the didInsertElement hook:
import Ember from 'ember';
import config from './../../config/environment';
export default Ember.Component.extend({
fb_messenger_app_id: config.fb_widget_ids.fb_messenger_app_id,
fb_page_id: config.fb_widget_ids.fb_page_id,
didInsertElement() {
console.log('landing page component didInsertElement');
if (window.FB) {
FB.init(config.FB);
} else {
console.error('FB is not defined! :( setting fbAsyncInit, hopefully it gets called');
window.fbAsyncInit = function() {
FB.init(config.FB);
};
}
}
});This is some pretty stupid code, I'm just calling init if FB is defined, since I have no knowledge of when ember-cli-facebook-js-sdk would have already called init, I want to make sure it has caught my markup in the template that I know has now been inserted, since didInsertElement is being called.
devinrhode2
commented
8 years ago I do need to have the recommended application route, with the return statement, for things to work. Q: Could someone skip init by simply removing the code to inject the service in the route?
devinrhode2
commented
8 years ago I don't seem to need this code, seems to work without it:
didInsertElement() {
console.log('landing page component didInsertElement');
if (window.FB) {
FB.init(config.FB);
} else {
console.error('FB is not defined! :( setting fbAsyncInit, hopefully it gets called');
window.fbAsyncInit = function() {
FB.init(config.FB);
};
}
}I am still stuck on figuring out how to get the fb iframe to actually render the button, but the javascript sdk side is working, the facebook markup gets modified, fb-root becomes present, etc.
bugant
commented
8 years ago @devinrhode2 you can make the addon to skip FB init: https://github.com/pitchtarget/ember-cli-facebook-js-sdk#skipping-facebook-sdk-init
Please, let me know if you have any other issue with this or if we can close it.
devinrhode2
commented
8 years ago Dude, can you respond to all my questions? There are at least documentation issues that need to be addressed.
My original error (not to discount the other concerns I've raised..) was caused from not having an app id of a reasonable value. If a dev forgets the placeholder "APP_ID" string from facebook docs, they'll run into this issue. They should get an error in this case.
On 29 Sep 2016 00:52, "Matteo Centenaro" notifications@github.com wrote:
@devinrhode2 https://github.com/devinrhode2 you can make the addon to skip FB init: https://github.com/pitchtarget/ember-cli-facebook-js-sdk# skipping-facebook-sdk-init
Please, let me know if you have any other issue with this or if we can close it.
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/pitchtarget/ember-cli-facebook-js-sdk/issues/11#issuecomment-250396145, or mute the thread https://github.com/notifications/unsubscribe-auth/AAg8qJzFULRT0KQAQP6Rd5kyG2QObmIuks5qu25DgaJpZM4KFjIC .
bugant
commented
7 years ago @devinrhode2 please have a look at the PR #13 and let me know if you find it could be OK to consider your issue close. Please, note that if you want to try the new implemented function (xfbml_parse) you need to use the code from the fix-readme-for-app-id branch.
More precisely, @devinrhode2 I think the following link could have the info needed to solve your problem with XFBML tags: https://github.com/pitchtarget/ember-cli-facebook-js-sdk/tree/fix-readme-for-app-id#forcing-xfbml-tag-re-parsing
When I remove the
returnkeyword in the recommended application route beforeModel hook, my app renders. When I keep thisreturnkeyword in. The app fails to render, giving no errors.application route example code:
These are all the console logs for the fail case:
These are all my logs from the successful case: