I have integrated Facebook Customer Plugin on one of our websites. I followed the instructions in the developer documentation. It is working fine when there is an active facebook session. However, the plugin does not appear at all when there is no active fb session. I might be missing something but I have no clue on what that is.
The solution for me was adding #xfbml=1&version=v2.12&autoLogAppEvents=1 after the xfbml.customerchat.js file like :
js.src = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js#xfbml=1&version=v2.12&autoLogAppEvents=1';
i solved my problem using this script :
<div class="fb-customerchat"
page_id="<ENTER-YOUR-FACEBOOK-ID-HERE>"
minimized="true">
</div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'facebook-developer-app-id',
autoLogAppEvents : true,
xfbml : true,
version : 'v2.11'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- Your customer chat code -->
<div class="fb-customerchat"
attribution=setup_tool
page_id="your-page-id"
theme_color="#BE59B9">
</div>
Another case might be that, fb messenger only show when it it hosted, not locally.
For more info have a deep look at doumentation:
https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin
It is May 2018 now, the instruction in Page --> Settings --> Messenger platform --> Customer chat plugin is much more clear.
Plus checking Country Restrictions
I only added this code to the customer chat code provided in the page's settings:
window.fbAsyncInit = function() {
FB.init({
appId : '1175565702494581', // Trokis Philippines App ID; you may use your App ID but this App ID might work on you too.
autoLogAppEvents : true,
xfbml : true,
version : 'v2.11'
});
};
Original Code:
<script>
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- Your customer chat code -->
<div class="fb-customerchat"
attribution=setup_tool
page_id="{your-page-id}"
theme_color="#BE59B9">
</div>
Final Code:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '1175565702494581',
autoLogAppEvents : true,
xfbml : true,
version : 'v2.11'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- Your customer chat code -->
<div class="fb-customerchat"
attribution=setup_tool
page_id="{your-page-id}"
theme_color="#BE59B9">
</div>
Well, shamelessly it was the "Whitelisted Domains" that I didn't operate right.
After you insert your domain you should click "Save"...
At first I tried with a code generated by Facebook Customer Chat Plugin wizard - no luck. To make it work I had to add FB.init section providing valid developer appId:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR-APP-ID-HERE',
autoLogAppEvents : true,
xfbml : true,
version : 'v2.11'
});
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/pl_PL/sdk/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Your customer chat code -->
<div class="fb-customerchat"
attribution=setup_tool
page_id="YOUR-PAGE-ID-HERE"
theme_color="#ed1d24"
logged_in_greeting="Hello, how can we help you?">
</div>
You can find more info on the Facebook Customer Chat Plugin here
For me problem was, that i had whitelisted non www domain, but opened it through www. Both cases should be added as whitelist cases.
If you are using brave and probably debugging the site with included messenger plugin code. Most likely you'll find setting Block cross-site trackers to be disabled, Block scripts to be disabled, Cookies to be Allow all cookies, and lastly Fingerprinting to Allow all fingerprinting be helpful.
Once you changed the settings and you find that you have no problem in your code, then it will be most likely to work.
If you are using Angular Framework you have to know that you need to add your code in the index.html page and not in the app or component. That solved my problem.
Mine was because my "page visibility" was set to "page unpublished". So I resolved mine by changing the "page visibility" to "page published"
page setting->General->page visibility
Found a solution. If anyone encounters this, please check your Facebook Page's Country Restrictions (Settings->General->Country Restrictions). It must be available everywhere in order for the plugin to render even if there is no active session
Related
I'm trying to add Facebooks SDK code right after my tag on the website built with React, but i'm getting errors. I think it's because my homepage is a .jsx template, but i'm not sure how else to include this code:
<script>
window.fbAsyncInit = function () {
FB.init({
appId: '1813842465324998',
autoLogAppEvents: true,
xfbml: true,
version: 'v2.11'
}); <- unexpected token, expected "}". SYNTAX ERROR
// Broadcast an event when FB object is ready
var fbInitEvent = new Event('FBObjectReady');
document.dispatchEvent(fbInitEvent);
};
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) { return; }
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
JSX does not allow JavaScript tags. Instead, just use the whole JavaScript code in componentDidMount. Ideally, you would put it in a separate file for handling the JS SDK of Facebook.
It would be pointless to use a script tag anyway, after all you are using a JavaScript file already. Also, the render function could be called multiple times, but you should only load the JS SDK once.
So I have a simple application AngularJs and Spring mvc. I have a controlller that mapped to the angularJs page and I have this code in a jsp page :
<div ng-app="myApp" ng-controller="myCtrl">
<p>The name is <span ng-bind="person.lastName"></span></p>
{{ lastName }}
</div>
<script src="applications.js"></script>
<script src="controllers.js"></script>
application.js :
var app = angular.module("myApp", []);
controllers.js :
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName= "Doe";
});
when I run this with Pivotal it dosn't run, but when I access the file directly within my browser it works like a charm, Someone care to explain pls ?
Thank you.
EDIT
WebConfig.java :
public class WebConfig extends WebMvcConfigurerAdapter {
#Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/resources/**")
.addResourceLocations("/resources/");
}
#Override
public void configureDefaultServletHandling ( DefaultServletHandlerConfigurer configurer )
{
configurer.enable();
}
}
resources folder :
The URL : http://localhost:8080/gestionprojet/Project/angularjs
My Controller :
#RequestMapping("/angularjs")
public String getAngularJs() {
return "AngularJs";
}
First of all, your files are under /WEB-INF/resources, but you have configured spring to load static resources from /resources. So they can't be served at all. The config should be
registry.addResourceHandler("/resources/**")
.addResourceLocations("/WEB-INF/resources/");
The URL of your page is
/gestionprojet/Project/angularjs
Your page tries to load the script using the relative path
applications.js
So the corresponding absolute path where the browser looks for the JS files is
/gestionprojet/Project/applications.js
which doesn't match with the URLs you choose to serve static resources from. Assuming /gestionprojet is the context path of the application, the absolute URL should be
/gestionprojet/resources/applications.js
So the source code in the JSP should thus be
<script src="${pageContext.request.contextPath}/resources/applications.js"></script>
I am trying to set up Facebook and Google authentication through FirebaseUI in my Cordova/PhoneGap app, and I am receiving an error when the "Sign in with X" buttons are clicked. The error states the following:
Refused to display 'https://www.facebook.com/login.php?skip_api_login=1&api_key=643683385780436…_&display=page&locale=en_US&logger_id=05e536a7-cf68-44a3-825b-63dd3edd5b0a' in a >frame because it set 'X-Frame-Options' to 'DENY'.
After a little research I've learned that the X-Frame option is set by the provider, and I cannot change it. I've looked through threads about how to work around this, but the answers either don't solve the problem or go over my head. Any explanation would be much appreciated.
My code is as follows:
login controller:
app.controller("loginCtrl", function ($scope, $state, $rootScope, $firebaseAuth, $location) {
// Firebase config.
var config = {
apiKey: "",
authDomain: "",
};
// FirebaseUI config.
var uiConfig = {
'queryParameterForWidgetMode': 'mode',
'signInSuccessUrl': '/home',
'signInOptions': [
firebase.auth.FacebookAuthProvider.PROVIDER_ID,
firebase.auth.GoogleAuthProvider.PROVIDER_ID
],
// Terms of service url.
//'tosUrl': '<your-tos-url>',
'callbacks': {
'signInSuccess': function (currentUser, credential, redirectUrl) {
// Do something.
// Return type determines whether we continue the redirect automatically
// or whether we leave that to developer to handle.
console.log('success');
return true;
}
}
};
// Initialize the FirebaseUI Widget using Firebase.
var app = firebase.initializeApp(config);
var auth = app.auth();
var ui = new firebaseui.auth.AuthUI(auth);
// The start method will wait until the DOM is loaded.
ui.start('#firebaseui-auth-container', uiConfig);
});
login.html
<ion-view title="Sign In">
<ion-content>
<div>
<center>
<br />
<h1>Sign In</h1>
</center>
<div id="firebaseui-auth-container"></div>
</div>
</ion-content>
relevant index.html
<!-- FirebaseUI for Facebook Auth -->
<script src="https://www.gstatic.com/firebasejs/live/3.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/live/3.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/ui/0.4.0/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/0.4.0/firebase-ui-auth.css" />
Thanks!
Sam
I am also trying to set up Facebook and Google authentication through FirebaseUI in my Cordova/PhoneGap app. However, while reading the FirebaseUI for Web — Auth docs I found the following:
FirebaseUI fully supports all recent browsers. Signing in with
federated providers (Google, Facebook, Twitter, Github) is not yet
supported in non-browser environments (Cordova, React Native,
Ionic...) nor Chrome extensions.
So, unfortunately it seems that using FirebaseUI with a Cordova app is not supported yet.
I am newbie to a Angular and Ionic as well.
Tried the following tutorial:
https://www.sitepoint.com/how-to-integrate-facebook-login-into-a-cordova-based-app/
Steps performed:
1.In app browser is installed.
Included libraries.
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="lib/ng-cordova-oauth/dist/ng-cordova-oauth.js"></script>
<script src="cordova.js"></script>
Include code inside index.html before body closing tag:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'MyappID',
xfbml : true,
version : 'v2.6'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Following is my login.html :
<button class="btn-margin-left button button-positive" ng-click="menuCtrl.fbLogin()">
<i class="ion-social-facebook icon-size1 "></i>
</button>
This is my controller :
menuCtrl.fbLogin = function ($cordovaOauth,$http) {
facebookLogin(window.cordovaOauth, window.http);
}
This is my app.js :
angular.module("cgsi",['ionic', 'ngCordova','ngCordovaOauth'])
.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider, $httpProvider, $logProvider, $sceDelegateProvider,$cordovaOauth,$http) {
window.cordovaOauth = $cordovaOauth;
window.http = $http;
});
I am getting error Unknown provider $cordovaOauth
Please let me know where i am going wrong?
first of all you need to have account as facebook developer and generate one app for test,
https://developers.facebook.com/
then create one cordova application and and set one button in UI side.
Then you need to install following plugin in your test-app.
https://github.com/Wizcorp/phonegap-facebook-plugin
or
https://github.com/jeduan/cordova-plugin-facebook4
please go through above plugin carefully because you need to add your app_id and app_name which you can find from developer-facebook account where you created your test app.
and then you need to go through related plugin documentation for getting facebook login code.
Thank you.
I can't see your controller has dependency injected or not, I hope you will get what my mean.
if still problem is same. use Adding google plus login to ionic app
And instead of google try facebook. after completion of installation you can add all other plugins that you want.
I've just added the Facebook share button to my Angular site however it only appears once I refresh the page.
So i have the Facebook SDK JS loading in my index.html (as taken from their webpage).
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.5";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
And then I have an ng-view (and another .html page where i actually have the Share button):
<div class="fb-share-button"
data-href="http://www.exampleurl.com"
data-layout="button">
</div>
Any ideas why the button only appears after the page refresh. Is it ok to have to Facebook sdk JS in my index and use the share button with ng-view?
Thanks.
I had the same problem and got it to work by calling FB.XFBML.parse() from my controller - like this:
(function () {
"use strict";
angular.module("app")
.controller("myController", myController);
function myController() {
FB.XFBML.parse();
}
})();
Adding this after init solved this issue.
if (typeof (FB) != 'undefined'&& FB != null) { FB.XFBML.parse(); }
I solved this issue with more simply.
My index.html
reviews.html
<div
class="fb-comments"
[attr.data-href]="url"
data-width="100%"
data-numposts="5"
and in reviews.ts file
declare var FB: any;
ngOnInit(): void {
FB.XFBML.parse();
}