I have a SinglePageApplication built with AngularJs. I want too add Facebook Custom Audience tracking pixel globally and update it manually every time user changes page (url).
Is it possible and if so, how?
Reference: https://developers.facebook.com/docs/reference/ads-api/custom-audience-website-faq/
I managed to resolve this by loading _fbq object:
<script>
(function() {
var _fbq = window._fbq || (window._fbq = []);
if (!_fbq.loaded) {
var fbds = document.createElement('script');
fbds.async = true;
fbds.src = '//connect.facebook.net/en_US/fbds.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(fbds, s);
_fbq.loaded = true;
}
_fbq.push(['addPixelId', 'XXXXXXXXXXXXXXXXX']);
})();
//Notice removed 'PixelInitialized' call.
</script>
and then calling 'PixelInitialized' event every time page changes.
$window._fbq.push(['track', 'PixelInitialized', {}]);
Since then facebook correctly tracks my audiences.
Here's what I'm doing that seems to be working so far:
In my index.html file I removed the PageView function and commented out the pixel itself, as shown below.
<head>
<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,'script','//connect.facebook.net/en_US/fbevents.js');
fbq('init', 'XXXXXXXXXX');
//fbq('track', "PageView");
</script>
<!--<noscript><img height="1" width="1" style="display:none"-->
<!--src="https://www.facebook.com/tr?id=XXXXXXXXXX&ev=PageView&noscript=1"-->
</noscript>-->
<!-- End Facebook Pixel Code -->
</head>
Then, I configure my app as follows...
.config(['$stateProvider', '$urlRouterProvider', '$windowProvider', function($stateProvider, $urlRouterProvider, $windowProvider) {
var $window = $windowProvider.$get();
Now, for each state change, I use the onEnter and onExit to fire off the "events" I want to capture:
.state('foo.bar', {
url:'/bar',
templateUrl: 'template.html',
controller: 'templateCtrl',
onEnter: function(){
$window.fbq('track', "Page1Enter");
},
onExit: function(){
$window.fbq('track', "Page1Exit");
}
})
I'm guessing that, if I wanted to, I could simply move any fbq('track', "PageView"); code into a controller. For my use case, though, tracking from state changes works perfectly for monitoring flow from within my app.
Hope this helps someone else.
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window,document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
// initialize facebook pixel code
fbq('init', {SET-YOUR-ID}); // <-- replace {SET-YOUR-ID} with your facebook pixel convesion id
// disabled automatic push state for single web application
fbq.disablePushState = true;
// then call manually track PageView event
fbq('track', 'PageView');
Into Single Page Application(SPA) you must disabled automatic listen on push State, pop State and windows history as Facebook pixel library by default hook into windows.history and push/pop state.
according to #lari answer about another related question to your question and Josh's Post blog
Related
I'm making an AngularJS app with the facebook sdk. The structure comes as follows:
<html xmlns:fb="http://ogp.me/ns/fb#">
<head>
<title>Reportes para Anunciantes</title>
<meta charset="UTF-8">
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-ui-router.min.js"></script>
<!-- more scripts here -->
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : 'MYAPPID', //Have an actual app id in my source
cookie : true, // enable cookies to allow the server to access
// the session
xfbml : true, // parse social plugins on this page
version : 'v2.0' // use version 2.0
});
angular.bootstrap(document, ['Application']);
};
// Load the SDK asynchronously
(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/es_LA/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div id="content" ui-view>
Cargando API de Facebook ...
</div>
</body>
</html>
In the page, I load Angular once the Facebook API is loaded. The site uses xfbml for the login buttons.
The whole angular app is in index.js:
var Application = angular.module(
"Application",
['ui.router'],
['$stateProvider', function($stateProvider){
//$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
$stateProvider
.state('notloggedin', {
templateUrl: 'templates/notloggedin.html',
controller: 'Application.NotLoggedIn'
})
.state('notauthorized', {
templateUrl: 'templates/notauthorized.html',
controller: 'Application.NotAuthorized'
})
.state('inapp', {
templateUrl: 'templates/inapp.html',
controller: 'Application.InApp'
});
}]
);
function FBStatusChecker($state){
this._state = $state;
}
FBStatusChecker.prototype = {
checkAndGo: function(response) { /* omitted - no issue here */ },
/* omitted methods - no issue here */
updateState: function(){
var context = this;
FB.getLoginStatus(function(response) {
context.checkAndGo(response);
})
}
};
Application.StatusChangeService = Application.service('Application.FBStatusChecker', ['$state', FBStatusChecker]);
Application.directive("fbLoginButton", function() {
return {
restrict: 'E',
link: function (scope, iElement, iAttrs) {
console.log("your ass");
if (FB) {
console.log("is broken");
FB.XFBML.parse(iElement[0]);
}
}
}
});
/* omitted controllers - no issue here.
two of them are empty, and one correctly updates the scope
via $scope.$apply(...) for an asynchronous callback */
Application.run(['Application.FBStatusChecker', function(statusChecker){
statusChecker.updateState();
}]);
Let's analyze by parts:
The page uses ui-router to switch between application states. This works as expected. Angular is only loaded (i.e. my module being run) once the FB API was successfully loaded.
The application defines three states, and in run() one of those states is selected.
I omitted the controllers, since two are empty, and the third updates -with no issues- the scope.
I omitted the state-switcher service methods (this has the task to use $state to switch to one of three states depending on facebook state).
There's a directive named fbLoginButton. This directive must be recognized as 'E' (lement), and should match fb:login-button. The directive is successfully matched.
I had no issue generating the button before using AngularJS and ui-router.
Finally, the templates come:
notloggedin.html
<fb:login-button max_rows="1" size="xlarge" show_faces="false" auto_logout_link="false"></fb:login-button>
Debes iniciar sesión en Facebook para continuar.
notauthorized.html
<fb:login-button max_rows="1" size="xlarge" show_faces="false" auto_logout_link="false"></fb:login-button>
Debes autorizar la aplicación para continuar.
inapp.html
<span ng-if="name">
Bienvenido {{ name }}!
</span>
<span ng-if="!name">
Listando ...
</span>
Notes: Also tried HTML5 solution, using div, instead of xfbml.
And my issue is: The facebook buttons are not being shown. Only the corresponding texts are being shown. If i'm logged in Facebook when I hit this page, I get correctly redirected to the expected state, with the {{ name }} being fetched. The same occurs with the other states, so I'm not having issue specificly with graph api, but with xfbml.
And my question is: What am I missing? The directive is being matched but seems that FM.XML.parse has no effect. How can I fix it?
Apparently -discovered it by a lucky mistake- the .parse method ignores the current element, so the parse must start from the parent element. So far, the directive must be changed to:
Application.directive("fbLoginButton", function() {
return {
restrict: 'E',
link: function (scope, iElement, iAttrs) {
if (FB) {
FB.XFBML.parse(iElement[0].parent);
}
}
}
});
which consisted in just adding the .parent property to get the parent DOM node.
However, if two items matched by this directive are siblings (or using another directive with the same functionality), this could be run twice. So recording the element in an array after parsing it, and checking before parsing it, would be a good workaround to avoid doing the parsing twice. Another alternative would be to force a parsing in each state's controller, to the ui-view-holding container. The latter would be implemented like this:
The only directive will be an attribute-based directive, e.g. xfbml-parse in the ui-view element (in my case):
Application.directive("fbLoginButton", function() {
return {
restrict: 'E',
link: function (scope, iElement, iAttrs) {
if (FB) {
FB.XFBML.parse(iElement[0].parent);
}
}
}
});
being no need to implement other directives.
After that, use xfbml-parse directive in the ui-view element. In my case:
<div id="content" ui-view xfbml-parse>
Cargando API de Facebook ...
</div>
which will run the link function every time the state changes.
So: every time the ui-view node renders, the XFBML will be parsed.
My problem is simple, everything in this code works as expected except that everytime, I click on login button, I get redirected to '/'. I do not want that. I want the user to stay on login page until they finish authenticating via facebook/persona/twitter and then get redirected to '/content'.
Here is my router/app/controllers:
var app = angular.module("myapp", ["ngRoute","firebase"]);
app.config(['$routeProvider',function($routeProvider){
$routeProvider.when('/',{
templateUrl: 'landing.html',
});
$routeProvider.when('/login',{
templateUrl: 'login.html',
controller: 'controller'
});
$routeProvider.when('/content',{
authRequired: true,
templateUrl: 'content.html',
controller: 'MyController'
});
$routeProvider.otherwise({redirectTo: '/'});
}]);
app.controller('MyController',['$scope', '$firebase','$firebaseAuth',function($scope,$firebase,$firebaseAuth) {
var ref = new Firebase("https://mybase.firebaseio.com/");
$scope.auth = $firebaseAuth(ref,{path: '/'});
$scope.messages = $firebase(ref);
$scope.addMessage = function(e) {
if (e.keyCode != 13) return;
$scope.messages.$add({from: $scope.name, body: $scope.msg});
$scope.msg = "";
};
}]);
app.controller('controller',['$scope','$firebaseAuth',function($scope, $firebaseAuth) {
var ref = new Firebase('https://mybase.firebaseio.com/');
$scope.auth = $firebaseAuth(ref);
}]);
This (my preferred solution) didnt work either:
.controller('LoginCtrl',['$scope','$firebase','$firebaseAuth','$location',function($scope,$firebase,$firebaseAuth,$location, waitForAuth){
var ref = new Firebase('https://myfirebase.firebaseio.com/');
$scope.auth = $firebaseAuth(ref,{path: '/'});
waitForAuth.then(function(user){
$location.path('/content');
})
}])
My div/button looks as follows (I also have similar one but with 'persona'.):
<div ng-controller="controller">
<div class="facebook-login">
<span><i class="fa fa-facebook-square fa-lg"></i> LogIn with Facebook</span>
</div>
<div class="facebook-login">
<span><i class="fa fa-facebook-square fa-lg"></i> LogIn with Persona</span>
</div>
</div>
I have included the following in my html:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<script src="//cdn.firebase.com/v0/firebase.js"></script>
<script src="//cdn.firebase.com/v0/firebase-simple-login.js"></script>
<script src="//cdn.firebase.com/libs/angularfire/0.5.0/angularfire.min.js"></script>
<script src="//code.angularjs.org/1.2.6/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/module.waitForAuth.js"></script>
<script src="//login.persona.org/include.js"></script>
<script src="app.js"></script>
I have enabled facebook login and persona login in my firebase forge. Also I have added my facebook app id and secret too. Everytime I click on the login button I get redirected to '/'. waitforAuth I use is here: https://gist.github.com/katowulf/7328023, but if I use it in my controllers, login with facebook/persona buttons do not work at all. If I use waitForAuth, everytime I click on one of the login buttons I get redirected to '/' immediately instead of login popup.
Anyone? :)
I finally found the solution to my problem. Adding the following stops automatic redirect to '/' before login even takes place:
I just needed to add this:
$scope.$on('$locationChangeStart', function(event) {
event.preventDefault();
});
In here like this:
app.controller('controller',['$scope','$firebaseAuth','$location','$rootScope',function($scope, $firebaseAuth,$location,$rootScope) {
$scope.$on('$locationChangeStart', function(event) {
event.preventDefault();
});
var ref = new Firebase('https://mybase.firebaseio.com/');
$scope.auth = $firebaseAuth(ref);
$rootScope.$on('$firebaseAuth:login', function(){
$location.path('/content');
});
}]);
However, I ran into another problem, because this now doesnt work:
$rootScope.$on('$firebaseAuth:login', function(){
$location.path('/content');
Because after user is finished authenticating they should be redirected to /content (instead of being stuck at login page with login buttons disappearing due to ng-hide (See above)), but it does not matter what I try $location.path('/content') doesnt work.
I tried this:
waitForAuth.then(function(){
console.log('test');
$location.path('/content');
})
But console.log prints out "test" in the console way before user is authenticated, so waitForAuth doesnt seem to work either :/. Somehow waitForAuth fires console.log but it doesnt fire $location.path... Odd.
I even tried doing this (both with waitForAuth and $rootScope.$on:
waitForAuth.then(function(){
console.log('test');
$location.path('/content');
$scope.$apply();
})
But I just get an error that angular $digest is already in progress.
Adding this: ng-click="auth.$login('facebook'); return false;" like that, angular throws me this error :
Error: [$parse:syntax] Syntax Error: Token 'false' is an unexpected token at column 33 of the expression [auth.$login('facebook'); return false;] starting at [false;].
And login buttons become un-clickable... :(
Ohh dear... me :)
I had the same problem where the URL was always reverting back to the homepage. The problem was caused by a simple mistake in the html syntax:
Log out
After I removed # in the href attribute the problem was resolved. Hope this helps others who may experience a similar problem.
I am using different facebook dialog boxes on my external website(a kind of facebook application) for tasks like posting to feed, Sending app requests etc. Earlier all dialogs were displaying properly but from last couple of days I have been experiencing display issues as dialog are not displaying to there full height.
I have tested on Chrome, Firefox and Safari browsers, at all places same issue.I even asked some of my friends to check at there places, as a result they are also facing the same.
Here is the snapshot link:
Here is the code to one apprequest dialog, I m using:
<body onLoad="warmup();">
<div id="fb-root"></div>
<script>
function sendRequest(type) {
var request = {
method: 'apprequests',
message: 'Hey! I Just Wanted You To Fill My Slambook.',
data: type,
title: 'Select friends'
};
FB.init({
appId:'xxxxxxxxx', cookie:true,
status:true, xfbml:true
});
FB.ui(request, function (response) {
if (response && response.request_ids) {
document.getElementById('sent').style.display='block';
} else {
}
})
}
function warmup(){
FB.init({
appId:'xxxxxxxxx', cookie:true,
status:true, xfbml:true
});
}
This is a bug that will be fixed soon: http://developers.facebook.com/bugs/194725433940802
A little trick that work for me:
var HACKAppRequests = {
id_interval:0,
busca:function(){
var i,fb_root,iframe;
try{
fb_root = document.getElementById('fb-root');
iframe = fb_root.getElementsByTagName('IFRAME');
recorre_iframe:
for(i=0;i<iframe.length;i++){
if(iframe[i].className=='FB_UI_Dialog'){
clearInterval(HACKAppRequests.id_interval);
iframe[i].style.height = '550px';
break recorre_iframe;
};
};
} catch(err){};
}
};
FACEBOOK CALL
function buscaAmigosFB(){
FB.ui({method:'apprequests',
title:'Esto es sólo para TI',
message:'He decidido comenzar a escribir una historia. ¿Te atreves a escribirla conmigo ;D?',
max_recipients:1
},someFunction);
// RESIZE
HACKAppRequests.id_interval = setInterval(HACKAppRequests.busca,250);
};
I am using the JS SDK for Facebook based on the NEW GraphAPI for Auth/Login.
Has anyone had this issue when logging in after FB.login() was called via the JS SDK?
The problem: after I initialize by calling FB.Init() asynchronously (because this all wrapped in a window.fbAsyncInit function) the login pops up; I log in but then that pop-up refreshes to show a white page and the pop-up stays open and does not close...why? I am waiting to check response.session in the FB.login() callback but it seems as though I never get it back because this pop-up seems to just stick there and the process appears to just halt after you're logged in and I just figured this pop-up would just close and return me the response.session in the callback automatically. Why would that pop-up not go away?
I copied the url from the pop-up after I'm logged in and showing white the following url so it looks like the response is there but then why isn't that pop-up window closing so my callback can handle the response??
http://static.ak.fbcdn.net/connect/xd_proxy.php#?=&cb=f18fe0b7c66da54&origin=http%3A%2F%2Flocalhost%2Ff3745f32ed63a7a&relation=opener&transport=postmessage&frame=f18adb488566372&result=user_photos&session={%22session_key%22%3A%222.vH4SVCisnh8HJWjEI1Vy_Q__.3600.1280106000-100001379631246%22%2C%22uid%22%3A%22100001379631246%22%2C%22expires%22%3A1280106000%2C%22secret%22%3A%22TH45WFg8I_5r_cOoVIujjg__%22%2C%22access_token%22%3A%22132444323462464|2.vH4SVCisnh8HJWjEI1Vy_Q__.3600.1280106000-100001379631246|q123iPQcKY45xWXtOZ2ebOOZTQQ.%22%2C%22sig%22%3A%22a75e85af2354292bfdcf90b9d319ebf7%22}
I did notice that when FB.login() is called and the login pop-up comes up, I see this error in FireBug talking about how it doesn't like the fact that I'm testing over localhost or something I guess:
uncaught exception: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMLocation.host]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: chrome://smarterwiki/content/smarterwiki.js :: anonymous :: line 1225" data: no]
that error bothers me...I need to figure out why it's coming up and I bet you I'm not the only one who has seen this when testing locally. I see no info though on troubleshooting this on the net anywhere either on the Facebook forums or elsewhere. I see others have had this issue but no resolution.
So when you implemented yours, did your facebook pop-up just close after the user is logged in or did you need to do something special to finish this process?
Also, I notice if I manually close that pop-up then go to check if that cookie was generated to contain my session, it's not (the fbs_[yourappid] cookie). So it looks like something ends prematurely here. I've got in my init cookie: true so I wonder if this problem were the pop-up dialog is not closing is related to the cookie also not being created client-side on my test PC.
This problem appeared out of nowhere for my site, when facebook made a recent change to its "all.js".
In an earlier version of their javascript I had a problem specific to IE, and I copied this little snippet of code from someone's post on the internet. It seemed cryptic, but solved the problem at the time:
// http://developers.facebook.com/bugs/204792232920393
// Hack to fix http://bugs.developers.facebook.net/show_bug.cgi?id=20168 for IE7/8/9.
FB.UIServer.setLoadedNode = function (a, b) { FB.UIServer._loadedNodes[a.id] = b; };
FB.UIServer.setActiveNode = function(a, b) { FB.UIServer._active[a.id]=b; };
It turns out those lines were causing this problem for me. I removed them, and the problem went away. The original bug specific to IE has also been fixed, I believe, in the most recent "all.js".
I don't know what your code is, but my problem was I forget to add
<div id="fb-root"></div>. My code :
<div id="fb-root"></div>
<script src="http://static.ak.fbcdn.net/connect/en_US/core.js"></script>
<script>
FB.init({ apiKey: 'app key'});
</script>
<div class="fbloginbutton" id="fb-login" onclick="Login();">
<span id="fb_login_text" >Login with Facebook</span>
</div>
<asp:Label ID="errMsg" runat="server"></asp:Label>
<script type="text/javascript">
function Login() {
FB.login(function(response) {
document.getElementById('fb_login_text').innerHTML = 'Logout';
if (response.session) {
FB.api('/me', function(response) {
var str;
str = response['id'] + ";" +
response['name'] + ";" +
response['first_name'] + ";" +
response['last_name'] + ";" +
response['link'] + ";" +
response['birthday'] + ";" +
response['gender'] + ";" +
response['email'];
alert(str);
});
}
else {
document.getElementById('fb_login_text').innerHTML = 'Login with Facebook';
}
}, { perms: 'user_birthday,email' });
};
</script>
As you see I don't use div fb-root anywhere but It is requered to facebook login work!
I struggled with this issue recently. The problem appeared from no where, presumably from some change in the Facebook JS SDK. For what its worth I plan to never use the JS SDK again, these random issues eat up my time.
Anyway here is the hack that I used to get around the issue.
var accessToken, fb_response;
if (window.location.hash.length < 30) {
window.location = "http://www.facebook.com/dialog/oauth?client_id=YOUR_ID&redirect_uri=YOUR_URL&scope=YOUR_PERMISSIONS&response_type=token";
} else {
fb_response = window.location.hash;
accessToken = fb_response.substr(14, fb_response.indexOf("&expires") - 14);
FB._authResponse = {
accessToken: accessToken
};
window.location.hash = "";
FB.api("/me", function(profile) {
if (profile.id) {
app_init();
} else {
alert("Problem connecting to Facebook");
}
});
}
Basically I send the user to the Facebook oauth dialog and when they return I grab the access token from the hash. I then set the internal access token parameter on the Facebook Object. Once this is done you can make all the normal Facebook Api calls.
Hopefully this helps someone!
For future projects I will definitely stick to a server side auth flow, you have a lot more control!
It seems that you are trying the localhost, can you try it with the public url.
I already faced this problem. But I solved it by configuring the canvas url in application as the public url (example. www.something.com/test/).
This is a working sample for me:
<!DOCTYPE html>
<html>
<head>
<title>Facebook Client-side Authentication Example</title>
</head>
<body>
<div id="fb-root"></div>
<script>
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
// Init the SDK upon load
window.fbAsyncInit = function() {
FB.init({
appId : '00000000000000', // Your App ID
channelUrl : '//'+window.location.hostname+'/channel', // Path to your Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// listen for and handle auth.statusChange events
FB.Event.subscribe('auth.statusChange', function(response) {
if (response.authResponse) {
// user has auth'd your app and is logged into Facebook
FB.api('/me', function(me){
if (me.name) {
document.getElementById('auth-displayname').innerHTML = me.name;
}
})
document.getElementById('auth-loggedout').style.display = 'none';
document.getElementById('auth-loggedin').style.display = 'block';
} else {
// user has not auth'd your app, or is not logged into Facebook
document.getElementById('auth-loggedout').style.display = 'block';
document.getElementById('auth-loggedin').style.display = 'none';
}
});
// respond to clicks on the login and logout links
document.getElementById('auth-loginlink').addEventListener('click', function(){
FB.login();
});
document.getElementById('auth-logoutlink').addEventListener('click', function(){
FB.logout();
});
}
</script>
<h1>Facebook Client-side Authentication Example</h1>
<div id="auth-status">
<div id="auth-loggedout">
Login
</div>
<div id="auth-loggedin" style="display:none">
Hi, <span id="auth-displayname"></span>
(logout)
</div>
</div>
</body>
</html>
The website clearly says that all.js is expired. However, I get the same error you got only with sdk.js. Problem was fixed when went back to the depreciated all.js
// Old SDK (deprecated)
js.src = "//connect.facebook.net/en_US/all.js";
// New SDK (v2.x)
js.src = "//connect.facebook.net/en_US/sdk.js";
facebook sdk
I recently upgraded to open graph and implemented some of the facebook social plugins on my website like fb:friendpile fb:like-box etc
Ever since I implemented these new features, I'm seeing some random behavior with these plugins.
Like on my home page, when you type in the URL and go for the first time, none of the facebook social plugins are rendered - no login button, no friendpile no like - nothing.
But when you hit CTRL F5 - they appear. First I thought it probably has somethin to do with my machine but yesterday two of my users reported the same issue.
I googled around and it seems to have something to do with where you place your connect code. Right now, I have this relevant portion of the script placed in my head tag - I even tried placing it right before the end of body tag - but it made no difference.
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '<?php echo Zend_Registry::getInstance()->configuration->facebook->appid;?>', status: true, cookie: true, xfbml: true});
/* All the events registered */
FB.Event.subscribe('auth.login', function(response) {
// do something with response
login();
});
FB.Event.subscribe('auth.logout', function(response) {
// do something with response
logout();
});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
function login(){
document.location.href = "<?php echo $this->baseUrl(); ?>/login/log";
}
function logout(){
FB.init({appId: '<?php echo Zend_Registry::getInstance()->configuration->facebook->appid;?>'});
FB.logout(function(response) {
// user is now logged out
});
document.location.href = "<?php echo $this->baseUrl(); ?>/login/logout";
return false;
}
</script>
Any insights in trouble shooting this will be appreciated
Thanks
Your logout logic seems problematic (you call FB.logout() in logout() -- but also call logout() on the 'auth.logout' event, which seems circular). You should also remove the FB.init() call inside your logout() function. The lack of xmlns:fb on the <html> tag is often the cause of XFBML not rendering in IE, so I'd double check that. You could also try replacing the async loading with sync loading using a normal script tag like:
<script src="http://connect.facebook.net/en_US/all.js"></script>
But a live repro case would be more helpful since your code looks fine for the most part.
EDIT: You can also checkout http://fbrell.com/xfbml/fb:login-button for examples.