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();
}
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.
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 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.
Initially, I was trying to get a bootstrap dropdown to load, but the directive wasn't working properly. Suspecting an issue with loading ui.bootstrap, I tried with a simple progressbar and it's still not loading. Long story short, I think ui.bootstrap is loading, but for some reason it's not launching correctly. I'm using webpack. Can anyone see what I'm doing incorrectly here? I'm not getting any errors on load.
My thoughts now: I haven't loaded the directive properly. Perhaps the templates aren't loading.
Bundle JS:
/* 3 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
__webpack_require__(4);
module.exports = 'ui.bootstrap';
/***/ },
Entry JS:
var angular = require('angular');
var uiBootstrap = require('angular-ui-bootstrap');
var uiRouter = require('angular-route');
var moment = require('moment');
var angularCalendar = require('angular-bootstrap-calendar');
var layout = require('./js/angular/layout/layout.module.js');
var layoutController = require('./js/angular/layout/layout.controller.js');
angular.module('app', ['layout','ngRoute','ui.bootstrap','mwl.calendar']);
var app = angular.module('app');
Layout Controller:
angular.module('layout', []);
angular
.module('layout')
.controller('Layout', Layout);
Layout.$inject = ['$log'];
function Layout($log) {
/*jshint validthis: true */
var vm = this;
}
Template:
<body ng-app="app" class="container">
<div ng-controller="Layout as layout">
<h1>{{layout.content.model.layout.header}}</h1>
<div class="nav">
<uib-progressbar value="55"></uib-progressbar>
</div>
</div>
</body>
Fixed: angular-ui-bootstrap wasn't in my package.json for some reason.
How I can use On demand loading of controllers /services in angularJs. now I have a mainApp which referenced by Index.html. I am using $routeprovider to routing but all the required controller/services are referenced in the corresponding views eg:
<section id="pageLevelScripts">
<!--location of page level scripts-->
<script src="/Area/Sotaria/Controllers/UserController.js"></script>
</section>
<div class="row" >
<div class="col-lg-12">
<div class="row">
<div class="col-lg-12">
<ol class="breadcrumb">
<li>Home</li>
<li>Usermanagement</li>
<li class="active"><span>Users</span></li>
</ol>
<h6>{{name}}</h6>
</div>
</div>
This is my requirement I don't want to load all the controllers in my Index.html. but when I navigate to the childView, I am getting an error "Usercontroller is undefined", So how I can enable ondemanidng / lazy loading of controllers in angualrjs, .Ie. when ever the child page loaded ,then only its related controllers should load.
The reason you get undefined is because just loading the JS file doesn't make Angular aware of it. You must attach it to Angular's $controllerProvider.
You can create a custom service that does the lazy loading for you or use one of the many already built by other people. Here is an example of a custom one that you can use with requirejs.
If the below example is not explanatory enough you can read this blog post here: Strange Milk - Front End Development
Custom Provider
function LoaderProvider(){
this.controller = null;
this.directive = null;
this.filter = null;
this.factory = null;
this.service = null;
//service factory definition
this.$get = ['$q', '$rootScope', function($q, $rootScope){
return {
load: function (path) {
var q = $q.defer();
require([path], function () {
$rootScope.$apply(function () {
q.resolve();
});
});
return q.promise;
}
};
}];
}
var container = new LoaderProvider();
module.provider('Loader', function(){
return container;
});
Your Apps config:
.config(function (LoaderProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) {
// save references to the providers
LoaderProvider.controller = $controllerProvider.register;
LoaderProvider.directive = $compileProvider.directive;
LoaderProvider.filter = $filterProvider.register;
LoaderProvider.factory = $provide.factory;
LoaderProvider.service = $provide.service;
})
An example of how you would use this in your App's routes. Learn more about Resolve
resolve : {
load : ['Loader', function(Loader){
return Loader.load('../app/global/controllers/headerCtrl');
}]
}
Some other resources/solutions:
ocLazyLoad
angularAMD