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
I want to store Url in configuration file so when I deployed this on Testing server or on Production I have to just change the url on config file not in js file but I don't know how to use configuration file in angular js
You can use angular.constant for configurations.
app.constant('appConfigurations', {
link_url: "http://localhost:8080/api",
//For production u can simply change the link_url
//link_url: "http://production_url/api"
});
There are ways you can deal with it , but while coming to our implementation we used to do the following way
Create an External Environment js file
(function (window) {
window.__env = window.__env || {};
window.__env.apiUrl = 'your Api Url';
}(this));
In your Index.html
add env.js above the app.js
<!-- Load environment variables -->
<script src="env.js"></script>
In your app.js
var envr ={};
if(window){
Object.assign(envr,window.__env)
}
// Define AngularJS application var app= angular.module('myapp', []);
// Register environment in AngularJS as constant app.constant('__env',
env);
Update:
For adding additional URl in Config File:
(function (window) {
window.__env = window.__env || {};
window.__env.apiUrl = 'your Api Url';
//Another Url
window.__env.baseUrl ='/';
}(this));
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();
}
I am just learning Gulp and trying to get it all working with my Angularjs app.
I have successfully concatenated & minified my JS files and minified my html files using the gulpfile.js below. App works great, but my only problem is my chart does not show up after minifying my HTML. I am using the latest version of chartjs with the Angles wrapper for angularjs. (https://github.com/lgsilver/angles)
gulpfile.js
var gulp = require('gulp'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
ngAnnotate = require('gulp-ng-annotate'),
minifyHTML = require('gulp-minify-html'),
connect = require('gulp-connect'),
htmlify = require('gulp-angular-htmlify');
// compact js
gulp.task('js', function () {
gulp.src(['app/assets/js/**/app.js', 'app/assets/js/**/*.js'])
.pipe(concat('app.js'))
.pipe(ngAnnotate())
.pipe(uglify({mangle: false}))
.pipe(gulp.dest('dist/assets/js'))
});
//compact html
gulp.task('html', function() {
gulp.src(['app/*.html', 'app/**/*.html'])
.pipe(htmlify())
.pipe(minifyHTML())
.pipe(gulp.dest('dist'))
});
my original html
<div id="home-chart">
<canvas barchart options="chartOptions" data="chartData" width="700" height="170"></canvas>
</div>
my minified html
<div id=home-chart><canvas options=chartOptions data=chartData width=700 height=170></canvas></div>
I am not getting any errors, only a blank space where my bar chart should be.
Is this a problem with my javascript or the minified html?
Looks like gulp-minify-html (or rather the module it uses minimize) removes attributes without values by default.
You can easily fix that: .pipe(minifyHTML()) => .pipe(minifyHTML({empty: true}))